TweenMax光影例子发散动画效果
代码语言:html
所属分类:粒子
代码描述:TweenMax光影例子发散动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ padding: 0; margin:0; } html { height: 100%; display: grid; } #space { background-color: black; position: relative; width: 100%; height: 100%; display: grid; place-items: center center; overflow: hidden; --perspective: 100px; -webkit-perspective: var(--perspective); perspective: var(--perspective); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #space:after { display: block; content: ''; grid-area: 1 / 1; width: 100%; height: 100%; background-image: linear-gradient(45deg, blue, transparent, yellow), linear-gradient(to right, #008aff, transparent, #e10019), linear-gradient(to bottom, green, cyan, purple); mix-blend-mode: overlay; } #space time { grid-area: 1 / 1; width: 100px; height: 100px; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; will-change: transform; background-color: white; box-shadow: 0 0 .5rem white, 0 0 1rem white; } @supports (-moz-transition: all) { #space time { box-shadow: 0 0 .5rem white; } } </style> </head> <body translate="no"> <div id="space"></div> <script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0