使用CSS+JS实现鼠标移入移出走马灯效果

1.知识点 CSS线性background: repeating-linear-gradient 用于创建重复的线性渐变 "图像"

CSS 语法

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

Value	描述
angle	定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner	指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,...	指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。

实现原理父子div

父div比子div宽度要小，子div通过线性渐变画出走马灯样式，走马灯跑动效果，通过js控制子div位移实现。

代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             body{
12                 height: 100%;
13                 width: 100%;
14                 height: 100%;
15             }
16             .wrap{
17                 
18                 width: 400px;
19                 height: 40px;
20                 margin: 0 auto;
21                 margin-top: 40px;
22                 border: 1px solid black;
23                 overflow: hidden;
24             }
25             .wrap>.inner{
26                 background: repeating-linear-gradient(60deg,white 0px,white 10px,black 10px,black 20px);
27                 height: 40px;
28                 width: 600px;
29             }
30             
31         </style>
32     </head>
33     <body>
34         <div class="wrap">
35             <div class="inner"></div>
36         </div>
37     </body>
38     <script type="text/javascript">
39         var inner=document.querySelector(".wrap>.inner");
40         var flag=0;
41         //鼠标移入
42         var timer;
43         inner.onmouseover=function(){
44             timer=window.setInterval(function(){
45             flag--;
46             if(flag==-200){
47                 flag=0;
48             }
49             inner.style.marginLeft=flag+"px";
50             },5)
51         }
52         //鼠标移出 clearInterval 控制 setInterVal
53         inner.onmouseout=function(){
54              clearInterval(timer);
55         }
56         
57     </script>
58 </html>

使用CSS+JS实现鼠标移入移出走马灯效果

CSS 语法

猜你喜欢