css3小飞镖 |电子书 css 制作工具

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 40px solid #f00;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
animation: rotate 1s linear infinite;
}
.arrow::before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #fff;
position: absolute;
top: -20px;
left: 0;
}
.arrow::after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #fff;
position: absolute;
bottom: -20px;
left: 0;
}
@keyframes rotate {
from {
transform: translateY(-50%) translateX(-50%) rotate(0deg);
}
to {
transform: translateY(-50%) translateX(-50%) rotate(360deg);
}
}

首先，大家需要定义一个类名为arrow的元素，它是一个空心的三角形，具体的实现方法是将上下两个三角形各自使用不同的边框颜色画出来，并且使用了定位和transform属性使其居中显示。

接着，在arrow的伪元素before和after中，大家定义了两个实心的三角形，它们的颜色是白色的，大小比arrow要小一些，并且分别位于三角形的顶部和底部。

最后，大家使用了CSS3的动画功能，定义了一个名为rotate的关键帧动画，它使得arrow元素在1秒钟内按照顺时针方向不断旋转，并且将其设为无限循环播放。