div+css实现百叶窗中水滴下落落下动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现百叶窗中一个大的水滴慢慢下落落下的动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; color: #fff; min-height: 100vh; display: grid; place-items: center; } .drop { position: relative; width: 420px; height: 420px; background-color: #def; } .line { position: absolute; width: 100%; height: 2px; background-color: #111; } .line:nth-child(1) { top: 4px; --delay: 0s; } .line:nth-child(2) { top: 14px; --delay: 0.156s; } .line:nth-child(3) { top: 24px; --delay: 0.312s; } .line:nth-child(4) { top: 34px; --delay: 0.468s; } .line:nth-child(5) { top: 44px; --delay: 0.624s; } .line:nth-child(6) { top: 54px; --delay: 0.78s; } .line:nth-child(7) { top: 64px; --delay: 0.936s; } .line:nth-child(8) { top: 74px; --delay: 1.092s; } .line:nth-child(9) { top: 84px; --delay: 1.248s; } .line:nth-child(10) { top: 94px; --delay: 1.404s; } .line:nth-child(11) { top: 104px; --delay: 1.56s; } .line:nth-child(12) { top: 114px; --delay: 1.716s; } .line:nth-child(13) { top: 124px; --delay: 1.872s; } .line:nth-child(14) { top: 134px; --delay: 2.028s; } .line:nth-child(15) { top: 144px; --delay: 2.184s; } .line:nth-child(16) { top: 154px; --delay: 2.34s; } .line:nth-child(17) { top: 164px; --delay: 2.496s; } .line:nth-child(18) { top: 174px; --delay: 2.652s; } .line:nth-child(19) { top: 184px; --delay: 2.808s; } .line:nth-child(20) { top: 194px; --delay: 2.964s; } .line:nth-child(21) { top: 204px; --delay: 3.12s; } .line:nth-child(22) { top: 214px; --delay: 3.276s; } .line:nth-child(23) { top: 224px; --delay: 3.432s; } .line:nth-child(24) { top: 234px; --delay: 3.588s; } .line:nth-child(25) { top: 244px; --delay: 3.744s; } .line:nth-child(26) { top: 254px; --delay: 3.9s; } .line:nth-child(27) { top: 264px; --delay: 4.056s; } .line:nth-child(28) { top: 274px; --delay: 4.212s; } .line:nth-child(29) { top: 284px; --delay: 4.368s; } .line:nth-child(30) { top: 294px; --delay: 4.524s; } .line:nth-child(31) { top: 304px; --delay: 4.68s; } .line:nth-child(32) { top: 314px; --delay: 4.836s; } .line:nth-child(33) { top: 324px; --delay: 4.992s; } .line:nth-child(34) { top: 334px; --delay: 5.148s; } .line:nth-child(35) { top: 344px; --delay: 5.304s; } .line:nth-child(36) { top: 354px; --delay: 5.46s; } .line:nth-child(37) { top: 364px; --delay: 5.616s; } .line:nth-child(38) { top: 374px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0