前端CSS3基础2（过渡、动画、多列布局）

最新推荐文章于 2024-07-26 11:48:42 发布

欧买噶噶

最新推荐文章于 2024-07-26 11:48:42 发布

阅读量248

点赞数 7

分类专栏：前端CSS基础文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_51752841/article/details/139010316

版权

前端CSS基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端CSS3基础2（过渡、动画、多列布局）

CSS3 过渡
CSS3 动画
CSS3 多列布局

CSS3 过渡

在这里插入图片描述

CSS3 动画

在这里插入图片描述

举例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 1000px;
            height: 100px;
            border: 1px solid black;
        }

        /* 定义一个动画（定义一组关键帧）*/
        @keyframes  wangyoudog  {
            /* 第一帧 */
            /* from{

            } */
            20%{
                background-color: blueviolet;
            }
            50%{
                background-color: blue;
            }
            /* 最后一帧 */
            to{
                transform: translate(900px) rotate(360deg);
                /* 从第一帧慢慢变直到最后一帧变为红色 */
                background-color: red;
                border-radius: 50%;

            }
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            /* 应用动画到元素 */
            animation-name: wangyoudog ;
            /* 动画持续时间 */
            animation-duration: 3s;
            /* 动画延迟时间 */
            animation-delay: 0.5s;
        }


    </style>

</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>    
</body>
</html>

在这里插入图片描述

动画案例-自行车手

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动画案例</title>
    <style>
        div{
            width: 130px;
            height: 130px;
            background-image: url(../资料/图片/bike.png);
            margin: 0 auto;
            margin-top: 100px;
            /* 为什么31 一共32张照片，减去第一个等于31个 */
            animation:bike 1s steps(31) infinite;
        }
        @keyframes bike 
        {
            from{}
            to{
                background-position: 0px -4030px;
                        }
        }
            
    </style>
</head>
<body>
<div></div>    
</body>
</html>