CSS动画

最新推荐文章于 2024-10-11 15:51:17 发布

一杯美式&

最新推荐文章于 2024-10-11 15:51:17 发布

阅读量28

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/2301_79371830/article/details/132656388

版权

渐变

线性渐变

属性：linear-gradient(开始位置角度，起始颜色，终止颜色 )在这里插入代码片
开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top\bottom（可组合使用）
角度：渐变终止方向的角度，当开始位置为数值或百分比的时候可用
起始颜色
终止颜色
重复渐变：将属性修改为：repeating-linear-gradinet(

 <style>
 div{
 width: 300px;
 height: 100px;
 margin: 50px;
 padding: 50px;
 border: 5px groove rgba(200,60,30,0.8)
 }
 .div1{
 background-image: linear-gradient(red,blue)
 }
  </style>
</head>
<body>
    <div>
        <div class="div1"></div>
    </div>
    </body>

径向渐变

径向渐变（放射渐变）
属性：radial-gradient（形状、发散方向、起始颜色、终止颜色）
形状：ellipse（椭圆）/ circle（圆形）
发散方向：属性值可以是left、right、top、bottom、center（可组合使用）
大小（半径）：属性值可用像素或关键字表示
closest-side：圆心到距离最近的边
farthest-side：圆心到距离最远的边
closest-corner：圆心到距离最近的角
farthest-corner：圆心到距离最远的角
起始颜色
终止颜色
重复的径向渐变：repeating-radial-gradinet()

<style>
        div{
            width: 400px;
            height: 200px;
            background-color: pink;
            margin: 40px 0;
        }
                                                         
        .div2{
            /* 径向渐变 */
            /* background: radial-gradient(red,yellow,blue); */
            background: radial-gradient(circle,red,yellow,blue);
            /* background: radial-gradient(circle at top left,red,yellow,blue); */
            /* background: repeating-radial-gradient(circle at top,red 40px,yellow 60px); */
        }
    </style>
</head>
<body>
    <div>
        <div class="div1"></div>
    </div>
    <div>
        <div class="div2"></div>
    </div>
    <div>
        <div class="div3"></div>
    </div>
    <div>
        <div class="div4"></div>
    </div>
    <div>
        <div class="div5"></div>
    </div>
</body>

平移

translate
第一个值是横向偏移量
第二个值是纵向偏移量

<style>
   .div1:hover{
     transform: translate(60px,100px); 
        }
        </head>
<body>
    <div class="box1">
        <div class="div1">平移</div>
        <!-- 平移之后占位状态不变 -->
        <p>22222</p>
    </div>

缩放

缩放默认值是 1 小于1就是缩小，大于1 就是放大

 <style>
 .div3:hover{
             缩放 默认值是 1 小于1就是缩小，大于1 就是放大  
             transform: scale(0.6); 
            background-color: aquamarine;
            /* 改变位置 
            top left bottom right center 
            两两组合使用
            */
            transform-origin: right center;
            transform: translateY(50%) scale(0.5,0.5);
            transition: 5s;
        }
          </style>
</head>
        <div>
        <div class="div3">缩放</div>
    </div>

动画

 <style>
   .div5:hover{
            /* animation: name  2s linear; */
            transform: matrix(1 ,0.2 ,0 ,1 ,0 ,0);
        }

        /* 关键帧 */
        @keyframes name {

            10% {
                width: 200px;
            }
            20%{
                width: 300px;
            }
            40%{
                width: 500px;
            }
            100%{
                width: 200px;
            }
        }
          </style>
</head>
 <div>
        <div class="div5"></div>
    </div>

过渡

 <style>
        div{
            width: 400px;
            height: 200px;
            background-color: pink;
            margin: 40px 0;
        }
        .div1{
            /* 
                过渡：
                第一个值是属性 一般是all，也可以是其他属性名称
                第二个值是时间 单位是时间单位 通常是s  
                第三个值是 过渡速度 linear 匀速

                可以只写时间，其他两个值默认填充 all 和 linear
            */
            transition: all 2s linear;
        }
    </style>
</head>
<body>
    <div>
        <div class="div1"></div>
    </div>