css 蚂蚁行军边框效果
接下来我们要实现这样的效果:
HTML代码:
<div class="ants-border"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laudantium, debitis vel quam tempora ut nisi voluptatibus rem ab. Quas, cum. Itaque, dignissimos! Quos, eos placeat eveniet quasi amet eius officiis! </div>
CSS代码:
.ants-border{ width: 500px; padding: 1em; border: 1px solid transparent; background-image: linear-gradient(white, white), repeating-linear-gradient( -45deg, #000 0%, #000 25%, #fff 0%, #fff 50% ); background-size: 10px 10px; background-clip: padding-box, border-box; animation: ants 10s linear infinite; } @keyframes ants { to { background-position: 100%; } }
绘制步骤:
1、给div加一层黑白色条纹背景。
.ants-border{ width: 500px; background-image: repeating-linear-gradient(-45deg, #000 0%, #000 25%, #fff 0%, #fff 50%); background-size: 10px 10px; /*控制条纹的宽度*/ /*默认背景图像会repeat铺满全屏*/ }
2、再加一层白色背景。当一个元素设置多个background-image
时,如果位置重叠,则写在前面的背景会覆盖写在后面的背景。此时背景为白色。
.ants-border{ ... background-image: linear-gradient(white, white),repeating-linear-gradient(-45deg, #000 0%, #000 25%, #fff 0%, #fff 50%); background-size: 10px 10px; }
3、背景有一个属性background-clip
,初始值是border-box
,意味着背景会铺满border-box。
为了让条纹背景露出来形成蚂蚁边框,我们将两层背景的background-clip
分别设为padding-box
和border-box
。
.ants-border{ ... background-image: linear-gradient(white, white),repeating-linear-gradient(-45deg, #000 0%, #000 25%, #fff 0%, #fff 50%); background-size: 10px 10px; background-clip: padding-box, border-box; }
此时白色背景铺满padding-box
,条纹背景铺满border-box
,此时依然时白色背景,因为没有设置border时,这两个box的范围是重叠的。所以设置一个1px的border,颜色为透明色。
.ants-border{ ... border: 1px solid transparent; }
4、通过动画不断改变背景的位置,形成移动的“蚂蚁”
@keyframes ants { to { background-position: 100%; } }
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css 蚂蚁行军边框效果
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » css 蚂蚁行军边框效果