css3 晃动引导箭头

CSS3 晃动引导箭头

在网页设计中，引导箭头是非常常见的元素。它能够指引用户的目光，引导用户完成某些操作。我们通常会使用图片作为引导箭头，但是这样会增加页面的加载时间。那么，在 CSS3 中有一种更加简单而且好看的方法来实现晃动引导箭头。

.arrow {
    position: relative;
    height: 50px;
    width: 35px;
    margin: 0 10px;
}
.arrow:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #333;
    left: 0;
}
.arrow:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #fff;
    left: 2px;
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
    -webkit-animation: shake 1s infinite linear;
    animation: shake 1s infinite linear;
}
@-webkit-keyframes shake {
0% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}
50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
100% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}
}
@keyframes shake {
0% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}
50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
}
100% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
}
}
    

在上面的代码中，我们创建了一个箭头容器，并使用前后伪元素来创建箭头。前伪元素用来显示箭头的外部轮廓，后伪元素用来显示箭头的内部轮廓。我们在后伪元素上使用了 shake 动画，达到了箭头晃动的效果。在动画中，我们使用了 transform 属性和关键帧，创建了晃动效果。

通过上面的代码，我们就可以轻松创建一个好看的 CSS3 晃动引导箭头。不仅减少了页面的加载时间，而且还能够为设计增添更多的灵活性和美观度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！