CSS(动画) 笔记 07

不修×蝙蝠

于 2024-08-28 17:34:02 发布

阅读量299

点赞数 11

文章标签： css html 前端笔记动画

本文链接：https://blog.csdn.net/m0_74977981/article/details/141642583

版权

一 . 秒变（鼠标接触）

div{

    width: 200px;

    height:200px;

    background: palegreen;

}



div:hover{

    height:100px;

    width:100px;

    opacity: 0.5;

    background: darkorange;

}

二.

1.过渡动画 transition 复合属性

①transition-property 指定html元素的哪个css属性及逆行平滑渐变处理

②transition-duration 指定平滑渐变持续的时间

③transition-timing-function 渐变的速度支持如下几个值：

ease

linear

ease-in

ease-out

div{
    width: 200px;
    height:200px;
    background: palegreen;
    transition-property: all;
    transition-duration:4s ;
    transition-timing-function: ease;
}
div:hover{
    height:100px;
    width:100px;
    opacity: 0.5;
    background: url(hh.jpg);
    
}

2. 帧动画 animation

animation-name 设置动画名称(配合@keyframes name使用)

animation-duration 执行持续时间

animation-timing-function 渐变的速度

animation-delay 执行前延迟时间

animation-iteration-count 执行次数(infinite无数次执行)

animation-direction 设置动画的方向（alternate交替）

@Keyframes name{

from|to|百分比{

属性1：值；

属性2：值；

}

@keyframes aaa{
    50%{
        height:100px;
        width:100px;
        opacity: 0.5;
        background: coral;
    }
    25%{
        background: red;
        border-radius: 50px;
    }
    100%{
        width: 200px;
        height:200px;
        background: palegreen; 
     
    }
}

div{
    width: 200px;
    height:200px;
    background: blueviolet;
    animation-name:aaa;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s; 
    animation-iteration-count: infinite;
    animation-direction: alternate;
   
}

3.一个有趣的动画

  <style>
        body{
    display: flex;
    align-items: center;
    height:100vh;
    justify-content: center;
    background: green;
          }

          span{
            font-size: 10vh;
            color:pink;
            font-weight: 600;
            margin:15px;
            animation: aaa 1s ease infinite alternate ; 
          }
          /* 默认开始 */
          @keyframes aaa{
            20%{
                color:aqua
            }
            50%{
                color: red;
                font-size: 20vh;
                text-shadow: 0 0 100px floralwhite;
            }

          }
          .container span:nth-child(1){
            animation-delay: 0.16s;
          }
          .container span:nth-child(2){
            animation-delay: 0.32s;
          }
          .container span:nth-child(3){
            animation-delay: 048s;
          }
          .container span:nth-child(4){
            animation-delay: 0.64s;
          }
          .container span:nth-child(5){
            animation-delay: 0.80s;
          }
          .container span:nth-child(6){
            animation-delay: 1s;
          }


    </style>
</head>
<body>
    <div class="container">
        <span>跳</span>
        <span>楼</span>
        <span>价</span>
        <span>8</span>
        <span>8</span>
        <span>8</span>
    </div>
    
</body>

不修×蝙蝠

关注

11
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS(动画) 笔记 07

①transition-property 指定html元素的哪个css属性及逆行平滑渐变处理。animation-iteration-count 执行次数(infinite无数次执行)animation-name 设置动画名称(配合@keyframes name使用)animation-direction 设置动画的方向（alternate交替）animation-timing-function 渐变的速度。animation-duration 执行持续时间。from|to|百分比{
复制链接

扫一扫