:
使用css代码为一个元素绘制”运动着的边框”的方法分享,如下所示:
下午将通过示例的方式讲述其方法,如下所示:
实现思路: 1.为元素设置"边框线"背景 2.设置动画,通过改变元素背景位置, 使其产生动画效果
例:
css 为元素设置“运动的边框”的示例分析
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.maomao365.rrrw/" /> <title>猫猫小屋</title> <style> body { background-color: rgb(229, 201, 255); } .father { width: 280px; height: 180px; background-color: #fff; padding: 1px; background-image: -webkit-linear-gradient(-45deg,rgba(0, 0, 0, 1) 25%,rgba(0, 0, 0, 0) 25%,rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 1) 50%,rgba(0, 0, 0, 1) 75%,rgba(0, 0, 0, 0) 75%,rgba(0, 0, 0, 0)); background-size: 10px 10px; animation: dongHua 0.8s linear; animation-iteration-count: infinite; } .child { width: 280px; height: 180px; background-color: rgba(255,255,255,1); } @keyframes dongHua { 0% { background-position: 0px 0px; } 80% { background-position: 0px 5px; } 100% { background-position: 0px 10px; } } </style> </head> <body> <div class="father"> <div class="child"> maomao365.rrrw 运动边框示例 </div> </div> </body> </html>