App Icon - OneNote

@mixin centerer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}* { box-sizing: border-box;}html, body { height: 100%; background: #ffc107; position: relative;}.icon-large { width: 220px; height: 220px; border-radius: 38px; @include centerer;}.icon-onenote { background: linear-gradient(to bottom, #8c4387, #754472 100%); perspective: 600px;}.page { width: 122px; height: 106px; @include centerer; border-radius: 3px; border: 13px solid #fff; background: transparent repeating-linear-gradient(to bottom, transparent 0px, transparent 6px, #fff 6px, #fff 15px); box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3); transform-style: preserve-3d; &:before, &:after { content: ""; display: block; position: absolute; } &:before { width: 15px; height: 29px; background: #fff; right: -25px; top: -8px; border-radius: 3px; } &:after { width: 15px; height: 29px; background: #fff; right: -25px; top: 25px; border-radius: 3px; box-shadow: 0 34px 0 0 #fff; transform: translateZ(-1px); }}@keyframes cover-rotate{ 0%{ transform: translate3d(-47%, -50%, 4em) rotateY(-56deg); } 10%{ transform: translate3d(-47%, -50%, 4em) rotateY(-56deg); } 100%{ transform: translate3d(-40%, -50%, 4em) rotateY(-135deg); }}.cover { font-family: 'Open Sans', sans-serif; width: 130px; height: 106px; background: #fff; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3); transform-origin: 0 50%; @include centerer; transform: translate3d(-47%, -50%, 4em) rotateY(-56deg); animation:cover-rotate 2s infinite alternate;}.letter-n { width: 15px; height: 40px; background: #7f3b7a; position: absolute; top: 33px; left: 42px; &:before, &:after { content: ""; display: block; position: absolute; background: #7f3b7a; } &:before { width: 10px; height: 49px; transform-origin: 0 0; transform: rotate(-49deg); top: 8px; left: 8px; } &:after { width: 14px; height: 40px; top: 0px; left: 45px; }}

在线演示        积分下载        6毛下载        砍两刀下载