当前位置: 萬仟网 > IT编程>网页制作>CSS > HTML-简单动画

HTML-简单动画

2019年10月07日 18:03  | 萬仟网IT编程  | 我要评论

简单动画

(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 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <title>动画和变形练习</title>
 9 </head>
10 <style>
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 <body>
35     <div class="box">
36         <img src="img/2010011712541728.jpg" alt="">
37         <img src="img/2010011712541759.jpg" alt="" class="show1">
38     </div>
39 </body>
40 
41 </html>

效果如下:

 

 

 以下代码展示的是利用简单动画制作出轮播图的效果,当鼠标移动到图片上时,后面的图片推动前面的图片,从而达到轮播的效果;

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>动画和变形练习</title>
</head>
<style>

    /* 第二个部分 */
    
    .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;
    }
   
</style>

<body>
  

    <!-- 第二部分 -->

    <div class="content">
        <div class="imgs">
            <img src="img/2010011712541728.jpg" alt="">
            <img src="img/2010011712541759.jpg" alt="" class="show">
        </div>
    </div>
    <hr>
   
</body>

</html>

效果如下:

以下代码展示的是当鼠标移动到图片上时,四周都散发阴影效果;

 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <title>动画和变形练习</title>
 9 </head>
10 <style>
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 </style>
33 
34 <body>
35    
36     <!-- 第三部分 -->
37     <div class="box3">
38         <img src="img/2010011712541728.jpg" alt="" class="show3">
39         <img src="img/2010011712541759.jpg" alt="">
40     </div>
41 </body>
42 
43 </html>

效果如下:

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com