Card by shadowfax29
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 background-color: #66D0FF; 5 padding: 20px; 6 border-radius: 8px; 7 transition: all .3s; 8 border: 3px solid #66D0FF; 9 box-shadow: 0 0 10px white; 10} 11 12.cloud { 13 width: 150px; 14 height: 70px; 15 background: #ECEFF1; 16 box-shadow: 10px 10px rgba(0,0,0,0.2); 17 border-radius: 70px; 18} 19 20.cloud::after, .cloud::before { 21 content: ""; 22 position: relative; 23 display: inline-block; 24 background: inherit; 25 border-radius: inherit; 26} 27 28.cloud::after { 29 width: 50px; 30 height: 50px; 31 top: -30px; 32 left: -55px; 33} 34 35.cloud::before { 36 width: 70px; 37 height: 70px; 38 top: -20px; 39 left: 60px; 40} 41 42.cloud { 43 animation: float 1.8s infinite alternate; 44} 45 46@keyframes float { 47 0% { 48 transform: translateY(15px); 49 } 50 51 100% { 52 transform: translateY(0); 53 } 54} 55 56.shadow { 57 width: 150px; 58 height: 24px; 59 background-color: rgba(0,0,0,0.2); 60 margin-top: 100px; 61 border-radius: 50%; 62 filter: blur(7px); 63 animation: sha 1.8s infinite alternate; 64} 65 66@keyframes sha { 67 0% { 68 transform: scale(1,1); 69 } 70 71 100% { 72 transform: scale(.85,.85); 73 } 74} 75 76.card:hover { 77 width: 200px; 78 height: 264px; 79 transform: scale(0.9); 80 padding: 20px; 81 border: 5px solid black; 82}
730 views
730 views
MIT License