关键帧动画(animation)、flex总结、列表编号

older-black

已于 2022-11-15 00:08:45 修改

阅读量207

点赞数 2

文章标签：动画 css3 css

于 2022-08-24 13:35:38 首次发布

本文链接：https://blog.csdn.net/weixin_48879122/article/details/126502306

版权

1.关键帧动画(animation)

div{
    width: 200px;
    height: 200px;
    /* 使用自己自定义的动画名字 */
    animation-name: test;
    /* 设置动画执行一次的时间，默认单位s ，0.5s可以省略0，直接写.5 */
    animation-duration: .5s;
    /* 设置动画的执行速率 */
    animation-timing-function: linear;
    /* 设置动画的延迟时间，默认单位s*/
    animation-delay: 2s;
    /* 设置动画的执行次数，默认次数1，无穷是infinite */
    animation-iteration-count: infinite;
    /* 设置动画的执行方向  */
    animation-fill-mode:reverse: reverse;
    
}
    /* 设置关键帧动画 */
@keyframes test{
            /* 第一种设置动画的方式 */
            from{
                width: 200px;
            }
            to{
                width: 300px;
            }
        /* 第二种设置动画的方式 */
             0%{
                width: 200px;
            }
            50%{
                width: 500px;
            }
            100%{
                width: 200px;
            }
      
}

在设置关键帧动画中话使用from和to只能设置开始的时候的样式和结束时候的样式，使用百分比则能控制元素在动画在每一步的改变。

animation-timing-function与transition-timing-function的值是一样的样式，需要可以翻阅(14条消息) transform、transition、线性渐变、背景图片扩展、滤镜、元素阴影、文本阴影、字体样式引入_older-black的博客-CSDN博客

animation与transition最大的不同在于，animation可以设置一个多帧的动画，而transition则只能设置两帧的动画;

2.列表编号

<body>
    <div>
        大标题
        <p>二级标题</p>
        <p>二级标题</p>
        <p>二级标题</p>
    </div>
    <div>
        大标题
        <p>二级标题</p>
        <p>二级标题</p>
        <p>二级标题</p>
    </div>
    <div>
        大标题
        <p>二级标题</p>
        <p>二级标题</p>
        <p>二级标题</p>
    </div>
</body>

</style>
    /* 添加一个计数器 */
div {  
            counter-increment: myCount;
            /* 重置p的计数器 */
            counter-reset: Count;
    }

    /* 给每个div的前面加上列表标签 */
div::before {
         content: counter(myCount)'. ';
         font-size: 40px;
         color: red;
      }

    /* 添加一个计数器 */
p{
        counter-increment: Count;
    }


/* 给每个p的前面加上列表标签 */
p::before {
          content: counter(myCount)'.' counter(Count)'. ';
          font-size: 20px;
          color: rgb(243, 185, 185);
      }
</style>