timeline+scene可视化css动画关键帧编辑效果代码
代码语言:html
所属分类:其他
代码描述:timeline+scene可视化css动画关键帧编辑效果代码
代码标签: timeline scene 可视化 css 动画 关键帧 编辑
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/scene.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/scene_effects.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/timeline.pkgd.min.js"></script> <style> .clapper { top: -100px; } .scenejs-editor-timeline { position: absolute; left: 10px; right: 10px; bottom: 10px; width: auto; } /* clapper */ .clapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; z-index: 2; transform-origin: 20% 60%; will-change: transform; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .clapper .clapper-container { position: absolute; margin: auto; width: 200px; height: 170px; left: -200px; right: -200px; top: -200px; bottom: -200px; } .clapper .clapper-container .clapper-body { position: relative; width: 100%; height: 100%; } .clapper .stick { position: absolute; box-sizing: border-box; width: 200px; height: 32px; font-size: 0; overflow: hidden; white-space: nowrap; padding: 5px 8px; text-align: center; background: #333; } .clapper .stick1 { transform-origin: 0% 100%; border-radius: 5px 5px 0px 0px; } .clapper .stick2 { top: 30px; } .clapper .rect { position: relative; display: inline-block; height: 100%; width: 20px; background: white; vertical-align: top; margin: 0px 5px 0px; border-radius: 5px; } .clapper .stick1 .rect { transform: skew(15deg); } .clapper .stick2 .rect { transform: skew(-15deg); } .clapper .top { position: absolute; top: 0; border-radius: 5px 5px 0px 0px; width: 100%; height: 37%; } .clapper .bottom { position: absolute; bottom: 0; width: 100%; height: 64%; background: #333; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .clapper .circle { position: absolute; left: 0; right: 0; bottom: 10%; margin: auto; width: 70px; height: 70px; background: white; border-radius: 50%; } .clapper .play { position: absolute; left: 50%; margin-left: 3px; bottom: 7%; transform: translate(-50%, -50%); width: 32px; font-size: 14px; /* overflow: hidden; */ } .clapper .play svg { -webkit-backface-visibility: hidden; outline: 1px solid transparent; } </style> </head> <body> <div data-timeline> <div id="timeline"> <div class="example_result"> <div class="container".........完整代码请登录后点击上方下载按钮下载查看
网友评论0