CSS3夏日云雨天气

summer rain

css3, rain

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FDD09F;
}
#container {
    position: absolute;
    width: 450px;
    height: 450px;
    background: #42729B;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 500px;
    overflow: hidden;
    transform: scale(0.8);
    margin-top: -9px;
}
.cloud {
    margin-left: -50px;
    z-index: 1;
    filter: drop-shadow(0 0 50px black);
    position: absolute;
}
.cloud#two {
    transform: scale(0.5);
    margin-top: 50px;
    margin-left: -50px;
    filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.6));
}
.cloud#three {
    transform: scale(0.3);
    margin-top: 55px;
    margin-left: 50px;
    filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.4));
}
#bottom {
    background: #9e9e9e;
    width: 200px;
    height: 100px;
    border-radius: 100px;
}
#bottom:after {
    content: '';
    display: block;
    background: #9e9e9e;
    width: 200px;
    height: 120px;
    margin-left: 100px;
    margin-top: -20px;
    border-radius: 100px;
    position: absolute;
}
#top {
    background: #9e9e9e;
    width: 100px;
    height: 100px;
    position: absolute;
    margin-top: -150px;
    margin-left: 50px;
    border-radius: 100px;
}
#top:after {
    content: '';
    display: block;
    position: absolute;
    background: #9e9e9e;
    width: 140px;
    height: 140px;
    border-radius: 100px;
    margin-left: 60px;
    margin-top: -30px;
}
.drop {
    width: 10px;
    height: 10px;
    position: absolute;
    background: #1DABB8;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    border-top-left-radius: 100px;
    transform: rotate(-45deg);
    margin-top: 40px;
    animation-name: drop;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
.drop:nth-child(1) {
    margin-left: 77.39833px;
    animation-duration: 1.74512s;
    animation-delay: 0.10066s;
}
.drop:nth-child(2) {
    margin-left: 31.78897px;
    animation-duration: 1.44583s;
    animation-delay: 1.707s;
}
.drop:nth-child(3) {
    margin-left: 60.28042px;
    animation-duration: 1.01789s;
    animation-delay: 0.6752s;
}
.drop:nth-child(4) {
    margin-left: -77.04146px;
    animation-duration: 1.63933s;
    animation-delay: 1.94605s;
}
.drop:nth-child(5) {
    margin-left: -85.53656px;
    animation-duration: 1.65337s;
    animation-delay: 1.42919s;
}
.drop:nth-child(6) {
    margin-left: -35.6373px;
    animation-duration: 1.99389s;
    animation-delay: 1.51585s;
}
.drop:nth-child(7) {
    margin-left: 44.21054px;
    animation-duration: 1.4484s;
    animation-delay: 1.84333s;
}
.drop:nth-child(8) {
    margin-left: 97.71991px;
    animation-duration: 1.57372s;
    animation-delay: 1.44163s;
}
.drop:nth-child(9) {
    margin-left: 70.43796px;
    animation-duration: 1.38582s;
    animation-delay: 1.20605s;
}
.drop:nth-child(10) {
    margin-left: -34.28418px;
    animation-duration: 1.41655s;
    animation-delay: 0.73187s;
}
.drop:nth-child(11) {
    margin-left: -85.99549px;
    animation-duration: 1.93607s;
    animation-delay: 0.09685s;
}
.drop:nth-child(12) {
    margin-left: 28.48986px;
    animation-duration: 1.18313s;
    animation-delay: 0.82779s;
}
.drop:nth-child(13) {
    margin-left: 96.03713px;
    animation-duration: 1.99613s;
    animation-delay: 0.77302s;
}
.drop:nth-child(14) {
    margin-left: -23.581px;
    animation-duration: 1.21106s;
    animation-delay: 0.6798s;
}
.drop:nth-child(15) {
    margin-left: -19.9501px;
    animation-duration: 1.35595s;
    animation-delay: 1.1461s;
}
.drop:nth-child(16) {
    margin-left: -7.63415px;
    animation-duration: 1.04329s;
    animation-delay: 1.71506s;
}
.drop:nth-child(17) {
    margin-left: -2.62071px;
    animation-duration: 1.0205s;
    animation-delay: 1.25143s;
}
.drop:nth-child(18) {
    margin-left: -8.04151px;
    animation-duration: 1.14347s;
    animation-delay: 0.75756s;
}
.drop:nth-child(19) {
    margin-left: -55.0225px;
    animation-duration: 1.81049s;
    animation-delay: 1.39098s;
}
.drop:nth-child(20) {
    margin-left: 50.27132px;
    animation-duration: 1.00754s;
    animation-delay: 0.37823s;
}
.drop:nth-child(21) {
    margin-left: 77.81487px;
    animation-duration: 1.91389s;
    animation-delay: 0.09235s;
}
.drop:nth-child(22) {
    margin-left: 26.86238px;
    animation-duration: 1.93054s;
    animation-delay: 0.65408s;
}
.drop:nth-child(23) {
    margin-left: 98.24271px;
    animation-duration: 1.78212s;
    animation-delay: 0.63302s;
}
.drop:nth-child(24) {
    margin-left: 88.34081px;
    animation-duration: 1.58808s;
    animation-delay: 0.60004s;
}
.drop:nth-child(25) {
    margin-left: 99.42082px;
    animation-duration: 1.89008s;
    animation-delay: 1.98915s;
}
.drop:nth-child(26) {
    margin-left: 24.24257px;
    animation-duration: 1.10235s;
    animation-delay: 1.89679s;
}
.drop:nth-child(27) {
    margin-left: -93.33716px;
    animation-duration: 1.61503s;
    animation-delay: 1.90995s;
}
.drop:nth-child(28) {
    margin-left: 46.01368px;
    animation-duration: 1.71648s;
    animation-delay: 0.31271s;
}
.drop:nth-child(29) {
    margin-left: -32.23326px;
    animation-duration: 1.82566s;
    animation-delay: 0.21977s;
}
.drop:nth-child(30) {
    margin-left: -11.76769px;
    animation-duration: 1.19051s;
    animation-delay: 0.09295s;
}
.drop:nth-child(31) {
    margin-left: 0.95334px;
    animation-duration: 1.50763s;
    animation-delay: 1.54899s;
}
.drop:nth-child(32) {
    margin-left: 52.58187px;
    animation-duration: 1.62817s;
    animation-delay: 0.39497s;
}
.drop:nth-child(33) {
    margin-left: -39.14336px;
    animation-duration: 1.17293s;
    animation-delay: 0.89347s;
}
.drop:nth-child(34) {
    margin-left: 89.93703px;
    animation-duration: 1.40067s;
    animation-delay: 0.8309s;
}
.drop:nth-child(35) {
    margin-left: 88.4201px;
    animation-duration: 1.57359s;
    animation-delay: 0.75807s;
}
.drop:nth-child(36) {
    margin-left: -35.7655px;
    animation-duration: 1.89919s;
    animation-delay: 0.1361s;
}
.drop:nth-child(37) {
    margin-left: 68.00142px;
    animation-duration: 1.13672s;
    animation-delay: 0.53745s;
}
.drop:nth-child(38) {
    margin-left: 76.8926px;
    animation-duration: 1.24551s;
    animation-delay: 0.62097s;
}
.drop:nth-child(39) {
    margin-left: -30.24165px;
    animation-duration: 1.23622s;
    animation-delay: 1.22007s;
}
.drop:nth-child(40) {
    margin-left: -98.55132px;
    animation-duration: 1.09326s;
    animation-delay: 1.29236s;
}
.drop:nth-child(41) {
    margin-left: 82.26244px;
    animation-duration: 1.61905s;
    animation-delay: 0.24729s;
}
.drop:nth-child(42) {
    margin-left: 11.48576px;
    animation-duration: 1.80014s;
    animation-delay: 1.34155s;
}
.drop:nth-child(43) {
    margin-left: 40.85606px;
    animation-duration: 1.01201s;
    animation-delay: 1.01509s;
}
.drop:nth-child(44) {
    margin-left: 94.2071px;
    animation-duration: 1.16441s;
    animation-delay: 1.88894s;
}
.drop:nth-child(45) {
    margin-left: 75.68573px;
    animation-duration: 1.73217s;
    animation-delay: 1.92181s;
}
.drop:nth-child(46) {
    margin-left: -55.14428px;
    animation-duration: 1.0317s;
    animation-delay: 0.44018s;
}
.drop:nth-child(47) {
    margin-left: -0.09602px;
    animation-duration: 1.79242s;
    animation-delay: 0.40609s;
}
.drop:nth-child(48) {
    margin-left: -36.27565px;
    animation-duration: 1.23926s;
    animation-delay: 1.00947s;
}
.drop:nth-child(49) {
    margin-left: 98.99574px;
    animation-duration: 1.64911s;
    animation-delay: 1.92358s;
}
.drop:nth-child(50) {
    margin-left: -43.27431px;
    animation-duration: 1.12652s;
    animation-delay: 1.21322s;
}
.drop:nth-child(51) {
    margin-left: 63.65097px;
    animation-duration: 1.10163s;
    animation-delay: 1.2662s;
}
.drop:nth-child(52) {
    margin-left: 11.78171px;
    animation-duration: 1.00829s;
    animation-delay: 0.98307s;
}
.drop:nth-child(53) {
    margin-left: 19.7411px;
    animation-duration: 1.73934s;
    animation-delay: 0.20448s;
}
.drop:nth-child(54) {
    margin-left: -4.97117px;
    animation-duration: 1.82101s;
    animation-delay: 1.51495s;
}
.drop:nth-child(55) {
    margin-left: -64.7096px;
    animation-duration: 1.87381s;
    animation-delay: 0.8446s;
}
.drop:nth-child(56) {
    margin-left: 13.00039px;
    animation-duration: 1.17425s;
    animation-delay: 1.00064s;
}
.drop:nth-child(57) {
    margin-left: 58.03104px;
    animation-duration: 1.603s;
    animation-delay: 0.78653s;
}
.drop:nth-child(58) {
    margin-left: 82.15938px;
    animation-duration: 1.12625s;
    animation-delay: 1.95288s;
}
.drop:nth-child(59) {
    margin-left: 75.01276px;
    animation-duration: 1.43524s;
    animation-delay: 1.32897s;
}
.drop:nth-child(60) {
    margin-left: 91.03789px;
    animation-duration: 1.19641s;
    animation-delay: 1.76441s;
}
.drop:nth-child(61) {
    margin-left: -29.6946px;
    animation-duration: 1.21762s;
    animation-delay: 1.36518s;
}
@keyframes drop {
    to {
        transform: translateY(400px);
    }
}

HTML

summer rain

css3, rain

编辑器支持Emmet

快捷键

summer rain

css3, rain

CSS3+SVG 美丽的夏天日落景色动画

CSS3 带3D卡片翻转动画的天气预报

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：