Card by Javierrocadev
#212121
1.container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 justify-content: center; 6 font-size: 5em; 7 font-weight: 900; 8 color: #e10600; 9 position: relative; 10 transition: all 1s ease; 11 text-align: center; 12} 13 14.container__star { 15 transition: all .7s ease-in-out; 16} 17 18.first { 19 position: absolute; 20 top: 20px; 21 left: 50px; 22 transition: all .7s ease-in-out; 23} 24 25.svg-icon { 26 position: absolute; 27 fill: #e94822; 28 z-index: 1; 29} 30 31.star-eight { 32 background: #efd510; 33 width: 150px; 34 height: 150px; 35 position: relative; 36 text-align: center; 37 animation: rot 3s infinite; 38} 39 40.star-eight::before { 41 content: ''; 42 position: absolute; 43 top: 0; 44 left: 0; 45 height: 150px; 46 width: 150px; 47 background: #efd510; 48 transform: rotate(135deg); 49} 50 51.container:hover .container__star { 52 transform: rotateX(70deg) translateY(250px); 53 box-shadow: 0px 0px 120px -100px #e4e727; 54} 55 56.container:hover .svg-icon { 57 animation: grow 1s linear infinite; 58} 59 60@keyframes rot { 61 0% { 62 transform: rotate(0deg); 63 } 64 65 50% { 66 transform: rotate(340deg); 67 } 68 69 100% { 70 transform: rotate(0deg); 71 } 72} 73 74@keyframes grow { 75 0% { 76 transform: rotate(0deg); 77 } 78 79 25% { 80 transform: rotate(-5deg); 81 } 82 83 75% { 84 transform: rotate(5deg); 85 } 86 87 100% { 88 transform: scale(1) rotate(0deg); 89 } 90}
761 views
761 views
MIT License