Card by Javierrocadev
#e8e8e8
1.card { 2 width: 290px; 3 height: 350px; 4 background: linear-gradient(135deg, rgba(48,48,48,1) 48%, rgba(0,0,0,1) 100%); 5 background-size: 300%,300%; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 position: relative; 10 border-radius: 15px; 11 box-shadow: 5px 5px 15px 5px #000000; 12 overflow: hidden; 13 transition: all 1s ease; 14} 15 16.moon { 17 width: 70px; 18 height: 70px; 19 top: 15%; 20 right: 120px; 21 position: absolute; 22 fill: white; 23 transform: rotate(-20deg); 24 transition: all 1s ease; 25} 26 27.rocket { 28 width: 70px; 29 height: 70px; 30 bottom: -2%; 31 left: -2%; 32 position: absolute; 33 fill: white; 34 transition: all 1.9s ease; 35} 36 37.star { 38 position: absolute; 39 background: radial-gradient(circle, rgba(251,239,63,1) 0%, rgba(255,253,212,1) 100%); 40 clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); 41} 42 43.star-1 { 44 width: 100px; 45 height: 100px; 46 bottom: 90px; 47 left: -15px; 48 transition: all 1s ease; 49} 50 51.star-2 { 52 width: 150px; 53 height: 150px; 54 top: -10%; 55 left: -10%; 56 transition: all .5s ease; 57} 58 59.star-3 { 60 width: 100px; 61 height: 100px; 62 bottom: 5%; 63 right: -15px; 64 transition: all .3s ease; 65} 66 67.star-4 { 68 width: 20px; 69 height: 20px; 70 top: 4%; 71 right: 5px; 72 transition: all 1.4s ease; 73} 74 75.star-5 { 76 width: 20px; 77 height: 20px; 78 bottom: 24%; 79 right: 45%; 80 animation: rotate 3s normal linear infinite; 81} 82 83.star-6 { 84 width: 20px; 85 height: 20px; 86 top: 14%; 87 right: 25%; 88 animation: rotate 5s normal linear infinite; 89} 90 91.star-7 { 92 width: 40px; 93 height: 40px; 94 top: 34%; 95 right: 65%; 96 animation: rotate 5s normal linear infinite; 97} 98 99.card-info span { 100 font-size: 1.2em; 101 color: white; 102 font-weight: 600; 103 text-transform: uppercase; 104 transition: all 1s ease; 105} 106 107.card:hover { 108 background: rgb(48,48,48); 109 background: linear-gradient(135deg, rgba(48,48,48,1) 10%, rgba(0,0,0,1) 90%); 110 background-size: 100%,100%; 111} 112 113.card:hover .star-1, 114.card:hover .star-3 { 115 background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%); 116 transform: scale(1.2) rotate(10deg); 117} 118 119.card:hover .star-2, 120.card:hover .star-4, 121.card:hover .star-5 { 122 background: linear-gradient(90deg, rgba(255,241,0,1) 0%, rgba(246,249,93,1) 77%, rgba(238,255,0,1) 100%); 123 transform: scale(1.2) rotate(-150deg); 124} 125 126.card:hover .rocket { 127 transform: scale(.3) translate(450px,-730px) rotate(-260deg); 128} 129 130.card:hover .moon { 131 width: 50px; 132 height: 50px; 133} 134 135.card:hover span { 136 font-size: 1.5em; 137} 138 139@keyframes rotate { 140 0% { 141 -webkit-transform: rotate3d(0, 0, 1, 0deg); 142 transform: rotate3d(0, 0, 1, 0deg); 143 } 144 145 25% { 146 -webkit-transform: rotate3d(0, 0, 1, 90deg); 147 transform: rotate3d(0, 0, 1, 90deg); 148 } 149 150 50% { 151 -webkit-transform: rotate3d(0, 0, 1, 180deg); 152 transform: rotate3d(0, 0, 1, 180deg); 153 } 154 155 75% { 156 -webkit-transform: rotate3d(0, 0, 1, 270deg); 157 transform: rotate3d(0, 0, 1, 270deg); 158 } 159 160 100% { 161 -webkit-transform: rotate3d(0, 0, 1, 360deg); 162 transform: rotate3d(0, 0, 1, 360deg); 163 } 164}
786 views
786 views
MIT License