Web前端-css3_4--3D动画

最新推荐文章于 2024-07-24 20:47:06 发布

yanghainan0318

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量355

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/yanghainan0318/article/details/104416885

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3D动画

基本引入

必须的两个要素 1 动画名 animation-name
2 动画的执行时间 animation-duration: 2s;

div:hover {
        /*1 动画名 */
        animation-name: mingxuanbianpangle;
        /*2 动画的执行时间*/
        animation-duration: 2s;
    }

定义动画

第一种 form.....to...

 @keyframes mingxuanbiangaole {
        /*分阶段*/
        /*开始*/
        form{
            height: 200px;
        }
        /*最终结束*/
        to{
            height: 500px;
        }
    }

第二种百分比

   @keyframes mingxuanbianpangle {
        /*分阶段  百分比*/
        0%{
            width: 200px;
        }
        50%{
            width: 1500px;
        }
        100%{
            width: 200px;
        }

    }

动画执行的曲线 animation-timing-function: ease-in;

动画何时开始 animation-delay: 2s;

动画的执行次数 animation-iteration-count: 5;
无限执行 animation-iteration-count: infinite;

动画执行的是否逆向执行 animation-direction: normal;
从最终的结果向最初的效果执行 animation-direction: reverse;
交替执行初始变到最终，在由最终变到初始效果 animation-direction: alternate;
交替执行就是第一次不一样从最终效果开始执行 animation-direction: alternate-reverse;

动画最终的状态
默认：动画执行完成之后的最终结果是恢复到初始的状态 animation-fill-mode: none ;
保持动画最终的效果，但是和执行重复次数是无线重复的样式冲突，此时最终状态不生效 animation-fill-mode: forwards ;

动画是否发执行
表示执行动画但是一般我们对这个样式是通过js 操作 animation-play-state: running;

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #f00;
    }

    div:hover {

        animation-name: mingxuanbiangaole;

        animation-duration: 2s;
        
        animation-timing-function: ease-in;
     
        /*animation-delay: 2s;*/

        animation-iteration-count: 5;
       
        animation-direction: reverse;     
      
        animation-fill-mode: none ; 
        animation-fill-mode: forwards ;
       
        animation-play-state: running;*/
    }
    
    @keyframes mingxuanbiangaole {
       
        form{
            height: 200px;
        }
        /*最终结束*/
        to{
            height: 500px;
        }
    }
    
</style>

动画开始暂停设置

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: #f00;
        animation-name: mingxuanbiangaole;
        animation-duration: 2s;
        animation-iteration-count: 5;
        animation-direction: alternate;
        animation-fill-mode: forwards ;
    }


    /*定义动画*/
    @keyframes mingxuanbiangaole {
        /*分阶段*/
        /*开始*/
        form{
            width: 200px;
        }
        /*最终结束*/
        to{
            width: 500px;
        }
    }
</style>


<body>
<div>我是动画</div>
<button>开始</button>
<button>暂停</button>
</body>

<script>
    var mydiv = document.getElementsByTagName("div")[0]
    var mybtns = document.getElementsByTagName("button")
    var start1 = mybtns[0]
    var pause = mybtns[1]

    start1.onclick = function () {
        mydiv.style.animationPlayState = "running"
        console.log(1);
    }

    pause.onclick = function () {
        mydiv.style.animationPlayState = "paused"
        console.log(2);
    }

</script>

css3的

width: 100%;

min-width: 700px;

max-width: 1300px;

.b{
    /*width: 200px;*/
    width: 100%;
    min-width: 700px;
    max-width: 1300px;
    background-color: #ff0;
}

让行内元素设置宽高有几种方式：
1:直接改变状态
     display ：行内块   块
2：隐式改变状态（脱离文档流）
   浮动：float
   定位：position

兼容写法

div{
    width: 500px;
    height: 500px;
    /*谷歌*/
    -webkit-background-size:100px;
    background-size: 100px;
}

yanghainan0318

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web前端-css3_4--3D动画

3D动画基本引入必须的两个要素 1 动画名 animation-name 2 动画的执行时间 animation-duration: 2s;div:hover { /*1 动画名 */ an...
复制链接

扫一扫

专栏目录