css动画与变形示例0805

最新推荐文章于 2024-07-24 20:22:47 发布

Ystay_123

最新推荐文章于 2024-07-24 20:22:47 发布

阅读量268

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_44739478/article/details/107826754

版权

Animation动画
动画序列+配置动画
1、定义动画轨迹
①@keyframes name{
from{
开始位置
}
to{
结束位置
}
}
②@keyframes name{
0%{ }
50%{ }
100%{ }
}
2、元素执行轨迹

  div{
       animation-name:name;
       animation-duration: number s/ms;
       animation-delay:number s/ms;
       animation-timing-function:ease/ease-in/ease-out/ease-in-out/linear
       animation-iteration-count:number/infinite
       animation-direction:reverse/alternate/alternate-reverse
       animation-fill-mode:forwards/backwards
 }

1、(from-to)方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        div{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        /* 执行动画 */
        animation-name: move;
        /* 动画持续时间 */
        animation-duration: 3s;
        }
        /* 1、定义动画轨迹 */
        @keyframes move{
            from{
                margin-left: 0px;
                background-color: aquamarine;
            }
            to{
                margin-left: 300px;
                background-color: brown;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2、 (%)动画方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        div{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        /* 执行动画 */
        animation-name: move;
        /* 动画持续时间 */
        animation-duration: 3s;
        /* 延迟时间 */
        animation-delay: 3s;
       /* 动画执行次数  无限循环：infinite*/
        animation-iteration-count: 2;
       /* 设置动画方向 reverse、alternate、alternate-reverse */
        animation-direction: reverse;
        /* 执行前、执行后停留位置  backwards、forwards*/
        animation-fill-mode: forwards;
        }
        /* 1、定义动画轨迹 */
        @keyframes move{
            0%{
                margin-left: 0px;
                background-color: aquamarine;
            }
            50%{
                background-color: thistle;
            }
            100%{
                margin-left: 300px;
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

        多个div动画---多个div块用不同的速度曲线滑到同一地方

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: 10px;
            animation-name: move;
            animation-duration: 5s;
            animation-iteration-count: infinite;
        }
        div:first-child{
            /* 动画速度曲线 */
            animation-timing-function: ease;
        }
        div:nth-child(2){
            animation-timing-function: ease-in;
        }
        div:nth-child(3){
            animation-timing-function: ease-out;
        }
        div:nth-child(4){
            animation-timing-function: ease-in-out;
        }
        div:last-child{
            animation-timing-function: linear;
        }
        @keyframes move{
            from{
                margin-left: 0px;
                background-color:tomato;
            }
            to{
               margin-left:500px;
               background-color: tan;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

 轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="shortcut icon" type='images/-icon' href="favicon.ico">
    <style>
       div#outer{
           width: 400px;
           height: 150px;
           border: 1px solid tomato;
           margin:0 auto;
           /* 子元素超出部分隐藏 */
           overflow: hidden;
       }
       div.move{
           width: 2000px;
           height: 150px;
           background-color: tomato;
           animation-name: move;
           animation-duration: 10s;
           animation-timing-function: steps(5);
           animation-iteration-count: infinite;
       }
       div.move div{
           width: 400px;
           height: 150px;
           float: left;
           color: wheat;
           font-size: 40px;
       }
    @keyframes move{
         form{
             margin-left: 0px;
         }
         to{
             margin-left: -2000px;
         }
    }

    </style>
</head>
<body>
    <div id="outer">
        <div class="move">
            <div style="background-color: tomato;">div1</div>
            <div style="background-color: orange;">div2</div>
            <div style="background-color:gold ;">div3</div>
            <div style="background-color:yellowgreen ;">div4</div>
            <div style="background-color: teal;" >div5</div>
        </div>
    </div>
</body>
</html>

 西游

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>梦幻西游</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            height: 100%;
        }
        div.bg{
            height: 100%;
            background-image: url('./background.jpg');
            animation-name: bg;
            animation-duration: 30s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        div.content{
            position: absolute;
            left: 350px;
            bottom: 300px;
        }
        div.content li{
            list-style: none;
            width: 200px;
            height: 180px;
            /* background-color: red; */
            margin-right: 50px;
            float: left;
            overflow: hidden;
        }
        div.content li div{
            width: 1600px;
            height: 180px;
            /* background-color: aquamarine; */
            animation-name: roles;
            animation-duration: 1s;
            animation-timing-function: steps(8);
            animation-iteration-count: infinite;
        }
        div.content li div img{
            width: 1600px;
            height: 180px;
        }

        @keyframes roles{
           from{
              margin-left: 0px;
           }
           to{
               margin-left: -1600px;
           }
        }
        @keyframes bg{
            from{
                margin-left: -2000px;
            }
            to{
                margin-left: 0px;
            }
        }

    </style>
</head>
<body>
    <div class="bg"></div>
    <div class="content">
        <ul>
            <li>
                <div>
                    <img src="./wk.png" alt="">
                </div>
            </li>
            <li>
                <div>
                    <img src="./bj.png" alt="">
                </div>
            </li>
            <li>
                <div><img src="./tc.png" alt=""></div>
            </li>
            <li>
                <div>
                    <img src="sc.png"">
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

呼吸灯：

1.外圆
	1.扩大10px
	2.缩小10px
	3.保持不动
2.内圆
	1.外圆扩大的同时，内圆缩小10px
	2.外圆缩小的同时，内圆扩大10px
	3.内圆缩小12px
	4.内圆放大12px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>呼吸灯</title>
<style>
    *{
    box-sizing:border-box;
    }
    div.article{
        width: 200px;
        height: 300px;
        background-color: black;
        margin:0 auto;
    }
    
    div.top{
        width: 200px;
        height: 200px;
        padding: 20px;
        


        animation-name: outer;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
     
    div#outer{
       height: 100%;
       border: 5px solid whitesmoke;
       border-radius: 50%;
       padding: 20px;

       animation-name: inner;
       animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
    } 

    div#inner{
        height: 100%;
        border: 5px solid wheat;
        border-radius: 50%;
    }
     
     div.text{
        color:white;
        text-align:center;
     }
     /* 外圆 */
     @keyframes outer{
            25%{
                        padding: 10px;
            }
            50%{
                padding: 20px;
            }
            100%{
                padding: 20px;
            }
     }
   /* 内圆 */
      @keyframes inner{
            25%{
                padding: 30px;
            }
            50%{
                padding: 20px;
            }
            75%{
               padding: 32px;
            }
            100%{
               padding: 20px;
            }
      }
</style>
</head>
<body>
   <div class="article">
       <div class="top">
           <div id="outer">
               <div id="inner"></div>
           </div>
       </div>
       <div class="text">hi!</div>
   </div> 
</body>
</html>

========================================================================
transitions动画

transitions 提供了一种在更改CSS属性时控制动画速度的方法
可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing funtion，比如匀速地或先快后慢)。

1、鼠标点击后图片宽高背景颜色发生变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: rgb(204, 241, 229);
            /* 指定过渡时长 */
            transition-duration: 3s;
            /* 指定哪个属性用于过渡，没有指定的瞬间变化，取值有width/height/background-color/all */
            transition-property: all;
              /* 指定过渡延迟的时长 */
            transition-delay: 3s;
            /* 运动速度曲线的函数 ease/ease-in/ease-out/ease-in-out/liner*/
            transition-timing-function: linear;
        }
        div:hover{
            width: 200px;
            height: 200px;
            background-color: rgb(202, 110, 110);
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

2、鼠标点击一张图片后转到另一张图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        div{
            width: 800px;
            height: 500px;
            background-color: rgb(204, 241, 229);
            background-image: url('./1.jpg');
        }
        div:hover{
            background-image: url('./2.jpg');
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

3、点击图片后图片放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>transition</title>
    <style>
        div{
            width: 800px;
            height: 500px;
            background-color: rgb(204, 241, 229);
            /* 添加过渡效果 */
            transition-property: all;
            transition-duration: 3s;
            transition-timing-function: linear;
            /* 超出父元素的子元素隐藏（因为img在慢慢变大）如果不设置hidden子元素会超过父元素 */
            overflow: hidden;
        }
        div img{
            width: 800px;
            height: 500px;
            transition-property: all;
            transition-duration: 2s;
            transition-timing-function: linear;
        }

        img:hover{
            width: 820px;
            height: 520px;
        }
    </style>
</head>
<body>
    <div>
        <img src="./2.jpg" alt="">
    </div>
</body>
</html>

========================================================================
变形效果

1、旋转 x/y/z轴旋转

效果：
x轴旋转高度改变
y轴旋转宽度改变
z轴旋转位置旋转（顺时针）

<!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>
        div{
            width: 100px;
            height: 100px;
            margin: 120px;
            border-left:2px solid aquamarine;
            border-top:2px solid blueviolet;
            border-right:2px solid tan;
            border-bottom:2px solid tomato;
             
            /* transform: rotateX(60deg);
            transform: rotateY(180deg);
            transform: rotateZ(180deg); */
        }

        div.one{
            /* 绕X轴旋转，高度发生改变，0~90°越来越矮，90°时消失（没有厚度）
            90~180°慢慢变高，180°时上下边框互换 */
           transform: rotateX(60deg);
        }

        div.two{
            /* 绕Y轴旋转,宽度改变，0~90°越来越窄，90°时消失，90~180°越来越宽
            180°时左右边框互换 */
            transform: rotateY(0deg);
        }

        div.three{
           /* 绕Z轴顺时针旋转，中心、大小没有改变 */
            transform: rotateZ(90deg);
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

2、倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倾斜</title>
    <style>
       div{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin: 120px;
        float: left;
       }
        /* 水平方向不变，垂直方向倾斜，从左上角开始倾斜 */
       div.one{
           transform: skewX(20deg);
       }
       /* 垂直方向不变，水平方向倾斜 */
       div.two{
           transform: skewY(20deg);
       }
       /* 都变 */
       div.three{
           transform:skew(20deg,20deg);
       }
    </style>
</head>
<body>
    <div></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

3、缩放


```css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缩放</title>
    <style>
       div{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin: 120px;
        float: left;
       }
       /* 等比例缩小 */
       div.one{
           transform: scale(0.5,0.5);
       }
       /* 等比例放大两倍 */
       div.two{
           transform: scale(2,2);
       }
       /* 只缩放长/宽 */
       div.three{
           transform:scale(2,1);
       }
    </style>
</head>
<body>
    <div></div>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>
</html>

以下是要用到的图片
在这里插入图片描述

Ystay_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画与变形示例0805

Animation动画动画序列+配置动画1、定义动画轨迹①@keyframes name{from{开始位置}to{结束位置}}②@keyframes name{0%{ }50%{ }100%{ }}2、元素执行轨迹 div{ animation-name:name; animation-duration: number s/ms; animation-delay:number s/ms; animat
复制链接

扫一扫