拿来即用
- 项目需要，自己写了一款流动箭头的效果
看图 看图 看图
- 支持修改整体长度，线条长宽，三角箭头的宽高，流动快慢，颜色等等
- 代码里面已经写好注释
重点来了
可直接复制所有代码到html文件里面，测试效果，再移植到你自己的项目！
（这个小组件是在vue里面做的并且封装好了，考虑到其他项目不一定是vue，所以将代码提取出来，放在一个html文件里面，如果有用到的可以自己进行二次封装！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流动箭头</title>
</head>
<style>
/* 整个流动箭头的body */
.arrow-body {
position: relative;
margin: 0;
padding: 0;
/* 这里修改整个流动箭头的长度 */
width: 500px;
/* 这里修改body的高度，注意：会影响三角箭头的形状 */
height: 24px;
overflow: hidden;
}
/* 三角箭头 */
.arrow-body::after {
content:"";
position:absolute;
/* 这里要和下面一起修改 */
right: -12px;
top: 0;
width: 0;
height: 0;
/* 这里修改箭头的高度，这里建议是上面的24px的一半，同时要修改right：-12px的值 */
border: 12px solid transparent;
/* 这里可以修改箭头的横向长度，以及颜色 */
border-left-width: 20px;
border-left-color: skyblue;
}
/* 流动的线条的body */
.flow-body {
position: relative;
margin: 0;
padding: 0;
height: 100%;
width: calc(100% - 10px);
overflow: hidden;
}
/* 线条样式 */
.flow-body::before {
content:"";
position: absolute;
width: 200%;
/* 这里修改线条的高度，同时top减去的值是高度的一半（为了保持垂直居中） */
height: 6px;
top: calc(50% - 3px);
/* 这里修改线条的颜色（可以达到渐变） */
background: repeating-linear-gradient(90deg,skyblue 0,skyblue 15px,rgba(0,0,0,0) 15px,rgba(0,0,0,0) 20px);
transform: translateX(-100%);
animation: flow linear 8s infinite;
}
/* 流动动画 */
@keyframes flow {
from {
transform:translateX(-50%);
}
to {
transform:translateX(0);
}
}
</style>
<body>
<div class="flow-arrow">
<div class="arrow-body">
<div class="flow-body"></div>
</div>
</div>
</body>
</html>
2270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
