2025-2-5-动画

动画



示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        /*动画*/
        width: 100px;
        height: 100px;
        background-color: red;
        /*animation 第一个值是要写定义的动画名字
        第二个值是动画每次循环持续的时间
        第三个值是动画改变的速度
        第四个值是页面开始到执行的时间
        第五个值是循环次数，不写默认为1
        第六个值不写就是默认一直正向播放*/
        animation: col 3s linear 2s infinite;
    }
    /*：hover可以指定在鼠标停留时的颜色，这里用作动画启动*/
    .box:hover{
        /*background-color: blue;*/
        animation-play-state: paused;
    }
    @keyframes col {
        0%{
            width: 100px;
            background-color: red;
        }
        50%{
            width: 200px;
            background-color: yellow;
        }
        100%{
            width: 100px;
            background-color: green;
        }

    }
    /*呼吸效果
    这是一个示例，主要就是用到了animation第六个属性，让它能够有回复效果，不是直接变回初始颜色*/
    .box1{
        width: 100px;
        height: 100px;
        background-color: #2b92d4;
        border-radius:5px;
        box-shadow:0 1px 2px rgba(0,0,0,.3);
        animation:b 2.7s ease-in-out infinite alternate;
    }
    @keyframes b{
        0%{
            /*opacity代表透明度*/
            opacity:0.2;
            box-shadow:0 1px 2px rgba(255,255,255,0.1)
        }
        50%{
            opacity: 0.5;
            box-shadow:0 1px 2px rgba(18,190,84,0.76)
        }
        100%{
            opacity: 1;
            box-shadow:0 1px 30px rgba(59,255,255,1)
        }
    }
</style>
<body>
<div class="box"></div>

<div class="box1"></div>
</body>
</html>

这是直接粘贴在随笔上的示例，之前搞得一个盒子模型学习会影响到博客页面，直接不能看了，希望这个不会影响到

Title
posted @ 2025-02-12 21:08  liu某人  阅读(8)  评论(0)    收藏  举报