div+css实现逼真大瀑布飞流直下动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现逼真大瀑布飞流直下动画效果代码,采用css的animation模仿水流流动。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * Realistic CSS3 Waterfall */ body { background: #111; display: flex; flex-direction: column; align-items: center; } /* Container with the static waterfall background image */ .waterfall { position: relative; width: 960px; height: 801px; background-size: contain; background-image: url("//repo.bfw.wiki/bfwrepo/image/64bded342caec.png"); } .waterfall > div { position: absolute; } /* The waterfall loop Key ingredients: - Vertically seamless bitmap - Background repeat Y - Infinite animation which shifts background position vertically */ .waterfall-loop { /* offset x of the mask */ left: 367px; /* offset y of the mask */ top: 87px; /* width of the mask */ width: 221px; /* height of the mask */ height: 620px; background: url("//repo.bfw.wiki/bfwrepo/images/waterfall/waterfall-loop.png") 0 0 repeat-y; -moz-animation: waterfallloop 5s infinite linear; -webkit-animation: waterfalllo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0