纯css实现动画效果

最新推荐文章于 2024-06-26 18:16:27 发布

车银优

最新推荐文章于 2024-06-26 18:16:27 发布

阅读量263

点赞数

文章标签： vue.js css

本文链接：https://blog.csdn.net/qq_43557395/article/details/125489400

版权

css边框动画
在这里插入图片描述

<div class="textBox">
	哈哈哈哈
	<div class="solidBox"></div>
</div>
.textBox{
	height:50px;
	position:relative;
}
.solidBox{
	 width: 100%;
     height: 100%;
     position:absolute;
     right:0;
     top:0;
     background: 
         linear-gradient(90deg, #186Cff 50%, transparent 0) repeat-x,
         linear-gradient(90deg, #186Cff 50%, transparent 0) repeat-x,
         linear-gradient(0deg, #186Cff 50%, transparent 0) repeat-y,
         linear-gradient(0deg, #186Cff 50%, transparent 0) repeat-y;
     background-size: 4px 2px, 4px 2px, 2px 4px, 2px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
     cursor: pointer;
     animation: move .3s infinite linear;
}
@keyframes move {
       100% {
           background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
       }
   }