iTunes Logo CSS

HTML
<div class='icon'> <div class='note'></div> </div>
SCSS
$w: #fdfdfd; $p: #ff5d50; $pu: #8856ff; $b: #2ec8f7; body{ display:flex; width:100vw; height:100vh; background:#333; align-items:center; justify-content:center; .icon{ width:37vmin; height:37vmin; border-radius:500%; background:linear-gradient(to bottom, $w, darken($w, 15%)); position:relative; box-shadow:0 15vmin 10vmin -5vmin rgba(0,0,0,0.15); &:after{ content:''; position:absolute; width:110%; height:110%; background:radial-gradient(circle at center, $p, transparent 50%), linear-gradient(155deg, $pu, $b 80%); background-position:-27vmin -40vmin, center; background-size:200% 200%, 100%; border-radius:100%; left:-5%; top:-5%; z-index:-1; animation:pulsing 1s linear infinite; @keyframes pulsing{ 0%{ transform:scale(1); } 5%{ transform:scale(1.025); } 10%{ transform:scale(1); } 60%{ transform:scale(1); } 64%{ transform:scale(1.05); } 68%{ transform:scale(1); } } } .note{ position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%) skewY(-7.5deg) skewX(-5deg) scale(0.9) scaleX(0.9) rotate(-5deg); margin-left:1.5vmin; width:17.5vmin; height:18vmin; background:radial-gradient(circle at center, $p, transparent 50%), linear-gradient(to right, $pu, $b 80%); background-position:-41vmin -19.5vmin, center; border-radius:1vmin 1vmin 0 0; background-size:500% 200%, 100%; margin-top:-3.5vmin; &:after{ content:''; position:absolute; width:8.5vmin; height:7vmin; background:linear-gradient(to bottom, $p -220%, $pu); border-radius:4vmin 0vmin 4vmin 4vmin; bottom:-6.95vmin; left:-6.25vmin; box-shadow:15.25vmin 0 0 $b; } &:before{ content:''; position:absolute; width:13vmin; height:12vmin; left:50%; transform:translateX(-50%); bottom:0; background:linear-gradient(to bottom, darken($w, 5%), darken($w, 10%)); border-radius:1vmin 1vmin 1vmin 0; } } } }
JAVASCRIPT
Expand for more options Login