#212121
1.button { 2 width: 50px; 3 height: 50px; 4 position: relative; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 background-color: rgb(44, 44, 44); 9 border-radius: 50%; 10 cursor: pointer; 11 transition-duration: .3s; 12 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13); 13 border: none; 14} 15 16.bell { 17 width: 18px; 18} 19 20.bell path { 21 fill: white; 22} 23 24.button:hover { 25 background-color: rgb(56, 56, 56); 26} 27 28.button:hover .bell { 29 animation: bellRing 0.9s both; 30} 31 32/* bell ringing animation keyframes*/ 33@keyframes bellRing { 34 0%, 35 100% { 36 transform-origin: top; 37 } 38 39 15% { 40 transform: rotateZ(10deg); 41 } 42 43 30% { 44 transform: rotateZ(-10deg); 45 } 46 47 45% { 48 transform: rotateZ(5deg); 49 } 50 51 60% { 52 transform: rotateZ(-5deg); 53 } 54 55 75% { 56 transform: rotateZ(2deg); 57 } 58} 59 60.button:active { 61 transform: scale(0.8); 62} 63
4.6K views
4.6K views
Comments
MIT License