CSS实线边框loading动画实例页面

用户头像
潍坊/网页设计师/8年前/337浏览
CSS实线边框loading动画实例页面

CSS实线边框loading动画实例页面

CSS代码:
.box {
    display: inline-block;    padding: 10px;    position: relative;}.box::before {
    content: '';    position: absolute;    left: 0; top: 0; right: 0; bottom: 0;    border: 2px solid #cd0000;    animation: borderAround 1.5s infinite linear;    
}@keyframes borderAround {
    0%, 100% { clip: rect(0 148px 2px 0); }
    25% { clip: rect(0 148px 116px 146px); }
    50% { clip: rect(114px 148px 116px 0); }
    75% { clip: rect(0 2px 116px 0); }}

HTML代码:
<div class="box"><img src="mm1.jpg" width="128" height="96"></div>


0
举报
|
收藏
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
一个人拿着优惠券准备支付购物电商矢量插画
卡通风格网页页面3D渲染
男生和女生站在网页面前矢量扁平插画
男生坐在网页面前办公矢量插画
卡通女孩与网页表格3D渲染
户外旅行飞机情侣假日出行
商务网页
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
女生坐在网页面前办公矢量插画
网页设计——纸杯蛋糕
网页页面矢量插画
三个青年站在网页周边矢量插画
一个人拿着优惠券准备支付购物电商矢量插画
新年快乐送福网页矢量图banner
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
卡通风格网页页面3D渲染
网页背景
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
网页图标
卡通风格网页页面3D渲染
卡通风格网页页面3D渲染
 网页背景
四个人物分别在上网贴纸合集
三位美女围着网页看信息矢量插画
三位美女围着网页看信息矢量插画
你可能喜欢
大家都在看
登录注册