html 简单动画效果,HTML-简单动画
簡單動畫
(1)簡單動畫通常稱之為“過渡transition”
transition-property：需要過渡的屬性，但是并非所有的屬性都支持過渡。
transition-duration：過渡的時間；
簡寫：transition：all 時間；
(2)漸變時間函數
transition-timing-function——css屬性以何種速度進行漸變
貝塞爾曲線的預設值：
ease：漸快，勻速，減慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in：漸快，勻速(cubic-bezier(0.42,0,1,1))
ease-out：勻速，減慢(cubic-bezier(0,0,0.58,1))
ease-in-out：和ease類似，相比ease的加速度大(幅度大)(cubic-bezier(0.42,0,0.58,1))
linear：全程勻速(cubic-bezier(0,0,1,1))
以下代碼所示，第一部分展示的是一個，當鼠標移動到圖片上時，顯示另一張(底下)的圖片；
1
2
3
4
5
6
7
8
動畫和變形練習9
10
11 /* 第一個部分，設置當鼠標滑動到圖片上時，顯示底下的圖片 */
12
13 .box {
14 width: 300px;
15 height: 300px;
16 position: relative;
17 }
18
19 .box img {
20 width: 300px;
21 height: 300px;
22 position: absolute;
23 left: 0;
24 top: 0;
25 }
26
27 .show1 {
28 transition: all 3s;
29 }
30
31 .show1:hover {
32 opacity: 0;
33 }
34
35
36
37
38
39
40
41
效果如下：
以下代碼展示的是利用簡單動畫制作出輪播圖的效果，當鼠標移動到圖片上時，后面的圖片推動前面的圖片，從而達到輪播的效果；
動畫和變形練習/* 第二個部分 */
.content {
width: 500px;
height: 300px;
overflow: hidden;
}
.imgs img {
width: 500px;
height: 300px;
}
.imgs {
width: 1100px;
height: 300px;
transition: all 3s;
display: flex;
justify-content: flex-start;
}
.imgs:hover {
margin-left: -500px;
}
效果如下：
以下代碼展示的是當鼠標移動到圖片上時，四周都散發陰影效果；
1
2
3
4
5
6
7
8
動畫和變形練習9
10
11
12 /* 第三個部分 */
13
14 .box3 {
15 width: 300px;
16 height: 300px;
17 transition: all 3s;
18 position: relative;
19 }
20
21 .box3 img {
22 width: 300px;
23 height: 300px;
24 position: absolute;
25 left: 0;
26 top: 0;
27 }
28
29 .box3:hover {
30 box-shadow: 0 0 4px 15px rgba(233, 22, 233, 0.5)
31 }
32
33
34
35
36
37
38
39
40
41
42
43
效果如下：
總結
以上是生活随笔為你收集整理的html 简单动画效果,HTML-简单动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单动画（过渡）与复杂动画
- 下一篇： 2017年html5行业报告,云适配发布