CSS笔记----6

芝奥小婷

已于 2024-07-30 19:22:53 修改

阅读量256

点赞数 10

文章标签：笔记

于 2024-07-22 20:40:49 首次发布

本文链接：https://blog.csdn.net/weixin_70903041/article/details/140618989

版权

动画

过渡

动画的过渡:

transition-property: 指定要过渡的属性名称,多个属性使用逗号隔开

transition-duration: 整个过渡过程所需要的时间,单位s/ms

transition-timing-function: 过渡函数,即如何运动,可选值

ease: 先加速再减速

linear: 匀速

ease-in: 加速

ease-out: 减速

ease-in-out: 先加速再减速

可以使用transition 属性来设置多个属性的值,减少代码量,提高可读性

语法:

transition: 属性,属性,.....duration delay function 多个属性之间加逗号

<head>
    <style>       
         div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 50px;
         }

         /* 设置过渡 */
         div:hover{
            width: 400px;
            height: 400px;

            /* transition-property: width,height;
            transition-duration: 3s;
            transition-timing-function: linear;
            transition-delay: 2s; */
            transition: width ,height, 3s 2s linear;
         }

    </style>
</head>
<body>
    <div>

    </div>
</body>

动画

动画
1.动画和过渡类似，都是可以实现一些动态的效果；
2.不同的是过渡需要在某个属性发生变化时才会触发；
3.动画可以自动触发动态效果

<head>
    <style>        
        #outer
        {
            width: 800px;
            height: 500px;
            background-color: aqua;
            margin: 0 auto;
        }

        #inner{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 由于动画(关键帧)设置的是偏移量的改变,因此需要开启该元素的相对定位 */
            position: relative;
            /* 设置动画的各个属性 */
            animation-name: run;                     /*用于指定要使用的关键帧的名字*/
            animation-duration: 3s;                  /*动画执行的整个过程需要的时间*/
            animation-timing-function: ease-in;      /*动画如何运行*/
            animation-delay: 2s;                    /*动画的延迟时间*/
            animation-iteration-count: 2;           /*动画从初始位置到结束位置执行的次数*/
            animation-direction: normal;            /*动画的执行方向  normal reverse  alternate alternate-reverse */
            animation-fill-mode: forwards;          /*动画的填充(结束后停止的位置) forwards,backwards,both,none*/
                    
            
            /* 使用一个属性animation,来设置上述多个属性的值 */
            /* 关键帧 运动时间 运动速度曲线 延迟 次数 运动方向 运动的填充 */
            animation: run 10s cubic-bezier(.87, .28, .91, .36) 2s infinite reverse forwards;
        }
        /* 设置关键帧     0%相当于from    100%相当于to   百分比可以是任意0~100之间任意的整数 */
        @keyframes run {
  /*from*/0%{
                left: 0px;
                top: 0px;
            }
            15%{
                left: 350px;
                top: 0px;
            }

            30%{
                left: 700px;
                top: 0px;
            }

            50%{
                left: 700px;
                top: 200px;
            }

            75%{
                left:400px ;
                top: 200px;
            }

      /*to*/100%{
                left: 0px;
                top: 200px;
            }

        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

变形

平移

变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移

旋转

-旋转

rotateX(度数): 以x轴为轴心,进行旋转 deg是度数 turn圈 360deg=1turn 一个圆是一圈

rotateY(度数): 以y轴为轴心,进行旋转

rotateZ(度数): 以z轴为轴心,进行旋转

缩放

-缩放

scaleX(倍数): 水平方向(即X轴方向)缩放

scaleY(倍数): 垂直方向

scaleZ(倍数): z轴方向缩放

scale(倍数): 相当于scale(x)和scale(y)的缩放

芝奥小婷

关注

10
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记----6

动画的过渡:transition-property: 指定要过渡的属性名称,多个属性使用逗号隔开transition-duration: 整个过渡过程所需要的时间,单位s/mstransition-timing-function: 过渡函数,即如何运动,可选值ease: 先加速再减速linear: 匀速ease-in: 加速ease-out: 减速ease-in-out: 先加速再减速。
复制链接

扫一扫