-
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; } }
纯css实现动画效果
最新推荐文章于 2024-06-26 18:16:27 发布