css3动画制作转动相册
生活随笔
收集整理的這篇文章主要介紹了
css3动画制作转动相册
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、CSS3 動畫
CSS3 可以創建動畫，它可以取代許多網頁動畫圖像、Flash 動畫和 JavaScript 實現的效果。
1.CSS3 @keyframes 規則
2.CSS3動畫是什么？
- 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
- 您可以改變任意多的樣式任意多的次數。
- 請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同于 0% 和 100%。
- 0% 是動畫的開始，100% 是動畫的完成。
- 為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。
- ?
3.CSS3 動畫
4.CSS3的動畫屬性
下面的表格列出了 @keyframes 規則和所有動畫屬性：
| @keyframes | 規定動畫。 | 3 |
| animation | 所有動畫屬性的簡寫屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | 3 |
| animation-fill-mode | 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。 | 3 |
| animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | 3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 |
5、animation屬性
?
5.1animation-duration
屬性定義動畫完成一個周期需要多少秒或毫秒。
<html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>div {width: 100px;height: 100px;background: green;position: relative;animation: mymove infinite;animation-duration: 2s;}@keyframes mymove {from {transform: translateX(0px);}to {transform: translateX(200px);}}</style> </head><body><p><strong>注意:</strong> animation-duration屬性不兼容 Internet Explorer 9 以及更早版本的瀏覽器.</p><!-- 向右移動200px，2s完成 --><div></div><p><b>注意:</b> 要指定動畫屬性。否則時間若是0,動畫不會進行。</p> </body></html>5.2animation-timing-function
標簽定義及使用說明
- animation-timing-function指定動畫將如何完成一個周期。
- 速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間。
- 速度曲線用于使變化更為平滑。
語法
| linear | 動畫從頭到尾的速度是相同的。 |
| ease | 默認。動畫以低速開始，然后加快，在結束前變慢。 |
| ease-in | 動畫以低速開始。 |
| ease-out | 動畫以低速結束。 |
| ease-in-out | 動畫以低速開始和結束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數中自己的值?？赡艿闹凳菑?0 到 1 的數值。 |
5.3animation-direction
定義和用法
animation-direction 屬性定義是否循環交替反向播放動畫。
注意：如果動畫被設置為只播放一次，該屬性將不起作用。
CSS 語法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
屬性值
| normal | 默認值。動畫按正常播放。 |
| reverse | 動畫反向播放。 |
| alternate | 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 |
| alternate-reverse | 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 |
5.4animation-fill-mode
?
定義和用法
animation-fill-mode 屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
默認情況下，CSS 動畫在第一個關鍵幀播放完之前不會影響元素，在最后一個關鍵幀完成后停止影響元素。animation-fill-mode 屬性可重寫該行為。
CSS 語法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
屬性值
| none | 默認值。動畫在動畫執行之前和之后不會應用任何樣式到目標元素。 |
| forwards | 在動畫結束后（由 animation-iteration-count 決定），動畫將應用該屬性值。 |
| backwards | 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。 |
| both | 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。 |
實例
把物體動畫地從一個地方移動到另一個地方，并讓它停留在那里：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>)</title><style>.box {width: 100px;height: 100px;background: red;position: relative;animation: mymove 3s;animation-iteration-count: 2;animation-fill-mode: forwards;}.box1 {width: 100px;height: 100px;background: green;}@keyframes mymove {from {transform: translateX(0px);}to {transform: translateX(200px);}}</style> </head><body><p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 屬性。</p><div class="box"></div><div class="box1">我是固定的</div></body></html>5.5animation-iteration-count
標簽定義及使用說明
animation-iteration-count屬性定義動畫應該播放多少次。
語法
animation-iteration-count: value;
?
| n | 一個數字，定義應該播放多少次動畫 |
| infinite | 指定動畫應該播放無限次（永遠） |
5.6animation--play-state
標簽定義及使用說明
animation--play-state屬性指定動畫是否正在運行或已暫停。
語法
animation-play-state: paused|running;
?
| paused | 指定暫停動畫 |
| running | 指定正在運行的動畫 |
實例鼠標懸停動畫進行，配合3D制作旋轉相冊：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {list-style: none;}body {background-image: radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);}.box {width: 600px;height: 340px;position: absolute;top: 50%;margin-top: -170px;left: 50%;margin-left: -300px;transform-style: preserve-3d;transition: all 500s;transform: rotateX(-5deg);animation: turn 10s linear infinite paused;}.item {position: absolute;left: 0;top: 0;width: 600px;height: 340px;background-size: 600px;}/* 正面 */.item:nth-child(1) {background-image: url(./img/2.jpg);transform: translateZ(600px);}/* 后面 */.item:nth-child(2) {background-image: url(./img/m1.jpg);transform: translateZ(-600px);}/* 左后 */.item:nth-child(3) {background-image: url(./img/3.jpg);transform: rotateY(60deg) translateZ(-600px);}/* 左前 */.item:nth-child(4) {background-image: url(./img/4.jpg);transform: rotateY(-60deg) translateZ(600px);}/* 右前 */.item:nth-child(5) {background-image: url(./img/5.jpg);transform: rotateY(60deg) translateZ(600px);}/* 右后 */.item:nth-child(6) {background-image: url(./img/6.jpg);transform: rotateY(-60deg) translateZ(-600px);}/* .box:hover {transform: rotateX(-5deg) rotateY(36000deg);} */.box:hover {animation-play-state: running;}@keyframes turn {to {transform: rotateX(-5deg) rotateY(360deg);}}</style> </head><body><ul class="box"><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li><li class="item"></li></ul> </body></html>?
總結
以上是生活随笔為你收集整理的css3动画制作转动相册的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ImageWatch详细教程
- 下一篇： 关于数据驱动消费金融业务的几点看法