@mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}html, body { height: 100%; background: #ffc107; position: relative;}.icon-large { width: 220px; height: 220px; border-radius: 38px; @include centerer;}.icon-slowshutter { background-color: #3e1e82; background-image: radial-gradient(circle at top center, #6d1bb0, #3e1e82 50%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle at bottom center, #2627ba, #3e1e82 50%, rgba(255, 255, 255, 0) 80%);}.circle { width: 122px; height: 122px; position: absolute; top: 48px; left: 50%; transform: translate(-50%, 0); border-radius: 50%; border: 6px solid transparent; box-shadow: 0 0 0 5px #e4dbed; background: transparent; overflow: hidden;}.o { @include centerer; animation:rotateo 1s infinite alternate;}@keyframes rotateo{ 0%{ transform:rotate(0deg); } 100%{ transform: rotate(-15deg); }}.brick { width: 100px; height: 100px; background: #e4dbed; position: absolute; transform-origin: 0 0;}@for $i from 1 to 7 { .brick:nth-child(#{$i}) { transform: rotate($i * 60deg - 60deg) translate(-91px, 27px) skewX(-30deg); animation: brick-anim-#{$i} 1s infinite alternate; } @keyframes brick-anim-#{$i} { 0% { transform: rotate($i * 60deg - 60deg) translate(-91px, 27px) skewX(-30deg); } 100% { transform: rotate($i * 60deg - 60deg) translate(-91px, 17px) skewX(-30deg); } }}.button { width: 28px; height: 14px; background: #e4dbed; border-radius: 9px 9px 3px 3px; position: absolute; top: 33px; left: 50%; transform: translate(-50%, 0); &:before, &:after { content: ""; display: block; width: 28px; height: 14px; background: #e4dbed; border-radius: 9px 9px 3px 3px; position: absolute; top: 22px; } &:before { left: -54px; transform: rotate(-45deg); } &:after { right: -54px; transform: rotate(45deg); }}
未经允许不得转载： ICode联盟 » 插件特效 » App Icon - Slow Shutter Cam