CSS学习17之动画
生活随笔
收集整理的這篇文章主要介紹了
CSS学习17之动画
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
回顧
z-index 屬性z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
Z-index 可用于將在一個元素放置于另一元素之后。
動畫
動畫使元素逐漸從一種樣式變為另一種樣式。
可以隨意更改任意數量的 CSS 屬性。
如需使用 CSS 動畫，必須首先為動畫指定一些關鍵幀。
關鍵幀包含元素在特定時間所擁有的樣式。
@keyframes 規則
如果在 @keyframes 規則中指定了 CSS 樣式，動畫將在特定時間逐漸從當前樣式更改為新樣式。
要使動畫生效，必須將動畫綁定到某個元素。
下面的例子將動畫綁定到 元素。動畫將持續0.2秒鐘，同時進行循環。
示例
代碼 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小試牛刀</title><style>.c1,.c2,.c3{width:100px;height: 100px;background:rgb(255,0,0); /*顏色單詞，16進制編碼 rgb值*/border-radius:50%; /*邊框半徑：設置圓角 css3*/box-shadow:0 0 50px rgb(255,0,0); /*盒子陰影 css3*/}.c3{margin-top:-100px;border-radius: 0; /*去掉選中元素的圓角邊框*/}.c2{margin-top:-50px;margin-left:-50px}#love{position:absolute;left:20%;top:10%;transform: rotate(45deg); /*順時針旋轉45度 css3*/animation:jump .3s linear infinite;}/* 自定義動畫創建 css3*/@keyframes jump{30%{transform: scale(1.1) rotate(45deg);}40%{transform: scale(1.2) rotate(45deg);}50%{transform: scale(1.1) rotate(45deg);}}</style> </head></head> <body> <div id="love"><div class="c1"></div><div class="c2"></div><div class="c3"></div> </div></body> </html> 效果跳動的心
總結
以上是生活随笔為你收集整理的CSS学习17之动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS学习16之层级
- 下一篇： CSS学习18之小试牛刀