#212121
1.container { 2 width: 250px; 3 height: 250px; 4 padding: 15px; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8} 9 10.cloud { 11 width: 250px; 12} 13 14.front { 15 padding-top: 45px; 16 margin-left: 25px; 17 display: inline; 18 position: absolute; 19 z-index: 11; 20 animation: clouds 8s infinite; 21 animation-timing-function: ease-in-out; 22} 23 24.back { 25 margin-top: -30px; 26 margin-left: 150px; 27 z-index: 12; 28 animation: clouds 12s infinite; 29 animation-timing-function: ease-in-out; 30} 31 32.right-front { 33 width: 45px; 34 height: 45px; 35 border-radius: 50% 50% 50% 0%; 36 background-color: #4c9beb; 37 display: inline-block; 38 margin-left: -25px; 39 z-index: 5; 40} 41 42.left-front { 43 width: 65px; 44 height: 65px; 45 border-radius: 50% 50% 0% 50%; 46 background-color: #4c9beb; 47 display: inline-block; 48 z-index: 5; 49} 50 51.right-back { 52 width: 50px; 53 height: 50px; 54 border-radius: 50% 50% 50% 0%; 55 background-color: #4c9beb; 56 display: inline-block; 57 margin-left: -20px; 58 z-index: 5; 59} 60 61.left-back { 62 width: 30px; 63 height: 30px; 64 border-radius: 50% 50% 0% 50%; 65 background-color: #4c9beb; 66 display: inline-block; 67 z-index: 5; 68} 69 70.sun { 71 width: 120px; 72 height: 120px; 73 background: -webkit-linear-gradient(to right, #fcbb04, #fffc00); 74 background: linear-gradient(to right, #fcbb04, #fffc00); 75 border-radius: 60px; 76 display: inline; 77 position: absolute; 78} 79 80.sunshine { 81 animation: sunshines 2s infinite; 82} 83 84@keyframes sunshines { 85 0% { 86 transform: scale(1); 87 opacity: 0.6; 88 } 89 90 100% { 91 transform: scale(1.4); 92 opacity: 0; 93 } 94} 95 96@keyframes clouds { 97 0% { 98 transform: translateX(15px); 99 } 100 101 50% { 102 transform: translateX(0px); 103 } 104 105 100% { 106 transform: translateX(15px); 107 } 108} 109
11K views
11K views
Comments
MIT License