App Icon - Slow Shutter Cam

App Icon - Slow Shutter Cam1943
@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);
    }
}

也许你还喜欢