首页 > 代码库 > 旋转条形特效(发廊特效)
旋转条形特效(发廊特效)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
margin:0;
padding:0;
}
html,body,ul{
width: 100%;
height: 100%;
background: skyblue;
position: relative;
}
ul{
display: flex;
justify-content: flex-start;
}
/*控制li标签*/
ul>li:nth-child(1){
/*background: red;*/
width: 300px;
height: 40px;
left:500px;
top:300px;
background: white;
overflow: hidden;
position: relative;
}
/*控制div*/
ul>li:nth-child(1) div{
width: 30px;
height: 60px;
background: black;
position: absolute;
transform: skewX(-45deg);
left: 360px;
/*transform-origin: center top;*/
}
/*第四部分*/
ul>li:nth-child(1) div:nth-child(1){
/*left:360px;*/
animation: move 4.8s 0s linear infinite;
}
ul>li:nth-child(1) div:nth-child(2){
/*left: 120px;*/
animation: move 4.8s 0.8s linear infinite;
}
ul>li:nth-child(1) div:nth-child(3){
/*left: 180px;*/
animation: move 4.8s 1.6s linear infinite;
}
ul>li:nth-child(1) div:nth-child(4){
/*left: 240px;*/
animation: move 4.8s 2.4s linear infinite;
}
ul>li:nth-child(1) div:nth-child(5){
/*left: 300px;*/
animation: move 4.8s 3.2s linear infinite;
}
ul>li:nth-child(1) div:nth-child(6){
/*left: 360px;*/
animation: move 4.8s 4.0s linear infinite;
}
@keyframes move{
from{}to{
left: -100px;
}
}
</style>
<body>
<ul>
<li>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</li>
</ul>
</body>
</html>
旋转条形特效(发廊特效)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。