欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML-简单动画

程序员文章站 2022-03-28 12:11:17
简单动画 (1)简单动画通常称之为“过渡transition” Transition-property:需要过渡的属性,但是并非所有的属性都支持过渡。 Transition-duration:过渡的时间; 简写:transition:all 时间; (2)渐变时间函数 Transition-timi ......

简单动画

(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>

效果如下:

 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>

效果如下:

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>

效果如下:

HTML-简单动画