如何做出如图发廊灯的效果：
首先先用css画出如图的效果图，可以用css3渐变效果做出黑白相间的效果。
在这里，为了做后面发廊灯旋转效果，所以设置了一个wrap包裹一个innner，inner的高度是比wrap要高很多的，不过设置了overflow:hidden,看不出来inner比wrap要高。
之后是做旋转效果，可以用css做，让鼠标停留在wrap上时，inner高度向上。如图：
但是这种效果只能旋转一次，最好还是用js实现旋转效果：
最后完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
html,body{
height: 100%;
overflow: hidden;
}
.wrap{
width: 40px;
height: 300px;
border: 1px solid;
margin: 0 auto;
overflow: hidden;
transition: 3s;
}
.wrap>.inner{
width: 40px;
height: 600px;
background-image: repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
}
.wrap:hover .inner{
margin-top: -300px;
}
</style>
<body>
<div class="wrap">
<div class="inner">
</div>
</div>
<script>
var inner = document.querySelector('.wrap>.inner');
var flag = 0;
setInterval(function(){
flag++;
if(flag == 300){
flag =0;
}
inner.style.marginTop = -flag+'px';
},30)
</script>
</body>
</html>
网友评论