首页 > 代码库 > CSS Clip剪切元素动画实例
CSS Clip剪切元素动画实例
1.CSS
.fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; left: 100px; top: 100px;} .fixed:before { position: absolute; width: 100px; height: 100px; margin: -5px; content: ‘‘; box-shadow: inset 0px 0px 0px 2px blue; animation: animateOne linear 4s infinite; } .fixed:after { position: absolute; width: 100px; height: 100px; margin: -5px; content: ‘‘; box-shadow: inset 0px 0px 0px 2px blue; animation: animateOne linear 4s infinite; animation-delay: -2s; /*此处设置负值，提前进入指定状态*/ }@keyframes animateOne { 0%,100% { clip: rect(0px,100px,5px,0px); } 25% { clip: rect(0px,5px,100px,0px); } 50% { clip: rect(95px,100px,100px,0px); } 75% { clip: rect(0px,100px,100px,95px); }}
注：
animation-delay 单独使用时注意两点：
1.需要放在animation属性后面
2.可以设置负数，调整动画开始的状态
显示结果：
更多：
CSS Clip剪切元素实例
CSS Clip属性
CSS Clip剪切元素动画实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。