使用CSS3实现的浮云遮日动画

CSS3 Sunny & Cloudy day

css3, cloud

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2112
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-image: radial-gradient(#fcbe32 -50%, #a5dff9 25%);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
html,
body {
    margin: 0;
    padding: 0;
}
.sky {
    width: 100vw;
    height: 100vh;
    perspective: 1200px;
    transform-style: preserve-3d;
    position: relative;
}
.sun {
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 200px;
    transform-style: preserve-3d;
    animation: rotation 60s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
    border-radius: 50%;
    border: 1px solid orange;
}
.sun:before {
    content: '';
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 200px;
    display: block;
    transform: rotateY(90deg);
    border-radius: 50%;
    border: 1px solid orange;
}
.clouds {
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 80vw;
    z-index: -1;
    text-align: center;
    height: 100vh;
    max-height: 300px;
}
.cloud {
    background-color: white;
    position: absolute;
    display: inline-block;
    margin: 0 auto;
    transform: translateY(50%);
    animation: clouds linear infinite;
}
.cloud:nth-child(even) {
    animation-direction: alternate;
}
.cloud:nth-child(odd) {
    animation-direction: reverse;
}
.ray {
    width: 70px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: -35px;
    transform-style: preserve-3d;
}
.ray:before {
    content: "";
    display: block;
    width: 70px;
    height: 20px;
    border-radius: 10px;
    animation: rotation 60s infinite linear reverse;
}
.ray:nth-child(1) {
    transform: translate3d(101.13819px, 102.92761px, -99.95066px);
}
.ray:nth-child(1):before {
    background-color: rgba(253, 163, 48, 0.2);
}
.ray:nth-child(2) {
    transform: translate3d(95.36987px, 104.24127px, -99.80267px);
}
.ray:nth-child(2):before {
    background-color: rgba(243, 188, 26, 0.58);
}
.ray:nth-child(3) {
    transform: translate3d(91.56076px, 95.83551px, -99.5562px);
}
.ray:nth-child(3):before {
    background-color: rgba(247, 189, 56, 0.98);
}
.ray:nth-child(4) {
    transform: translate3d(101.09665px, 87.51475px, -99.21147px);
}
.ray:nth-child(4):before {
    background-color: rgba(244, 155, 42, 0.48);
}
.ray:nth-child(5) {
    transform: translate3d(115.02037px, 95.62898px, -98.76883px);
}
.ray:nth-child(5):before {
    background-color: rgba(242, 190, 77, 0.6);
}
.ray:nth-child(6) {
    transform: translate3d(111.39937px, 114.87185px, -98.22873px);
}
.ray:nth-child(6):before {
    background-color: rgba(239, 177, 35, 0.89);
}
.ray:nth-child(7) {
    transform: translate3d(88.67207px, 118.6425px, -97.59168px);
}
.ray:nth-child(7):before {
    background-color: rgba(240, 179, 33, 0.68);
}
.ray:nth-child(8) {
    transform: translate3d(75.51181px, 95.66467px, -96.85832px);
}
.ray:nth-child(8):before {
    background-color: rgba(250, 151, 58, 0.43);
}
.ray:nth-child(9) {
    transform: translate3d(94.57837px, 72.63275px, -96.02937px);
}
.ray:nth-child(9):before {
    background-color: rgba(242, 188, 61, 0.23);
}
.ray:nth-child(10) {
    transform: translate3d(126.07652px, 83.41898px, -95.10565px);
}
.ray:nth-child(10):before {
    background-color: rgba(241, 176, 68, 0.86);
}
.ray:nth-child(11) {
    transform: translate3d(127.29835px, 120.05578px, -94.08808px);
}
.ray:nth-child(11):before {
    background-color: rgba(239, 155, 70, 0.28);
}
.ray:nth-child(12) {
    transform: translate3d(90.43549px, 135.54823px, -92.97765px);
}
.ray:nth-child(12):before {
    background-color: rgba(238, 155, 33, 0.61);
}
.ray:nth-child(13) {
    transform: translate3d(60.51645px, 104.27941px, -91.77546px);
}
.ray:nth-child(13):before {
    background-color: rgba(246, 192, 62, 0.16);
}
.ray:nth-child(14) {
    transform: translate3d(80.38526px, 62.20923px, -90.48271px);
}
.ray:nth-child(14):before {
    background-color: rgba(250, 198, 42, 0.52);
}
.ray:nth-child(15) {
    transform: translate3d(129.97775px, 65.90589px, -89.10065px);
}
.ray:nth-child(15):before {
    background-color: rgba(241, 166, 51, 0.63);
}
.ray:nth-child(16) {
    transform: translate3d(145.24729px, 116.53932px, -87.63067px);
}
.ray:nth-child(16):before {
    background-color: rgba(243, 182, 61, 0.88);
}
.ray:nth-child(17) {
    transform: translate3d(101.03594px, 150.8936px, -86.0742px);
}
.ray:nth-child(17):before {
    background-color: rgba(248, 158, 73, 0.15);
}
.ray:nth-child(18) {
    transform: translate3d(50.46433px, 120.42842px, -84.43279px);
}
.ray:nth-child(18):before {
    background-color: rgba(246, 151, 56, 0.74);
}
.ray:nth-child(19) {
    transform: translate3d(61.19771px, 59.33356px, -82.70806px);
}
.ray:nth-child(19):before {
    background-color: rgba(248, 192, 55, 0.46);
}
.ray:nth-child(20) {
    transform: translate3d(124.93262px, 46.77144px, -80.9017px);
}
.ray:nth-child(20):before {
    background-color: rgba(242, 154, 54, 0.57);
}
.ray:nth-child(21) {
    transform: translate3d(161.15213px, 104.11923px, -79.0155px);
}
.ray:nth-child(21):before {
    background-color: rgba(240, 173, 37, 0.42);
}
.ray:nth-child(22) {
    transform: translate3d(119.05247px, 160.82842px, -77.05132px);
}
.ray:nth-child(22):before {
    background-color: rgba(245, 194, 73, 0.07);
}
.ray:nth-child(23) {
    transform: translate3d(48.34341px, 141.2908px, -75.01111px);
}
.ray:nth-child(23):before {
    background-color: rgba(245, 158, 36, 0.93);
}
.ray:nth-child(24) {
    transform: translate3d(40.78737px, 65.65016px, -72.89686px);
}
.ray:nth-child(24):before {
    background-color: rgba(249, 183, 44, 0.2);
}
.ray:nth-child(25) {
    transform: translate3d(110.90722px, 30.13561px, -70.71068px);
}
.ray:nth-child(25):before {
    background-color: rgba(245, 198, 59, 0.73);
}
.ray:nth-child(26) {
    transform: translate3d(171.20407px, 84.38166px, -68.45471px);
}
.ray:nth-child(26):before {
    background-color: rgba(245, 159, 73, 0.06);
}
.ray:nth-child(27) {
    transform: translate3d(141.52877px, 162.46621px, -66.13119px);
}
.ray:nth-child(27):before {
    background-color: rgba(249, 190, 49, 0.96);
}
.ray:nth-child(28) {
    transform: translate3d(55.65307px, 163.00997px, -63.7424px);
}
.ray:nth-child(28):before {
    background-color: rgba(240, 166, 43, 0.76);
}
.ray:nth-child(29) {
    transform: translate3d(23.29607px, 81.02746px, -61.29071px);
}
.ray:nth-child(29):before {
    background-color: rgba(253, 165, 71, 0.87);
}
.ray:nth-child(30) {
    transform: translate3d(89.64752px, 19.76341px, -58.77853px);
}
.ray:nth-child(30):before {
    background-color: rgba(245, 184, 23, 0.73);
}
.ray:nth-child(31) {
    transform: translate3d(172.61834px, 60.41213px, -56.20834px);
}
.ray:nth-child(31):before {
    background-color: rgba(245, 176, 53, 0.35);
}
.ray:nth-child(32) {
    transform: translate3d(164.52943px, 154.45043px, -53.58268px);
}
.ray:nth-child(32):before {
    background-color: rgba(240, 156, 66, 0.48);
}
.ray:nth-child(33) {
    transform: translate3d(72.10078px, 181.42728px, -50.90414px);
}
.ray:nth-child(33):before {
    background-color: rgba(249, 190, 27, 0.07);
}
.ray:nth-child(34) {
    transform: translate3d(12.44192px, 103.56598px, -48.17537px);
}
.ray:nth-child(34):before {
    background-color: rgba(245, 166, 37, 0.19);
}
.ray:nth-child(35) {
    transform: translate3d(64.36105px, 18.33733px, -45.39905px);
}
.ray:nth-child(35):before {
    background-color: rgba(250, 161, 51, 0.65);
}
.ray:nth-child(36) {
    transform: translate3d(164.17903px, 36.21778px, -42.57793px);
}
.ray:nth-child(36):before {
    background-color: rgba(241, 178, 76, 0.94);
}
.ray:nth-child(37) {
    transform: translate3d(183.8849px, 137.22981px, -39.71479px);
}
.ray:nth-child(37):before {
    background-color: rgba(251, 190, 58, 0.65);
}
.ray:nth-child(38) {
    transform: translate3d(95.64034px, 192.87538px, -36.81246px);
}
.ray:nth-child(38):before {
    background-color: rgba(240, 189, 24, 0.69);
}
.ray:nth-child(39) {
    transform: translate3d(10.80407px, 129.94414px, -33.87379px);
}
.ray:nth-child(39):before {
    background-color: rgba(246, 182, 71, 0.99);
}
.ray:nth-child(40) {
    transform: translate3d(39.11866px, 26.93464px, -30.9017px);
}
.ray:nth-child(40):before {
    background-color: rgba(254, 191, 38, 0.62);
}
.ray:nth-child(41) {
    transform: translate3d(146.4861px, 15.97213px, -27.89911px);
}
.ray:nth-child(41):before {
    background-color: rgba(251, 156, 54, 0.32);
}
.ray:nth-child(42) {
    transform: translate3d(195.98331px, 112.98988px, -24.86899px);
}
.ray:nth-child(42):before {
    background-color: rgba(247, 192, 37, 0.26);
}
.ray:nth-child(43) {
    transform: translate3d(122.84489px, 194.88017px, -21.81432px);
}
.ray:nth-child(43):before {
    background-color: rgba(247, 172, 20, 0.32);
}
.ray:nth-child(44) {
    transform: translate3d(19.32278px, 156.03631px, -18.73813px);
}
.ray:nth-child(44):before {
    background-color: rgba(242, 194, 24, 0.57);
}
.ray:nth-child(45) {
    transform: translate3d(18.09003px, 44.80906px, -15.64345px);
}
.ray:nth-child(45):before {
    background-color: rgba(239, 150, 24, 0.04);
}
.ray:nth-child(46) {
    transform: translate3d(121.85692px, 3.22608px, -12.53332px);
}
.ray:nth-child(46):before {
    background-color: rgba(250, 184, 72, 0.94);
}
.ray:nth-child(47) {
    transform: translate3d(198.45802px, 85.25366px, -9.41083px);
}
.ray:nth-child(47):before {
    background-color: rgba(254, 179, 53, 0.31);
}
.ray:nth-child(48) {
    transform: translate3d(149.54354px, 186.63724px, -6.27905px);
}
.ray:nth-child(48):before {
    background-color: rgba(255, 177, 26, 0.4);
}
.ray:nth-child(49) {
    transform: translate3d(37.11008px, 177.68521px, -3.14108px);
}
.ray:nth-child(49):before {
    background-color: rgba(244, 193, 46, 0.31);
}
.ray:nth-child(50) {
    transform: translate3d(4.7587px, 69.51894px, 0px);
}
.ray:nth-child(50):before {
    background-color: rgba(249, 186, 23, 0.21);
}
.ray:nth-child(51) {
    transform: translate3d(93.90113px, 0.23559px, 3.14108px);
}
.ray:nth-child(51):before {
    background-color: rgba(255, 170, 33, 0.56);
}
.ray:nth-child(52) {
    transform: translate3d(190.63996px, 58.22715px, 6.27905px);
}
.ray:nth-child(52):before {
    background-color: rgba(250, 163, 70, 0.84);
}
.ray:nth-child(53) {
    transform: translate3d(171.60076px, 169.17201px, 9.41083px);
}
.ray:nth-child(53):before {
    background-color: rgba(248, 166, 77, 0.15);
}
.ray:nth-child(54) {
    transform: translate3d(61.60747px, 191.48185px, 12.53332px);
}
.ray:nth-child(54):before {
    background-color: rgba(244, 197, 30, 0.16);
}
.ray:nth-child(55) {
    transform: translate3d(1.26599px, 97.37757px, 15.64345px);
}
.ray:nth-child(55):before {
    background-color: rgba(250, 184, 78, 0.23);
}
.ray:nth-child(56) {
    transform: translate3d(66.84945px, 7.53421px, 18.73813px);
}
.ray:nth-child(56):before {
    background-color: rgba(245, 181, 39, 0.88);
}
.ray:nth-child(57) {
    transform: translate3d(173.68836px, 36.01437px, 21.81432px);
}
.ray:nth-child(57):before {
    background-color: rgba(241, 151, 69, 0.77);
}
.ray:nth-child(58) {
    transform: translate3d(185.68986px, 145.15287px, 24.86899px);
}
.ray:nth-child(58):before {
    background-color: rgba(240, 171, 32, 0.82);
}
.ray:nth-child(59) {
    transform: translate3d(89.06058px, 195.40424px, 27.89911px);
}
.ray:nth-child(59):before {
    background-color: rgba(242, 165, 31, 0.21);
}
.ray:nth-child(60) {
    transform: translate3d(8.009px, 124.14004px, 30.9017px);
}
.ray:nth-child(60):before {
    background-color: rgba(252, 153, 62, 0.4);
}
.ray:nth-child(61) {
    transform: translate3d(44.76427px, 23.83189px, 33.87379px);
}
.ray:nth-child(61):before {
    background-color: rgba(253, 199, 42, 0.87);
}
.ray:nth-child(62) {
    transform: translate3d(150.37493px, 21.85136px, 36.81246px);
}
.ray:nth-child(62):before {
    background-color: rgba(239, 195, 26, 0.52);
}
.ray:nth-child(63) {
    transform: translate3d(189.91353px, 118.39271px, 39.71479px);
}
.ray:nth-child(63):before {
    background-color: rgba(248, 194, 24, 0.13);
}
.ray:nth-child(64) {
    transform: translate3d(115.22068px, 189.19333px, 42.57793px);
}
.ray:nth-child(64):before {
    background-color: rgba(254, 178, 65, 0.67);
}
.ray:nth-child(65) {
    transform: translate3d(23.56918px, 145.79582px, 45.39905px);
}
.ray:nth-child(65):before {
    background-color: rgba(240, 149, 56, 0.81);
}
.ray:nth-child(66) {
    transform: translate3d(30.78232px, 46.25945px, 48.17537px);
}
.ray:nth-child(66):before {
    background-color: rgba(244, 172, 24, 0.99);
}
.ray:nth-child(67) {
    transform: translate3d(124.56257px, 17.50486px, 50.90414px);
}
.ray:nth-child(67):before {
    background-color: rgba(247, 156, 48, 0.95);
}
.ray:nth-child(68) {
    transform: translate3d(184.15316px, 93.134px, 53.58268px);
}
.ray:nth-child(68):before {
    background-color: rgba(249, 151, 65, 0.79);
}
.ray:nth-child(69) {
    transform: translate3d(136.13931px, 174.39471px, 56.20834px);
}
.ray:nth-child(69):before {
    background-color: rgba(240, 151, 30, 0.81);
}
.ray:nth-child(70) {
    transform: translate3d(44.98494px, 159.31634px, 58.77853px);
}
.ray:nth-child(70):before {
    background-color: rgba(245, 186, 27, 0.77);
}
.ray:nth-child(71) {
    transform: translate3d(26.53346px, 70.91192px, 61.29071px);
}
.ray:nth-child(71):before {
    background-color: rgba(246, 180, 20, 0.56);
}
.ray:nth-child(72) {
    transform: translate3d(100.47787px, 22.95016px, 63.7424px);
}
.ray:nth-child(72):before {
    background-color: rgba(241, 179, 68, 0.71);
}
.ray:nth-child(73) {
    transform: translate3d(170.08051px, 73.25327px, 66.13119px);
}
.ray:nth-child(73):before {
    background-color: rgba(254, 188, 65, 0.47);
}
.ray:nth-child(74) {
    transform: translate3d(148.90482px, 154.05804px, 68.45471px);
}
.ray:nth-child(74):before {
    background-color: rgba(254, 180, 21, 0.46);
}
.ray:nth-child(75) {
    transform: translate3d(68.31641px, 163.21511px, 70.71068px);
}
.ray:nth-child(75):before {
    background-color: rgba(247, 180, 55, 0.53);
}
.ray:nth-child(76) {
    transform: translate3d(31.8463px, 93.58747px, 72.89686px);
}
.ray:nth-child(76):before {
    background-color: rgba(239, 159, 42, 0.92);
}
.ray:nth-child(77) {
    transform: translate3d(81.91609px, 36.38942px, 75.01111px);
}
.ray:nth-child(77):before {
    background-color: rgba(244, 168, 47, 0.53);
}
.ray:nth-child(78) {
    transform: translate3d(150.82982px, 61.53673px, 77.05132px);
}
.ray:nth-child(78):before {
    background-color: rgba(238, 183, 68, 0.1);
}
.ray:nth-child(79) {
    transform: translate3d(152.18057px, 132.15181px, 79.0155px);
}
.ray:nth-child(79):before {
    background-color: rgba(255, 182, 68, 0.99);
}
.ray:nth-child(80) {
    transform: translate3d(89.39456px, 157.81384px, 80.9017px);
}
.ray:nth-child(80):before {
    background-color: rgba(240, 175, 24, 0.12);
}
.ray:nth-child(81) {
    transform: translate3d(44.79652px, 110.58079px, 82.70806px);
}
.ray:nth-child(81):before {
    background-color: rgba(241, 196, 62, 0.45);
}
.ray:nth-child(82) {
    transform: translate3d(71.52997px, 54.6066px, 84.43279px);
}
.ray:nth-child(82):before {
    background-color: rgba(253, 177, 26, 0.19);
}
.ray:nth-child(83) {
    transform: translate3d(130.39284px, 59.16488px, 86.0742px);
}
.ray:nth-child(83):before {
    background-color: rgba(244, 186, 78, 0.13);
}
.ray:nth-child(84) {
    transform: translate3d(146.44239px, 112.80508px, 87.63067px);
}
.ray:nth-child(84):before {
    background-color: rgba(241, 194, 28, 0.17);
}
.ray:nth-child(85) {
    transform: translate3d(104.61189px, 145.16419px, 89.10065px);
}
.ray:nth-child(85):before {
    background-color: rgba(248, 160, 47, 0.77);
}
.ray:nth-child(86) {
    transform: translate3d(62.08831px, 119.37999px, 90.48271px);
}
.ray:nth-child(86):before {
    background-color: rgba(239, 166, 46, 0.58);
}
.ray:nth-child(87) {
    transform: translate3d(70.33792px, 73.59119px, 91.77546px);
}
.ray:nth-child(87):before {
    background-color: rgba(245, 151, 61, 0.29);
}
.ray:nth-child(88) {
    transform: translate3d(112.85246px, 65.50404px, 92.97765px);
}
.ray:nth-child(88):before {
    background-color: rgba(255, 154, 31, 0.68);
}
.ray:nth-child(89) {
    transform: translate3d(133.8704px, 99.52069px, 94.08808px);
}
.ray:nth-child(89):before {
    background-color: rgba(244, 154, 72, 0.17);
}
.ray:nth-child(90) {
    transform: translate3d(111.60388px, 128.64027px, 95.10565px);
}
.ray:nth-child(90):before {
    background-color: rgba(253, 191, 67, 0.86);
}
.ray:nth-child(91) {
    transform: translate3d(79.69608px, 119.13403px, 96.02937px);
}
.ray:nth-child(91):before {
    background-color: rgba(255, 167, 38, 0.77);
}
.ray:nth-child(92) {
    transform: translate3d(77.54504px, 89.31163px, 96.85832px);
}
.ray:nth-child(92):before {
    background-color: rgba(243, 183, 76, 0.95);
}
.ray:nth-child(93) {
    transform: translate3d(101.60106px, 78.24451px, 97.59168px);
}
.ray:nth-child(93):before {
    background-color: rgba(245, 180, 78, 0.28);
}
.ray:nth-child(94) {
    transform: translate3d(117.91591px, 94.51022px, 98.22873px);
}
.ray:nth-child(94):before {
    background-color: rgba(239, 161, 67, 0.62);
}
.ray:nth-child(95) {
    transform: translate3d(109.69144px, 112.2798px, 98.76883px);
}
.ray:nth-child(95):before {
    background-color: rgba(238, 177, 67, 0.76);
}
.ray:nth-child(96) {
    transform: translate3d(93.6438px, 110.80198px, 99.21147px);
}
.ray:nth-child(96):before {
    background-color: rgba(246, 169, 57, 0.21);
}
.ray:nth-child(97) {
    transform: translate3d(90.71098px, 98.49073px, 99.5562px);
}
.ray:nth-child(97):before {
    background-color: rgba(248, 189, 59, 0.73);
}
.ray:nth-child(98) {
    transform: translate3d(98.69276px, 93.85853px, 99.80267px);
}
.ray:nth-child(98):before {
    background-color: rgba(243, 154, 44, 0.65);
}
.ray:nth-child(99) {
    transform: translate3d(102.6265px, 98.27725px, 99.95066px);
}
.ray:nth-child(99):before {
    background-color: rgba(253, 184, 46, 0.83);
}
.ray:nth-child(100) {
    transform: translate3d(100px, 100px, 100px);
}
.ray:nth-child(100):before {
    background-color: rgba(238, 196, 43, 0.04);
}
@keyframes rotation {
    to {
        transform: rotateY(360deg);
    }
}
.cloud:nth-child(1) {
    width: 228px;
    height: 36px;
    border-radius: 36px;
    top: 23%;
    left: 74%;
    animation-duration: 59s;
    opacity: 0.62;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(2) {
    width: 195px;
    height: 30px;
    border-radius: 30px;
    top: 17%;
    left: 6%;
    animation-duration: 42s;
    opacity: 0.52;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(3) {
    width: 214px;
    height: 42px;
    border-radius: 42px;
    top: 56%;
    left: 57%;
    animation-duration: 43s;
    opacity: 0.66;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(4) {
    width: 252px;
    height: 13px;
    border-radius: 13px;
    top: 25%;
    left: 63%;
    animation-duration: 40s;
    opacity: 0.54;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(5) {
    width: 224px;
    height: 10px;
    border-radius: 10px;
    top: 100%;
    left: 77%;
    animation-duration: 23s;
    opacity: 0.45;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(6) {
    width: 232px;
    height: 17px;
    border-radius: 17px;
    top: 93%;
    left: 18%;
    animation-duration: 42s;
    opacity: 0.51;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(7) {
    width: 248px;
    height: 37px;
    border-radius: 37px;
    top: 43%;
    left: 74%;
    animation-duration: 47s;
    opacity: 0.4;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(8) {
    width: 152px;
    height: 50px;
    border-radius: 50px;
    top: 81%;
    left: 53%;
    animation-duration: 35s;
    opacity: 0.42;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(9) {
    width: 194px;
    height: 20px;
    border-radius: 20px;
    top: 47%;
    left: 61%;
    animation-duration: 20s;
    opacity: 0.45;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(10) {
    width: 180px;
    height: 52px;
    border-radius: 52px;
    top: 10%;
    left: 13%;
    animation-duration: 58s;
    opacity: 0.64;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(11) {
    width: 165px;
    height: 44px;
    border-radius: 44px;
    top: 48%;
    left: 21%;
    animation-duration: 22s;
    opacity: 0.47;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(12) {
    width: 189px;
    height: 45px;
    border-radius: 45px;
    top: 48%;
    left: 49%;
    animation-duration: 48s;
    opacity: 0.47;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(13) {
    width: 240px;
    height: 40px;
    border-radius: 40px;
    top: 94%;
    left: 70%;
    animation-duration: 47s;
    opacity: 0.69;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(14) {
    width: 194px;
    height: 39px;
    border-radius: 39px;
    top: 51%;
    left: 45%;
    animation-duration: 54s;
    opacity: 0.51;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(15) {
    width: 211px;
    height: 51px;
    border-radius: 51px;
    top: 32%;
    left: 26%;
    animation-duration: 38s;
    opacity: 0.74;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(16) {
    width: 217px;
    height: 7px;
    border-radius: 7px;
    top: 29%;
    left: 28%;
    animation-duration: 53s;
    opacity: 0.64;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(17) {
    width: 244px;
    height: 59px;
    border-radius: 59px;
    top: 68%;
    left: 36%;
    animation-duration: 45s;
    opacity: 0.63;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(18) {
    width: 178px;
    height: 32px;
    border-radius: 32px;
    top: 79%;
    left: 32%;
    animation-duration: 37s;
    opacity: 0.53;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(19) {
    width: 211px;
    height: 19px;
    border-radius: 19px;
    top: 25%;
    left: 25%;
    animation-duration: 20s;
    opacity: 0.62;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}
.cloud:nth-child(20) {
    width: 183px;
    height: 25px;
    border-radius: 25px;
    top: 7%;
    left: 15%;
    animation-duration: 20s;
    opacity: 0.46;
}
@keyframes clouds {
    0%, 100% {
        margin-left: 0;
    }
    50% {
        opacity: 0;
        margin-left: 200px;
    }
}

HTML

CSS3 Sunny & Cloudy day

css3, cloud

编辑器支持Emmet

快捷键

CSS3 Sunny & Cloudy day

css3, cloud

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

使用纯CSS3实现的云雾动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：