2. (css3) 2D转换及动画animation快速掌握

最新推荐文章于 2024-05-23 22:54:35 发布
最新推荐文章于 2024-05-23 22:54:35 发布
阅读量197 收藏 1
点赞数
分类专栏： # CSS 0基础快速入门 CSS学习手册 文章标签： 2D 转换 translate rotate scale 使用 移动 缩放 旋转 过渡 animation 动画 序列 速度曲线 旋转中心 案例 攻略
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013946061/article/details/112466000
版权

文章目录

1. 重点提炼

  • CSS3 动画属性
  • CSS3 2D转换、移动、旋转和缩放属性
  • CSS3-2D转换（translate）

2. 2D 转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放。

2D 转换是改变标签在二维平面上的位置和形状。

  • 缩放：scale
  • 移动：translate
  • 旋转：rotate
  • 倾斜：skew

2.1 二位坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

image-20200816145052431


3. 2D 转换之 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

image-20200816145300508


3.1 translate 语法

  • x 就是 x 轴上水平移动
  • y 就是 y 轴上水平移动
transform: translate(x, y)  /*或者分开写*/
transform: translateX(n)
transfrom: translateY(n)

image-20200816145420778


3.1.1 example01

移动盒子的位置方法：

  • 定位
  • 浮动
  • margin
  • transform
<!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>Document</title>
    <style>
        /* 移动盒子的位置： 定位   盒子的外边距  2d转换移动 */       
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
             transform: translate(100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20210103220312242

只移动x坐标

transform: translate(100px, 0);

或者

transform: translateX(100px);

image-20210103220800327

如果只移动y坐标

transform: translate(0, 100px);

或

transform: translateY(100px);

image-20210103235416680

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.74
Branch： branch04
commit description：a2.74（example01——translate 的使用）

tag：a2.74


3.2 重点知识点

  • 2D 的移动主要是指 水平、垂直方向上的移动，沿着 X 和 Y 轴移动元素
  • translate 最大的优点就是不影响其他元素的位置
  • translate 中的100%单位，是相对于本身的宽度和高度来进行计算的 translate:(50%,50%);
  • 行内标签没有效果

3.2.1 代码演示

<!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>Document</title>
    <style>
        /* 移动盒子的位置： 定位   盒子的外边距  2d转换移动 */
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔*/
            /* transform: translate(x, y); */
            /* transform: translate(100px, 100px); */
            /* 1. 如果只移动x坐标 */
            /* transform: translate(100px, 0); */
            /* transform: translateX(100px); */
            /* 2. 如果只移动y坐标 */
            /* transform: translate(0, 100px); */
            /* transform: translateY(100px); */
        }

        div:first-child {
            transform: translate(30px, 30px);
        }

        div:last-child {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

translate不影响其他元素的位置

image-20210104212319538

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.75
Branch： branch04
commit description：a2.75（translate不影响其他元素的位置）

tag：a2.75


4. 让一个盒子水平垂直居中

tranlate里面的参数是可以用 %

如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的

<!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>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. tranlate里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            transform: translateX(50%);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20210104214727451


如果实现一个子盒子在父盒子中水平垂直居中，过去可以利用margin和定位，现在可以使用translate。

先使用定位实现

<!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>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
</body>

</html>

image-20210104215506473

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: -100px;
            margin-left: -100px; 
        }

image-20210104215608492

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.76
Branch： branch04
commit description：a2.76（让一个盒子水平垂直居中——使用定位实现）

tag：a2.76


但是这种居中方式是写死的，如果子盒子的发生变化，margin也得重新修改。

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.77
Branch： branch04
commit description：a2.77（让一个盒子水平垂直居中——使用translate实现）

tag：a2.77


translate 对于行内元素是无效

<!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>Document</title>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 1. tranlate里面的参数是可以用 % */
            /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
            /*transform: translateX(50%);*/
        }
        
        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: purple;
            /* margin-top: -100px;
            margin-left: -100px; */
            /* translate(-50%, -50%)  盒子往上走自己高度的一半   */
            transform: translate(-50%, -50%);
        }

        span {
            /* translate 对于行内元素是无效的 */
            transform: translate(300px, 300px);
        }
    </style>
</head>

<body>
<!--    <div></div>-->
    <div>
        <p></p>
    </div>
    <span>123</span>
</body>

</html>

image-20210104220653796

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.78
Branch： branch04
commit description：a2.78（translate 对于行内元素是无效）

tag：a2.78


5. 2D 转换 rotate

5.1 rotate 旋转

  • 2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

顺时针旋转

image-20210104220834287


5.2 rotate 语法

/* 单位是：deg */
transform: rotate(度数)
  • rotate 里面跟度数，单位是 deg
  • 角度为正时，顺时针，角度为负时，逆时针
  • 默认旋转的中心点是元素的中心点

5.3 代码演示

<!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>Document</title>
    <style>
        img {
            width: 150px;
        }
    </style>
</head>

<body>
    <img src="media/pic.jpg" alt="">
</body>

</html>

image-20210104225420032

        img {
            width: 150px;
            /* 顺时针旋转45度 */
            transform: rotate(45deg);
        }

image-20210104225521784

将其变为圆的，并且鼠标经过再进行旋转

        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg);*/
            border-radius: 50%;
            border: 5px solid pink;
        }
        
        img:hover {
            transform: rotate(360deg);
        }

但是尝试了没有任何效果，可以添加过渡效果，过渡写到本身上，谁做动画给谁加

        img {
            width: 150px;
            /* 顺时针旋转45度 */
            /* transform: rotate(45deg);*/
            border-radius: 50%;
            border: 5px solid pink;
            /* 过渡写到本身上，谁做动画给谁加 */
            transition: all 0.3s;
        }
        
        img:hover {
            transform: rotate(360deg);
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.79
Branch： branch04
commit description：a2.79（2D 转换 rotate）

tag：a2.79


5.4 三角形案例

image-20210105094032437

之前使用字体图标，也可以自己实现。

可以使用正方形，旋转45度，只需要两个边即可。

使用伪元素，默认行内元素，使用定位。

<!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>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20210105094528910

鼠标经过三角形状变换，旋转180度，因为已经旋转了45度，加起来就是225度

<!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>Document</title>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
         /*鼠标经过div  里面的三角旋转 */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.80
Branch： branch04
commit description：a2.80（三角形案例）

tag：a2.80


6. 设置元素旋转中心点(transform-origin)

  1. transform-origin 基础语法
transform-origin: x y;
  1. 重要知识点
  • 注意后面的参数 x 和 y 用空格隔开
  • x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
  • 还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
        }
        
        div:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

此时的旋转中心在居中的位置。

可以将旋转中心设置在左下角。

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            transform-origin: left bottom;
        }

可以设置旋转中心px 像素

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all 1s;
            /* 1.可以跟方位名词 */
            /*transform-origin: left bottom;*/
            /* 2. 默认的是 50%  50%  等价于 center  center */
            /* 3. 可以是px 像素 */
            transform-origin: 50px 50px;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.81
Branch： branch04
commit description：a2.81（设置元素旋转中心点(transform-origin)）

tag：a2.81


7. 旋转中心案例

子盒子和父容器一样大，只不过刚开始默认的角度看不见，然后通过旋转中心点在左下角，再旋转回来即可显示。

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }
        
        div::before {
            content: "传媒";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

父盒子加overflow:hidden，就看不见盒子外的了。

        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
        }

可以设置多个div

<!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>Document</title>
    <style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 100px auto;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "传媒";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4s;
        }
        /* 鼠标经过div 里面的before 复原 */
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.82
Branch： branch04
commit description：a2.82（旋转中心案例）

tag：a2.82


8. 2D 转换之 scale

应用：很多网页鼠标经过，图片就会放大。

  1. scale 的作用

    • 用来控制元素的放大与缩小

  2. 语法

    transform: scale(x, y)

  3. 知识要点

    • 注意，x 与 y 之间使用逗号进行分隔
    • transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
    • transform: scale(2, 2): 宽和高都放大了二倍
    • transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
    • transform:scale(0.5, 0.5): 缩小
    • scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

  4. 代码演示

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
        
        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
             transform: scale(2, 2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

修改了宽度为原来的2倍 高度 不变

transform: scale(2, 1); 


        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2);*/
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1);*/
            /* 3. 等比例缩放 同时修改宽度和高度，有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
             transform: scale(2); 
        }

等比例缩放 同时修改宽度和高度，有简单的写法 以下是 宽度修改了2倍，高度默认和第一个参数一样

可以进行缩小 小于1 就是缩放

transform: scale(0.5, 0.5);

或者

transform: scale(0.5);

实际之前直接修改宽度和高度也可进行缩放，但是它会影响其他盒子的布局。

        div:hover {
            /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
            /* transform: scale(x, y); */
            /* transform: scale(2, 2);*/
            /* 2. 修改了宽度为原来的2倍  高度 不变 */
            /* transform: scale(2, 1);*/
            /* 3. 等比例缩放 同时修改宽度和高度，有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
            /* transform: scale(2);*/
            /* 4. 可以进行缩小  小于1 就是缩放 */
            /* transform: scale(0.5, 0.5);*/
            /* transform: scale(0.5);*/
            width: 300px;
            height: 300px;
        }

<body>
    <div></div>
    123123
</body>

scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点

transform: scale(2);

默认缩放中心点是中点，但也可以修改。

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform-origin: left bottom; 
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.83
Branch： branch04
commit description：a2.83（2D 转换之 scale）

tag：a2.83


9. 图片放大案例

<!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>Document</title>
    <style>
        div {
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>

</html>

在这里插入图片描述

去除放大超出的部分。

        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }

在这里插入图片描述

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.84
Branch： branch04
commit description：a2.84（图片放大案例）

tag：a2.84


10. 分页按钮案例

鼠标经过，按钮放大。

<!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>Document</title>
    <style>
        li {
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
<!--    ul>li{$}*7-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

image-20210105120828626

去除小点，并且一行排布

        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
        }

image-20210105120920356

变成圆形，鼠标经过为小手，鼠标经过放大。

<!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>Document</title>
    <style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
<!--    ul>li{$}*7-->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.85
Branch： branch04
commit description：a2.85（分页按钮案例）

tag：a2.85


11. 2D 转换综合写法以及顺序问题

  1. 知识要点
  • 同时使用多个转换，其格式为 transform: translate() rotate() scale()
  • 顺序会影响到转换的效果(先旋转会改变坐标轴方向)
  • 但我们同时有位置或者其他属性的时候，要将位移放到最前面
  1. 代码演示
<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all .5s;
        }
        
        div:hover {
            transform: translate(150px, 50px) rotate(180deg) scale(1.2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

这个与背景不同，它存在顺序问题

如先位移再旋转

transform: translate(150px, 50px) rotate(180deg);

先旋转再位移

transform: rotate(180deg) translate(150px, 50px);

先旋转会改变坐标轴方向

=> 注意：同时有位移和其他属性，需要把位移放到最前面

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.86
Branch： branch04
commit description：a2.86（2D 转换综合写法以及顺序问题）

tag：a2.86


12. 动画(animation)

  1. 什么是动画

    • 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果
    • 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

  2. 动画的基本使用

    • 先定义动画
    • 在调用定义好的动画

  3. 语法格式(定义动画)

    @keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

  4. 语法格式(使用动画)

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

  1. 动画序列

    • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
    • 在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
    • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
    • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

  2. 代码演示

    页面一打开，一个盒子就从左边走到右边

    <!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>Document</title>
    <style>
        /* 页面一打开，一个盒子就从左边走到右边 */
        /* 1. 定义动画 */
        
        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.87
Branch： branch04
commit description：a2.87（动画(animation)基本使用）

tag：a2.87


13. 动画序列

  • 0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
  • 在@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间，或用关键词"from" 和 “to”，等同于0% 和100% 。

13.1 example02

<!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>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        @keyframes move {
            from {
                transform: translate(0, 0);
            }
            to {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

from和to也可以实现同样的效果。

from to 等价于 0% 和 100%


实现多个状态的变化 =>

  1. 可以做多个状态的变化 keyframe 关键帧
  2. 里面的百分比要是整数
  3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 => 25% * 10 = 2.5s

在这里插入图片描述

实际仅需要4个状态，百分之0可以省略，因为默认位置，或者写上百分之0，中括号中不写东西。推荐还是写清楚代码。

<!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>Document</title>
    <style>
        /* from to 等价于  0% 和  100% */
        /*@keyframes move {*/
        /*    from {*/
        /*        transform: translate(0, 0);*/
        /*    }*/
        /*    to {*/
        /*        transform: translate(1000px, 0);*/
        /*    }*/
        /*}*/
        /* 动画序列 */
        /* 1. 可以做多个状态的变化 keyframe 关键帧 */
        /* 2. 里面的百分比要是整数 */
        /* 3. 里面的百分比就是 总的时间（我们这个案例10s）的划分 25% * 10  =  2.5s */
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0)
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0, 500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.88
Branch： branch04
commit description：a2.88（example02——动画序列）

tag：a2.88


14. 动画常见属性

  1. 常见的属性

在这里插入图片描述

  1. 代码演示

    <!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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
             animation-duration: 2s;
            /* 运动曲线 默认也是ease*/
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            animation-iteration-count: infinite;
        }
       
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

    动画进行完成后，就会直接跳到起始的位置开始，没有任何过渡效果。

    反向也运动，类似于跑马灯。

    /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
animation-direction: alternate;


            div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
             animation-duration: 2s;
            /* 运动曲线 默认也是ease*/
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            /*animation-iteration-count: infinite;*/
            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
            /*animation-direction: alternate;*/
            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
            animation-fill-mode: forwards; 
        }


    鼠标经过div 让这个div 停止动画，鼠标离开就继续动画

            @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
             animation-duration: 2s;
            /* 运动曲线 默认也是ease*/
            animation-timing-function: ease;
            /* 何时开始 */
            animation-delay: 1s;
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            animation-iteration-count: infinite;
            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
            animation-direction: alternate;
            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
            /*animation-fill-mode: forwards;*/
        }
        
        div:hover {
            /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.89
Branch： branch04
commit description：a2.89（动画常见属性）

tag：a2.89


15. 动画简写方式

更多地时候使用动画，都是使用简写方式。

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态

  1. 动画简写方式
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
  1. 知识要点
  • 简写属性里面不包含 animation-paly-state
  • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
  • 要想动画走回来，而不是直接调回来：animation-direction: alternate
  • 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

  1. 代码演示

    曲线：linear（匀速）

    <!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>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 动画名称 */
            /*animation-name: move;*/
            /* 持续时间 */
            /* animation-duration: 2s;*/
            /* 运动曲线 默认也是ease*/
            /*animation-timing-function: ease;*/
            /* 何时开始 */
            /*animation-delay: 1s;*/
            /* 重复次数  iteration 重复的 conut 次数  infinite  无限 */
            /*animation-iteration-count: infinite;*/
            /* 是否反方向播放 默认的是 normal  如果想要反方向 就写 alternate */
            /*animation-direction: alternate;*/
            /* 动画结束后的状态 默认的是 backwards  回到起始状态 我们可以让他停留在结束状态 forwards */
            /*animation-fill-mode: forwards;*/
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
             animation: move 2s linear 0s 1 alternate forwards;
        }
        
        div:hover {
            /* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

动画简写形势中，有些属性是可以省略的。

前面2个属性 name duration 一定要写 ，可以省略delay、iteration-count这两个属性。

/* 前面2个属性 name  duration 一定要写 */
animation: move 2s linear  alternate forwards;

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.90
Branch： branch04
commit description：a2.90（动画简写方式）

tag：a2.90


16. example03——热点图案例

<!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>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="map">
    </div>
</body>

</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>Document</title>
    <style>
        body {
            background-color: #333;
        }
        
        .map {
            position: relative;
            width: 747px;
            height: 616px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
            position: absolute;
            top: 227px;
            right: 193px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city">
            1
        </div>
    </div>
</body>

</html>

image-20210105184518274


在这个位置放一个圆圈，进行不停地缩放即可。

image-20210105184644304

最里面的小圆点不动，准备四个盒子，四个圆圈，三个波纹，一个小圆点。

        <div class="city">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>

一个字的像素是16px，小圆点的像素是8px，会有误差，因此最后可能还需要调整位置，借助浏览器调试工具即可。

        .dotted {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
        }

image-20210105192719194

小圆圈不是设置边框而是设置阴影，并且从小变大，三个有队列层次感。

使用属性选择器，归并相同的样式。

        .city div[class^="pulse"] {
            width: 8px;
            height: 8px;
            /*水平 垂直都为0  只需要阴影*/
            box-shadow: 0 0 12px #009dfd;
        }

image-20210105193101541

三个div叠在一起了。

image-20210105193216965

应该重叠在一起，然后逐个向四周发散。

保证小波纹在父盒子中水平和垂直居中，向四周发散。

        .city div[class^="pulse"] {
            /* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            /*水平 垂直都为0  只需要阴影*/
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
        }

image-20210105193644351

实现动画发散

百分之0不做任何操作

放大刚开始快，再慢一些

直接跳到70%即可

再到100%，透明度逐渐变得看不见了。

波纹匀速变化并无限循环即可

        .city div[class^="pulse"] {
            /* 保证小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            /*水平 垂直都为0  只需要阴影*/
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        @keyframes pulse {
            0% {}
            70% {
                width: 40px;
                height: 40px;
                opacity: 1;
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }

在这里插入图片描述

但是只能看见一个圆，因为是同一动画，都是叠在一起，应该有一个队列的关系，可以设置不同时间差。

.pulse2 {
    animation-delay: 0.4s;
}

.pulse3 {
    animation-delay: 0.8s;
}

但是没有任何效果，那是因为权重的问题，animation默认的延迟是0s，没有被覆盖。

.city div[class^="pulse"] 10+1+10 = 21 权重

.pulse2 10权重

可以加!important ，或者也可以设置权重为21，但是写在最后面，就可以覆盖了。

        .city div.pulse2 {
            animation-delay: 0.4s;
        }
        
        .city div.pulse3 {
            animation-delay: 0.8s;
        }

注意： 为啥不用scale放大，transform: scale(5); 不要用scale 因为他会让 阴影变大。

        @keyframes pulse {
            0% {}
            70% {
                transform: scale(5);
            }
            100% {
                width: 70px;
                height: 70px;
                opacity: 0;
            }
        }

在这里插入图片描述

再添加台北，同样地方法，就不多解释了。

        <div class="city tb">
            <div class="dotted"></div>
            <div class="pulse1"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>

        .tb {
            top: 500px;
            right: 80px;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.91
Branch： branch04
commit description：a2.91（example03——热点图案例）

tag：a2.91


17. 速度曲线细节

  1. 速度曲线细节
    • animation-timing-function: 规定动画的速度曲线，默认是ease

在这里插入图片描述


  1. 代码演示

    steps 就是分几步来完成我们的动画

    <!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>Document</title>
    <style>
        div {
            width: 0;
            height: 30px;
            background-color: pink;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }
        
        @keyframes w {
            0% {
                width: 0;
            }
            100% {
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

应用：打字机效果

字体20px，分10步完成，一次打一个字。

        div {
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }

<body>
    <div>世纪佳缘我在这里等你</div>
</body>

因为div刚开始容纳不了那么多字，因此就掉下去了。

文字强制一行内显示 => white-space: nowrap;

溢出隐藏。

        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            background-color: pink;
            /* 文字强制一行内显示 */
            white-space: nowrap;
            /* steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者linear 了 */
            animation: w 4s steps(10) forwards;
        }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.92
Branch： branch04
commit description：a2.92（速度曲线细节）

tag：a2.92


18. example04——奔跑的熊大案例

在这里插入图片描述

这只熊的运动图片

image-20210105202617211

使用step动画，用一个小盒子，每次只能装一只熊，然后背景往后跑。

在这里插入图片描述

<!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>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        
        div {
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

image-20210105203624594

        div {
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            animation: bear .4s steps(8) infinite;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }

还需要小熊往前跑，可以追加动画。

元素可以添加多个动画， 用逗号分隔,，使用定位往前跑。

        body {
            background-color: #ccc;
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
            }
        }

但不在屏幕中间，去掉自身一半距离。

        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                margin-left: -100px;
            }
        }

优化

            100% {
                left: 50%;
                margin-left: -100px;
                transform: translateX(-50%);
            }

为啥不直接做成gif呢？

因为gif只有256种颜色，而png有1000多种颜色，对于复杂的图片，会更加漂亮。并且更方便控制动画速度等，后期方便维护。

参考：https://github.com/6xiaoDi/blog-CSS/tree/a2.93
Branch： branch04
commit description：a2.93（example04——奔跑的熊大案例）

tag：a2.93




（后续待补充）
溜_x_i_a_o_迪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 5875
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS3 动画专栏：@keyframes与animation的恋曲
kuyoru's blog
10-05 197
CSS3的动画功能是非常强大的，很多花里胡哨网页动画都可以利用CSS3样式来实现。 0.  CSS3的基础模型 了解掌握基础模型才能更加快速的去理解CSS3的具体工作方式 CSS3 模块 CSS3 被拆分为"模块"。旧规范已拆分成小块，还增加了新的。 一些最重要 CSS3 模块如下： 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 1.  transform:—()实现元素的自由变换 本专栏中涉及到的对元素的变形、2D3D转换均需要用到tra
CSS3新增的语法（三）【2D,3D,过渡，动画】
mwm2378的博客
03-31 1434
CSS3新增的语法（三）【2D,3D,过渡，动画】
CSS动画技术（css-animation）
最新发布
Zarathusa的博客
05-23 1239
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
2.css
qq_42743223的博客
02-12 2108
课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很.
CSS3之转换 、过渡 、动画
Andone_hsx的博客
01-15 809
1、转换 1、转换的简介 1、什么是转换 改变元素在页面中的形状，位置，大小，角度的一种效果 在页面中 允许 实现  1、2D转换 允许元素在x轴 和 y轴上做转换效果 2、3D转换 允许元素在x轴，y轴和z轴上做转换效果 2、转换属性 1、transform 属性：transform 取值：指定一组转换函数,多个转换函数之间用空格隔开 2、转换的原点 属性：trans
CSS快速掌握
CodeFlight
09-12 328
文章目录CSS 速记本单位相对长度绝对长度背景（background）background-sizebackground-imagebackground-originbackground-clip文本颜色文本对齐文本修饰文本大小写文本缩进字符间距单词间距空白处理垂直对齐文本换行文本溢出元素对齐技巧水平对齐元素水平居中对齐图片居中对齐左右对齐绝对定位方式float 方式垂直对齐使用 padding 对其中的元素进行垂直居中对齐水平&垂直居中使用 line-height 进行垂直居中使用 transfr
深入浅出 CSS 动画
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
CSS.4-字体图标,平面转换,渐变,空间转换,动画,移动端特点,百分比布局,Flex布局,移动适配,响应式
qq_54379580的博客
05-26 888
拖沓很久的尾巴来啦,跟某马学的. 一.字体图标 二.平面转换 三.渐变 四.空间转换 五.动画 六.移动端特点 七.百分比布局 八.Flex布局 九.移动适配 十.响应式
css3绘制2D宇宙星空元素背景动画特效
06-11
基于css3绘制的一款2D宇宙星空元素背景动画特效，有太阳、月球、地球、金星、流星雨等宇宙星空元素。
css3学习之2D转换功能详解
09-27
众所周知在css3中出现了许多新的特性，其中2D转换我觉的非常有意思，通过它我们能够对元素进行移动、缩放、转动、拉长或者拉伸，所以希望在这里和大家分享一下。有需要的朋友们可以参考借鉴，下面来一起看看吧。
68种动画效果的CSS3动画库vivify.css
12-13
Vivify.css是一款带68种动画效果的CSS3动画库。vivify.css动画库和Animate.css类似，为网页元素提供各种CSS3动画效果。vivify.css动画库内置了68种炫酷的CSS3动画效果。
随手记——css3 2D转换（transform）
01-08
css3 2D转换（transform） 位移（translate） 旋转（rotate） 转换中心点（transform-origin） 缩放（scale） 2D转换综合写法 正文 __start： 位移（translate） 语法 说明 transform:translate(x,y) 元素在x...
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图效果，需要的朋友参考下吧
Normalize.css简介及详解、使用
热门推荐
xiao廸要飞
08-30 4万+
文章目录什么是Normalize综述Normalize vs Reset如何使用 normalize.css结语相关阅读代码 什么是Normalize Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS
4.（css3布局）使用flex布局携程网首页案例
xiao廸要飞
01-12 1794
文章目录1. 携程网首页案例制作1.1 技术选型1.2 搭建相关文件夹1.3 设置视口标签以及引入初始化样式1.4 初始化样式1.5 模块名字划分1.6 常见flex布局思路1.7 背景线性渐变2. 代码实现2.1 search-index2.2 focus2.3 local-nav2.4 nav2.5 subnav-entry2.6 sales 1. 携程网首页案例制作 1.1 技术选型 方案：我们采取单独制作移动页面方案 技术：布局采取flex布局为主 1.2 搭建相关文件夹 参考：https
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
xiao廸要飞
07-26 810
文章目录1. 盒子模型（CSS重点）1.1 看透网页布局的本质1.2 盒子模型（Box Model）1.3 盒子边框（border）1.3.1 边框综合设置1.3.2 example011.3.3 盒子边框写法总结表1.3.3.1 example021.3.4 表格的细线边框1.3.4.1 example031.4 内边距（padding）1.4.1 内边距：1.4.2 设置1.4.2.1 example041.4.2.2 example051.4.3 课堂案例： 新浪导航1.4.4 内盒尺寸计算（元素
2. （css3布局）使用流式布局移动端JD首页案例
xiao廸要飞
01-12 768
文章目录1. 案例：京东移动端首页2. 技术选型3. 搭建相关文件夹结构4. 设置视口标签以及引入初始化样式5. 常用初始化样式6. 导航布局6.1 首行7. 二倍精灵图做法8. 图片格式8.1 DPG图片压缩技术8.2 webp 图片格式9. 下半部布局10. 移动端布局之流式布局总结 1. 案例：京东移动端首页 访问地址： m.jd.com 2. 技术选型 方案：采取单独制作移动页面方案 技术：布局采取流式布局 3. 搭建相关文件夹结构 images 背景图 upload 产品图 4.
vue3 使用animate.css 淡引淡出的动画
01-26
在Vue3中使用animate.css实现淡入淡出的动画，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了animate.css库。你可以通过在终端中运行以下命令来安装它： ```shell npm install animate.css ``` 2. 在你的Vue组件中，导入animate.css的样式文件。你可以在组件的`<style>`标签中添加以下代码： ```css @import 'animate.css'; ``` 3. 在你的模板中，使用Vue的过渡组件`<transition>`来包裹需要应用动画的元素。设置`name`属性为你想要使用的动画效果，例如`fade`。 ```html <transition name="fade"> <div v-show="isShow" class="box"></div> </transition> ``` 4. 在你的样式中，定义动画效果。你可以在组件的`<style>`标签中添加以下代码： ```css .fade-enter-active, .fade-leave-active { animation-duration: 1s; animation-fill-mode: both; } .fade-enter, .fade-leave-to { opacity: 0; } ``` 现在，当`isShow`为`true`时，元素将以淡入的动画效果显示；当`isShow`为`false`时，元素将以淡出的动画效果消失。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值