scene简单的动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Scene.js example circle burst css animation</title> <style> html, body { position: relative; height: 100%; margin: 0; padding: 0; } body { background: skyblue; overflow: hidden; } .scene6 { position: relative; width: 100%; height: 100%; overflow: hidden; } .sun { width: 200px; height: 200px; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; position: absolute; border-radius: 50%; box-sizing: border-box; } #sun { /* background: #FFE26C; */ border-color: #FFE26C; border-style: solid; border-width: 75px; } #sun2 { border: 75px solid #fff; } .sun_afterimage { width: 60px; height: 2px; background: #FFE26C; top: 50%; left: 50%; position: absolute; transform-origin: 0% 1px; transform: translate(120px, 0px); } #moonbackground { background: #96ABC0; top: 50%; left: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; position: absolute; border-radius: 50%; } #text { top: 50%; left: 50%; width: 100px; height: 100px; font-size: 100px; margin-left: -50px; margin-top: -50px; position: absolute; color: white; text-align: center; line-height: 100px; font-family: sans-serif; } .circles { z-index: 100; } .circle { width: 150px; height: 150px; top: 50%; left: 50%; margin-top: -75px; margin-left: -75px; position: absolute; border-radius: 50%; box-sizing: border-box; border: 75px solid transparent; } .svg_circle { top: 50%; left: 50%; width: 300px; height: 300px; font-size: 100px; margin-left: -150px; margin-top: -150px; position: absolute; } .svg_circle circle { stroke-width: 5; stroke-linejoin: round; stroke-dasharray: 0 1000; stroke-dashoffset: 1; stroke: #ff8c3a; } .svg_circle circle#rotate_circle2 { stroke-width: 2; stroke: #3AA1BF; } .svg_circle circle#rotate_circle3 { stroke-width: 1; stroke: white; } #stick { position: absolute;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0