css3动画制作转动相册
生活随笔
收集整理的這篇文章主要介紹了
css3动画制作转动相册
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、CSS3 動(dòng)畫(huà)
CSS3 可以創(chuàng)建動(dòng)畫(huà)，它可以取代許多網(wǎng)頁(yè)動(dòng)畫(huà)圖像、Flash 動(dòng)畫(huà)和 JavaScript 實(shí)現(xiàn)的效果。
1.CSS3 @keyframes 規(guī)則
2.CSS3動(dòng)畫(huà)是什么？
- 動(dòng)畫(huà)是使元素從一種樣式逐漸變化為另一種樣式的效果。
- 您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
- 請(qǐng)用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
- 0% 是動(dòng)畫(huà)的開(kāi)始，100% 是動(dòng)畫(huà)的完成。
- 為了得到最佳的瀏覽器支持，您應(yīng)該始終定義 0% 和 100% 選擇器。
- ?
3.CSS3 動(dòng)畫(huà)
4.CSS3的動(dòng)畫(huà)屬性
下面的表格列出了 @keyframes 規(guī)則和所有動(dòng)畫(huà)屬性：
| @keyframes | 規(guī)定動(dòng)畫(huà)。 | 3 |
| animation | 所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性。 | 3 |
| animation-name | 規(guī)定 @keyframes 動(dòng)畫(huà)的名稱(chēng)。 | 3 |
| animation-duration | 規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。 | 3 |
| animation-timing-function | 規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)。默認(rèn)是 "ease"。 | 3 |
| animation-fill-mode | 規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。 | 3 |
| animation-delay | 規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。默認(rèn)是 0。 | 3 |
| animation-iteration-count | 規(guī)定動(dòng)畫(huà)被播放的次數(shù)。默認(rèn)是 1。 | 3 |
| animation-direction | 規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。默認(rèn)是 "normal"。 | 3 |
| animation-play-state | 規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。默認(rèn)是 "running"。 | 3 |
5、animation屬性
?
5.1animation-duration
屬性定義動(dòng)畫(huà)完成一個(gè)周期需要多少秒或毫秒。
<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><!-- 向右移動(dòng)200px，2s完成 --><div></div><p><b>注意:</b> 要指定動(dòng)畫(huà)屬性。否則時(shí)間若是0,動(dòng)畫(huà)不會(huì)進(jìn)行。</p> </body></html>5.2animation-timing-function
標(biāo)簽定義及使用說(shuō)明
- animation-timing-function指定動(dòng)畫(huà)將如何完成一個(gè)周期。
- 速度曲線(xiàn)定義動(dòng)畫(huà)從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r(shí)間。
- 速度曲線(xiàn)用于使變化更為平滑。
語(yǔ)法
| linear | 動(dòng)畫(huà)從頭到尾的速度是相同的。 |
| ease | 默認(rèn)。動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢。 |
| ease-in | 動(dòng)畫(huà)以低速開(kāi)始。 |
| ease-out | 動(dòng)畫(huà)以低速結(jié)束。 |
| ease-in-out | 動(dòng)畫(huà)以低速開(kāi)始和結(jié)束。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。 |
5.3animation-direction
定義和用法
animation-direction 屬性定義是否循環(huán)交替反向播放動(dòng)畫(huà)。
注意：如果動(dòng)畫(huà)被設(shè)置為只播放一次，該屬性將不起作用。
CSS 語(yǔ)法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
屬性值
| normal | 默認(rèn)值。動(dòng)畫(huà)按正常播放。 |
| reverse | 動(dòng)畫(huà)反向播放。 |
| alternate | 動(dòng)畫(huà)在奇數(shù)次（1、3、5...）正向播放，在偶數(shù)次（2、4、6...）反向播放。 |
| alternate-reverse | 動(dòng)畫(huà)在奇數(shù)次（1、3、5...）反向播放，在偶數(shù)次（2、4、6...）正向播放。 |
5.4animation-fill-mode
?
定義和用法
animation-fill-mode 屬性規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。
默認(rèn)情況下，CSS 動(dòng)畫(huà)在第一個(gè)關(guān)鍵幀播放完之前不會(huì)影響元素，在最后一個(gè)關(guān)鍵幀完成后停止影響元素。animation-fill-mode 屬性可重寫(xiě)該行為。
CSS 語(yǔ)法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
屬性值
| none | 默認(rèn)值。動(dòng)畫(huà)在動(dòng)畫(huà)執(zhí)行之前和之后不會(huì)應(yīng)用任何樣式到目標(biāo)元素。 |
| forwards | 在動(dòng)畫(huà)結(jié)束后（由 animation-iteration-count 決定），動(dòng)畫(huà)將應(yīng)用該屬性值。 |
| backwards | 動(dòng)畫(huà)將應(yīng)用在 animation-delay 定義期間啟動(dòng)動(dòng)畫(huà)的第一次迭代的關(guān)鍵幀中定義的屬性值。這些都是 from 關(guān)鍵幀中的值（當(dāng) animation-direction 為 "normal" 或 "alternate" 時(shí)）或 to 關(guān)鍵幀中的值（當(dāng) animation-direction 為 "reverse" 或 "alternate-reverse" 時(shí)）。 |
| both | 動(dòng)畫(huà)遵循 forwards 和 backwards 的規(guī)則。也就是說(shuō)，動(dòng)畫(huà)會(huì)在兩個(gè)方向上擴(kuò)展動(dòng)畫(huà)屬性。 |
實(shí)例
把物體動(dòng)畫(huà)地從一個(gè)地方移動(dòng)到另一個(gè)地方，并讓它停留在那里：
<!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
標(biāo)簽定義及使用說(shuō)明
animation-iteration-count屬性定義動(dòng)畫(huà)應(yīng)該播放多少次。
語(yǔ)法
animation-iteration-count: value;
?
| n | 一個(gè)數(shù)字，定義應(yīng)該播放多少次動(dòng)畫(huà) |
| infinite | 指定動(dòng)畫(huà)應(yīng)該播放無(wú)限次（永遠(yuǎn)） |
5.6animation--play-state
標(biāo)簽定義及使用說(shuō)明
animation--play-state屬性指定動(dòng)畫(huà)是否正在運(yùn)行或已暫停。
語(yǔ)法
animation-play-state: paused|running;
?
| paused | 指定暫停動(dòng)畫(huà) |
| running | 指定正在運(yùn)行的動(dòng)畫(huà) |
實(shí)例鼠標(biāo)懸停動(dòng)畫(huà)進(jìn)行，配合3D制作旋轉(zhuǎn)相冊(cè)：
<!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>?
總結(jié)
以上是生活随笔為你收集整理的css3动画制作转动相册的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ImageWatch详细教程
- 下一篇： 关于数据驱动消费金融业务的几点看法