div+css实现三维场景小人荡秋千动画效果代码
代码语言:html
所属分类:三维
代码描述:div+css实现三维场景小人荡秋千动画效果代码,纯css及div代码,无js代码实现。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/custom/3dman.css"> </head> <body> <div class="scene"> <div class="cube" id="ground"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="bench _face"> <div class="cube" id="bench-seat-front"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-seat-center"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-seat-back"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="bench-back _face"> <div class="cube" id="bench-back-top"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-back-bottom"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-back-left"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-back-right"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> <div class="cube" id="bench-seat-left"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-seat-right"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-leg-lf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-leg-rf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-leg-lb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bench-leg-rb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> </div> <div class="plant _face"> <div class="cylinder" id="plant-pot"> <div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> </div> <div class="cube" id="plant-trunk"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="pyramid" id="plant-bush-lower"> <div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> </div> <div class="pyramid" id="plant-bush-upper"> <div class="container"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> </div> </div> <div class="bins _face"> <div class="bin" id="bin-1"> <div class="cube" id="bin-1-main"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-1-lf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-1-rf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-1-lb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-1-rb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div><i class="material-icons">compost</i> </div> <div class="bin" id="bin-2"> <div class="cube" id="bin-2-main"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-2-lf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-2-rf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-2-lb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-2-rb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div><i class="material-icons">recycling</i> </div> <div class="bin" id="bin-3"> <div class="cube" id="bin-3-main"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-3-lf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-3-rf"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-3-lb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back"></div> </div> </div> <div class="cube" id="bin-3-rb"> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="top"></div> <div class="bottom"></div> <div class="front"></div> <div class="back&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0