首页 > 代码库 > CSS Clip剪切元素实例
CSS Clip剪切元素实例
一、实例1：
.fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blue; left:100px; top:100px;} .fixed img { position: absolute; animation: face 4s ease infinite alternate; -webkit-animation: face 4s ease infinite alternate; clip: rect(0px,129px,100px,0px); }@keyframes face { from { clip: rect(0px,129px,100px,0px); } to{ clip: rect(0px,382px,100px,258px); }}
二、实例2：
.fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blue; left:100px; top:100px;} .fixed img { position: absolute; }.face1 { clip: rect(0px,129px,100px,0px);}.face2 { clip: rect(0px,258px,100px,129px);}.face3 { clip: rect(0px,382px,100px,258px);}
<div class="fixed"> <img class="face3" src="../Img/clip-rect-10.png" /> </div> <script> var number = 0; var img = document.getElementsByTagName(‘img‘)[0]; setInterval(function () { number++; if (number == 4) number = 1; img.className = ‘face‘ + number; }, 1000); </script>
三、实例3：
.fixed { position: fixed; width: 100px; height: 100px; background: red; border: 0px solid blue; left: 100px; top: 100px; animation:animateOne linear 4s infinite;}@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); }}
四、实例4：
.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; box-shadow:inset 0px 0px 2px 2px blue; content:‘‘; animation: animateOne linear 4s infinite; } @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); } }
Clip属性简介：http://www.cnblogs.com/tianma3798/p/5862126.html
CSS Clip剪切元素实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。