移动应用图标设计 - 苹果Safari浏览器的动画标识

App Icon Safari 用纯CSS3实现的指南针（罗盘）动画。

图标，CSS3

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1341
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
    background: #e91e63;
    position: relative;
}
.icon {
    width: 120px;
    height: 120px;
    border-radius: 25%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.icon-safari {
    background: #fff;
}
.compass {
    width: 105px;
    height: 105px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: -webkit-linear-gradient(top, #1ad4fd, #1d65f0 100%);
    background: linear-gradient(to bottom, #1ad4fd, #1d65f0 100%);
    border-radius: 50%;
}
.long {
    width: 1px;
    height: 9px;
    background: #fff;
    position: absolute;
}
.short {
    width: 1px;
    height: 5px;
    background: #fff;
    position: absolute;
}
.long:nth-of-type(1) {
    -webkit-transform: translate(52px, 48px) rotate(0deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(0deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(0deg) translate(0, -43px);
}
.short:nth-of-type(37) {
    -webkit-transform: translate(52px, 50px) rotate(5deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(5deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(5deg) translate(0, -45px);
}
.long:nth-of-type(2) {
    -webkit-transform: translate(52px, 48px) rotate(10deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(10deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(10deg) translate(0, -43px);
}
.short:nth-of-type(38) {
    -webkit-transform: translate(52px, 50px) rotate(15deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(15deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(15deg) translate(0, -45px);
}
.long:nth-of-type(3) {
    -webkit-transform: translate(52px, 48px) rotate(20deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(20deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(20deg) translate(0, -43px);
}
.short:nth-of-type(39) {
    -webkit-transform: translate(52px, 50px) rotate(25deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(25deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(25deg) translate(0, -45px);
}
.long:nth-of-type(4) {
    -webkit-transform: translate(52px, 48px) rotate(30deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(30deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(30deg) translate(0, -43px);
}
.short:nth-of-type(40) {
    -webkit-transform: translate(52px, 50px) rotate(35deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(35deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(35deg) translate(0, -45px);
}
.long:nth-of-type(5) {
    -webkit-transform: translate(52px, 48px) rotate(40deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(40deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(40deg) translate(0, -43px);
}
.short:nth-of-type(41) {
    -webkit-transform: translate(52px, 50px) rotate(45deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(45deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(45deg) translate(0, -45px);
}
.long:nth-of-type(6) {
    -webkit-transform: translate(52px, 48px) rotate(50deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(50deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(50deg) translate(0, -43px);
}
.short:nth-of-type(42) {
    -webkit-transform: translate(52px, 50px) rotate(55deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(55deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(55deg) translate(0, -45px);
}
.long:nth-of-type(7) {
    -webkit-transform: translate(52px, 48px) rotate(60deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(60deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(60deg) translate(0, -43px);
}
.short:nth-of-type(43) {
    -webkit-transform: translate(52px, 50px) rotate(65deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(65deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(65deg) translate(0, -45px);
}
.long:nth-of-type(8) {
    -webkit-transform: translate(52px, 48px) rotate(70deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(70deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(70deg) translate(0, -43px);
}
.short:nth-of-type(44) {
    -webkit-transform: translate(52px, 50px) rotate(75deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(75deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(75deg) translate(0, -45px);
}
.long:nth-of-type(9) {
    -webkit-transform: translate(52px, 48px) rotate(80deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(80deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(80deg) translate(0, -43px);
}
.short:nth-of-type(45) {
    -webkit-transform: translate(52px, 50px) rotate(85deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(85deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(85deg) translate(0, -45px);
}
.long:nth-of-type(10) {
    -webkit-transform: translate(52px, 48px) rotate(90deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(90deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(90deg) translate(0, -43px);
}
.short:nth-of-type(46) {
    -webkit-transform: translate(52px, 50px) rotate(95deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(95deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(95deg) translate(0, -45px);
}
.long:nth-of-type(11) {
    -webkit-transform: translate(52px, 48px) rotate(100deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(100deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(100deg) translate(0, -43px);
}
.short:nth-of-type(47) {
    -webkit-transform: translate(52px, 50px) rotate(105deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(105deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(105deg) translate(0, -45px);
}
.long:nth-of-type(12) {
    -webkit-transform: translate(52px, 48px) rotate(110deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(110deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(110deg) translate(0, -43px);
}
.short:nth-of-type(48) {
    -webkit-transform: translate(52px, 50px) rotate(115deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(115deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(115deg) translate(0, -45px);
}
.long:nth-of-type(13) {
    -webkit-transform: translate(52px, 48px) rotate(120deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(120deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(120deg) translate(0, -43px);
}
.short:nth-of-type(49) {
    -webkit-transform: translate(52px, 50px) rotate(125deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(125deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(125deg) translate(0, -45px);
}
.long:nth-of-type(14) {
    -webkit-transform: translate(52px, 48px) rotate(130deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(130deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(130deg) translate(0, -43px);
}
.short:nth-of-type(50) {
    -webkit-transform: translate(52px, 50px) rotate(135deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(135deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(135deg) translate(0, -45px);
}
.long:nth-of-type(15) {
    -webkit-transform: translate(52px, 48px) rotate(140deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(140deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(140deg) translate(0, -43px);
}
.short:nth-of-type(51) {
    -webkit-transform: translate(52px, 50px) rotate(145deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(145deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(145deg) translate(0, -45px);
}
.long:nth-of-type(16) {
    -webkit-transform: translate(52px, 48px) rotate(150deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(150deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(150deg) translate(0, -43px);
}
.short:nth-of-type(52) {
    -webkit-transform: translate(52px, 50px) rotate(155deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(155deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(155deg) translate(0, -45px);
}
.long:nth-of-type(17) {
    -webkit-transform: translate(52px, 48px) rotate(160deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(160deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(160deg) translate(0, -43px);
}
.short:nth-of-type(53) {
    -webkit-transform: translate(52px, 50px) rotate(165deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(165deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(165deg) translate(0, -45px);
}
.long:nth-of-type(18) {
    -webkit-transform: translate(52px, 48px) rotate(170deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(170deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(170deg) translate(0, -43px);
}
.short:nth-of-type(54) {
    -webkit-transform: translate(52px, 50px) rotate(175deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(175deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(175deg) translate(0, -45px);
}
.long:nth-of-type(19) {
    -webkit-transform: translate(52px, 48px) rotate(180deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(180deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(180deg) translate(0, -43px);
}
.short:nth-of-type(55) {
    -webkit-transform: translate(52px, 50px) rotate(185deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(185deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(185deg) translate(0, -45px);
}
.long:nth-of-type(20) {
    -webkit-transform: translate(52px, 48px) rotate(190deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(190deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(190deg) translate(0, -43px);
}
.short:nth-of-type(56) {
    -webkit-transform: translate(52px, 50px) rotate(195deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(195deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(195deg) translate(0, -45px);
}
.long:nth-of-type(21) {
    -webkit-transform: translate(52px, 48px) rotate(200deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(200deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(200deg) translate(0, -43px);
}
.short:nth-of-type(57) {
    -webkit-transform: translate(52px, 50px) rotate(205deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(205deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(205deg) translate(0, -45px);
}
.long:nth-of-type(22) {
    -webkit-transform: translate(52px, 48px) rotate(210deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(210deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(210deg) translate(0, -43px);
}
.short:nth-of-type(58) {
    -webkit-transform: translate(52px, 50px) rotate(215deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(215deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(215deg) translate(0, -45px);
}
.long:nth-of-type(23) {
    -webkit-transform: translate(52px, 48px) rotate(220deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(220deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(220deg) translate(0, -43px);
}
.short:nth-of-type(59) {
    -webkit-transform: translate(52px, 50px) rotate(225deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(225deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(225deg) translate(0, -45px);
}
.long:nth-of-type(24) {
    -webkit-transform: translate(52px, 48px) rotate(230deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(230deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(230deg) translate(0, -43px);
}
.short:nth-of-type(60) {
    -webkit-transform: translate(52px, 50px) rotate(235deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(235deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(235deg) translate(0, -45px);
}
.long:nth-of-type(25) {
    -webkit-transform: translate(52px, 48px) rotate(240deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(240deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(240deg) translate(0, -43px);
}
.short:nth-of-type(61) {
    -webkit-transform: translate(52px, 50px) rotate(245deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(245deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(245deg) translate(0, -45px);
}
.long:nth-of-type(26) {
    -webkit-transform: translate(52px, 48px) rotate(250deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(250deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(250deg) translate(0, -43px);
}
.short:nth-of-type(62) {
    -webkit-transform: translate(52px, 50px) rotate(255deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(255deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(255deg) translate(0, -45px);
}
.long:nth-of-type(27) {
    -webkit-transform: translate(52px, 48px) rotate(260deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(260deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(260deg) translate(0, -43px);
}
.short:nth-of-type(63) {
    -webkit-transform: translate(52px, 50px) rotate(265deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(265deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(265deg) translate(0, -45px);
}
.long:nth-of-type(28) {
    -webkit-transform: translate(52px, 48px) rotate(270deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(270deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(270deg) translate(0, -43px);
}
.short:nth-of-type(64) {
    -webkit-transform: translate(52px, 50px) rotate(275deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(275deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(275deg) translate(0, -45px);
}
.long:nth-of-type(29) {
    -webkit-transform: translate(52px, 48px) rotate(280deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(280deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(280deg) translate(0, -43px);
}
.short:nth-of-type(65) {
    -webkit-transform: translate(52px, 50px) rotate(285deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(285deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(285deg) translate(0, -45px);
}
.long:nth-of-type(30) {
    -webkit-transform: translate(52px, 48px) rotate(290deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(290deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(290deg) translate(0, -43px);
}
.short:nth-of-type(66) {
    -webkit-transform: translate(52px, 50px) rotate(295deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(295deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(295deg) translate(0, -45px);
}
.long:nth-of-type(31) {
    -webkit-transform: translate(52px, 48px) rotate(300deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(300deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(300deg) translate(0, -43px);
}
.short:nth-of-type(67) {
    -webkit-transform: translate(52px, 50px) rotate(305deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(305deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(305deg) translate(0, -45px);
}
.long:nth-of-type(32) {
    -webkit-transform: translate(52px, 48px) rotate(310deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(310deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(310deg) translate(0, -43px);
}
.short:nth-of-type(68) {
    -webkit-transform: translate(52px, 50px) rotate(315deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(315deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(315deg) translate(0, -45px);
}
.long:nth-of-type(33) {
    -webkit-transform: translate(52px, 48px) rotate(320deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(320deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(320deg) translate(0, -43px);
}
.short:nth-of-type(69) {
    -webkit-transform: translate(52px, 50px) rotate(325deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(325deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(325deg) translate(0, -45px);
}
.long:nth-of-type(34) {
    -webkit-transform: translate(52px, 48px) rotate(330deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(330deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(330deg) translate(0, -43px);
}
.short:nth-of-type(70) {
    -webkit-transform: translate(52px, 50px) rotate(335deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(335deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(335deg) translate(0, -45px);
}
.long:nth-of-type(35) {
    -webkit-transform: translate(52px, 48px) rotate(340deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(340deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(340deg) translate(0, -43px);
}
.short:nth-of-type(71) {
    -webkit-transform: translate(52px, 50px) rotate(345deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(345deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(345deg) translate(0, -45px);
}
.long:nth-of-type(36) {
    -webkit-transform: translate(52px, 48px) rotate(350deg) translate(0, -43px);
    -ms-transform: translate(52px, 48px) rotate(350deg) translate(0, -43px);
    transform: translate(52px, 48px) rotate(350deg) translate(0, -43px);
}
.short:nth-of-type(72) {
    -webkit-transform: translate(52px, 50px) rotate(355deg) translate(0, -45px);
    -ms-transform: translate(52px, 50px) rotate(355deg) translate(0, -45px);
    transform: translate(52px, 50px) rotate(355deg) translate(0, -45px);
}
@-webkit-keyframes pointer-rotate {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(30deg);
        transform: translate(-50%, -50%) rotate(30deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(50deg);
        transform: translate(-50%, -50%) rotate(50deg);
    }
}
@keyframes pointer-rotate {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(30deg);
        transform: translate(-50%, -50%) rotate(30deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(50deg);
        transform: translate(-50%, -50%) rotate(50deg);
    }
}
.pointer {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: pointer-rotate 1s ease-in-out infinite alternate;
    animation: pointer-rotate 1s ease-in-out infinite alternate;
}
.pointer:before,
.pointer:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}
.pointer:before {
    border-bottom: 52px solid #ff1414;
    bottom: 0;
    left: -7px;
}
.pointer:after {
    border-top: 52px solid #fff;
    top: 0;
    left: -7px;
}

HTML

App Icon Safari 用纯CSS3实现的指南针（罗盘）动画。

图标，CSS3

编辑器支持Emmet

快捷键

App Icon Safari 用纯CSS3实现的指南针（罗盘）动画。

图标，CSS3

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：