TweenMax实现svg变形动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现svg变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #fff; margin: 0; padding: 0; overflow: hidden; } video { position: absolute; z-index: 1; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); } svg { position: absolute; z-index: 2; width: 100vw; height: 100vh; mix-blend-mode: multiply; } #path1, #path2 { mix-blend-mode: multiply; } #path2 { opacity: 0.7; } linearGradient stop { transition: all 0.4s ease-in-out; } .section1 #fill1 .stop1 { stop-color: #f23b3e; } .section1 #fill1 .stop2 { stop-color: #6d3a83; } .section1 #fill2 .stop1 { stop-color: #ee3a9e; } .section1 #fill2 .stop2 { stop-color: #2f7ebf; } .section2 #fill1 .stop1 { stop-color: #713a80; } .section2 #fill1 .stop2 { stop-color: #cc3b58; } .section2 #fill2 .stop1 { stop-color: #b13496; } .section2 #fill2 .stop2 { stop-color: #4a4587; } .section3 #fill1 .stop1 { stop-color: #f33b47; } .section3 #fill1 .stop2 { stop-color: #bb3b60; } .section3 #fill2 .stop1 { stop-color: #2c94c6; } .section3 #fill2 .stop2 { stop-color: #39449c; } /* Button */ button.btn { color: #f.........完整代码请登录后点击上方下载按钮下载查看
网友评论0