<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5"> <title>HTML5流浪线条网页背景动画特效</title> <link rel="stylesheet" href="css/chinaz.css?3.1.64"> </head> <body>[removed][removed]
   
   
         
           
           
       
            
[removed][removed] [removed][removed] HTML5流浪线条网页背景动画特效是一款蓝色漂亮的动态波浪形线条流动动画效果。
1
代码片段: $('.Yl-container').YlSlide({ wrapper:'.Yl-wrapper', slideClass:'.Yl-slide', stylePrefix:'.Yl-', slideLength:3, pages:true, pagination:'.Yl-pagination', pagingSelect:'.Yl-pagination-bullet-active', autoplay:5000, imgTemplate:{ 0:['
'], 1:['
'], 2:['
'] },
1
代码片段: uniforms: {     uResolution: function uResolution(_ref2) {       var viewportWidth = _ref2.viewportWidth;       var viewportHeight = _ref2.viewportHeight;       return [viewportWidth, viewportHeight];     },     uTime: function uTime(_ref3) {       var tick = _ref3.tick;       return 0.01 * tick;     },     uMouse: function uMouse() {       return [pointer.position.x, pointer.position.y];     },     uMorph: function uMorph() {       return morphAmount;     },     uRandomSeed: DEV ? 138975.579831 : new Date().getTime() % 1000000, //     uGrid: function uGrid(_ref4) {       var viewportWidth = _ref4.viewportWidth;       var viewportHeight = _ref4.viewportHeight;       var ratio = 0.32;       return viewportHeight >= viewportWidth ? [1, viewportHeight / viewportWidth * ratio] : [viewportWidth / viewportHeight * ratio, 1];     }   },
2021-12-24 16:28:37 31KB js特效-H5 Canvas渐变背景效果
1
代码片段: * {   overflow: hidden;   margin: 0;   width: 100%;   height: 100%; } .c {   background: black; }
1