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剪下元素動畫執行個體