~~~
要點：animation: front 3s infinite; 動畫 name 時間 循環infinite無限的/n 規定次數
//分時段效果
@keyframes front {
0%{
transform: rotateY(0)
}
50%{
transform: rotateY(180deg)
}
100%{
transform: rotateY(360deg)
}
}
~~~
~~~
<style>
.parent{
perspective: 400px;
border:1px solid #333;
width:200px;
height:300px;
padding:10px;
}
.parent>div{
width:200px;
height:300px;
background-size: cover;
backface-visibility: hidden;
position:absolute;
}
.front{
z-index: 100;
background:url("images/01.png");
animation: front 3s infinite;
}
.back{
background:url("images/02.png");
animation: back 3s infinite;
}
@keyframes front {
0%{
transform: rotateY(0)
}
50%{
transform: rotateY(180deg)
}
100%{
transform: rotateY(360deg)
}
}
@keyframes back{
0%{
transform: rotateY(-180deg)
}
50%{
transform: rotateY(0deg)
}
100%{
transform: rotateY(180deg)
}
}
~~~
~~~
div class="parent">
<div class="front">
</div>
<div class="back">
</div>
</div>
~~~
- 1.基本樣式
- 0.樣式初始化
- 1. 漸變色
- 2. hover問題
- 3. 陰影
- 4. 選擇器
- 5. border.畫邊線
- 6. 水平垂直居中
- 7.input 輸入框需要縮進
- 8.文字問題
- 2. 方法
- 1. 定位浮動和flex
- 1. 阮一峰
- 2. position
- 3. flex
- 2. bootstrap 3
- 3. sass語法
- 4.margin-top bug 解決方法
- 5. iconfont圖標
- 3. 動畫特效
- 特效總結
- 動畫
- css2d轉換
- 過渡
- 1. 入場從無到有
- 2. 兩面切換
- 3. 小三角及原理
- 4. 點擊圖片單獨顯示
- 5. 導航條吸頂
- 6. 進度條
- 7. animate效果 jquery
- 8.3D透視旋轉
- 4.grid布局
- 1.grid布局 網格居中對齊
- HTML
- 第一節、學習網站
- 第二節、封裝
- 第三節、快捷鍵使用