css3动画animation，transition
生活随笔
收集整理的這篇文章主要介紹了
css3动画animation，transition
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
animation demo1
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>animation動畫</title><style>#div1 {width: 100px;height: 100px;background-color: pink;position: absolute;top: 10%;left: 25%;}/* 延遲1秒 動畫過程3秒 infinite死循環播放 linear線性平滑播放 */.myDiv1 {animation: div1Change 3s 1s both infinite linear;}/* 動畫規則 */@keyframes div1Change{0% { background-color: palegreen;width: 120px;height: 120px;}50% { background-color: darkkhaki;width: 160px;height: 160px;}100% { background-color: lightcyan;width: 220px;height: 220px;}}</style></head><body><div id="div1" οnclick="this.className='myDiv1'"></div></body> </html>transition demo1
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>transition demo</title><style>#div1 {background-color:honeydew;width: 200px;height: 200px;left: 30%;position: relative;/* 觸發動畫效果 懸浮在div上后 div變大顏色變化 然后變回來 */transition: background-color 5s 1s,width 1s 1s,height 1s 1s;}#div1:hover {background-color:coral;width: 500px;height: 500px;}</style></head><body><div id="div1"></div></body> </html>總結
以上是生活随笔為你收集整理的css3动画animation，transition的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小米无线网卡linux,NanoPi N
- 下一篇： linux kvm安装win7,ubun