css 动画码农

animation: 動畫名稱持續時間

@keyframe 動畫名稱 {
    from {
        CSS 屬性: 值
    }
    to {
        CSS 屬性: 值
    }
}
    @keyframes active {
        0% {
            opacity: 0;
            transform: scale(0);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

　　2. transition: CSS屬性持續時間;

	div{
		     200px;
		    height: 200px;
		    margin: 100px auto;
		    background-color: #336699;
		    
		    /*transition:width 1s;*/
		    transition:all 1s;
		    /*transition: height 1s;*/
		}
		div:hover{
		     300px;
		    height: 400px;
        }

3.html简代demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1 {
        border: 1px solid blue;
        width: 100px;
        height: 40px;
        animation: active 1s linear 1;
    }

    @keyframes active {
        0% {
            opacity: 0;
            transform: scale(0);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }


    #c1:checked~.box2 {
        margin-left: 50px;
        display: block;
        visibility: hidden;
        opacity: 0;
    }

    .box2 {
        margin-left: 0px;
        height: 100px;
        width: 100px;
        background-color: #0a0;
        transition: 1s -.3s linear;
        visibility: visible;
        opacity: 1;
    }
</style>

<body>
    <button onclick='toggle()'>change</button>
    <div class="box1"></div>

    <br />
    <input id="c1" type="checkbox">
    <br />
    <br />
    <div class="box2"></div>
</body>

</html>

<script>
    function toggle() {
        curr = document.querySelector('div').style.display
        if (curr == 'display' || curr == '') {
            document.querySelector('div').style.display = 'none'
        } else {
            document.querySelector('div').style.display = ''
        }
    }
</script>

1:animation: 動畫名稱持續時間@keyframe 動畫名稱 { from { CSS 屬性: 值 } to { CSS 屬性: 值 }} @keyframes active { 0% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); } }

2:transition: CSS屬性持續時間;div{ 200px; height: 200px; margin: 100px auto; background-color: #336699; /*transition:width 1s;*/ transition:all 1s; /*transition: height 1s;*/}div:hover{ 300px; height: 400px; }

本店所有软件都可以修改定制，详情请咨询店家

人生旅途，边走边看...

相关阅读:
LightGBM原理与实践简记
关于博客迁移
关于ModuleNotFoundError: No module named 'conda._vendor.tqdm'的解决方法（macos）
[科普视频] 植被覆盖度(fCover)科普视频制作
[基金评审] 2022年青年基金与地区基金评审感悟
如何快速解决集群异常和机器性能波动
中科大脑知识图谱平台建设及业务实践
GraphX 图计算实践之模式匹配抽取特定子图
隐藏在 Nebula Graph 背后的星辰大海
leetcode297

原文地址：https://www.cnblogs.com/dming4/p/15245651.html

css 动画 码农

css 动画码农