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