欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css3实现动画效果

程序员文章站 2022-03-19 09:57:34
...

Transition 动画，在两个帧之间切换

► transition-property: 指定对 HTML 元素的哪个 CSS 属性进行平滑渐变处理。 该属性 可以指定 background-color、 width、 height 等各种标准的 CSS 属性。 all代表所有属性
► transition-duration: 指定属性平滑渐变的持续时间。
► transition-timing-function: 指定渐变的速度 。
该部分支持如下几个值。
• ease: 动画开始时较慢，然后速度加快，到达最大速度后再减慢速度。
• linear: 线性速度。动画开始时的速度到结束时的速度保持不变。
• ease-in: 动画开始时速度较慢，然后速度加快。
• ease-out: 动画开始时速度很快，然后速度减慢。
• ease-in-out: 动画开始时速度较谩，然后速度加快，到达最大速度后再减慢速度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     img#targin{
        position: absolute;
        transition:left 2s linear;
        transition:top 2s linear;
     }
    </style>
</head>
<body>
    <img src="./jz-img1.jpg" alt="" id="targin">
    <script>
        var target = document.getElementById("targin");
        targin.style.left="0px";
        targin.style.top="0px";
        document.onmousedown = function(evt){
            target.style.left=evt.pageX+"px";
            target.style.top=evt.pageY+"px";
        }
    </script>
</body>
</html>

也可以写在*里，所有动画效果的都采用平滑渐变，显得自己页面很有科技感。

*{
	margin:0;
	padding:0;
	transitian:all 2s linear;
}

Animation 动画可以指定多个关键帧

► animation-name: 指定动画名称。该属性指定一个已有的关键帧定义。
► animation-duration: 指定动画的持续时间。
► animation-timing-function: 指定动画的变化速度。
► animation-delay: 指定动画延迟多长时间才开始执行。
► animation-iteration-count: 指定动画的循环执行次数 。
animation: 这是一个复合属性。该属性的格式为： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count, 使用该属性可以同时指定 animation-name、 animation-duration 、 animation-timing-function、 animation-delay 和 animation-iteration-count 等属性。

**／＊指定动画的循环无限次＊／ 
animation-iteration-count: infinite;** 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @keyframes li{
            0%{
                left: 200px;
                top:0px;
                /* 旋转加缩放 */
                transform: rotate(0deg) scale(1);
            }
            40%{
                left: 450px;
                transform: rotate(40deg) scale(0.4);
            }
            60%{
                left: 990px;
                transform: rotate(180deg) scale(0.9);
            }
            100%{
                left: 200px;
                transform: rotate(0deg) scale(1);
            }
        }
     img#targin{
        position: absolute;
        left: 200px;
     }
     .anime{
         animation-name: li;
         /* 整个动画执行时间 */
         animation-duration:3s;
         /* 无限次循环 */
         animation-iteration-count:infinite;
     }
    </style>
</head>
<body>
    <img src="./jz-img1.jpg" alt="" id="targin">
    <button οnclick="document.getElementById('targin').className='anime';">开始动画</button>
    <button οnclick="document.getElementById('targin').className='';">关闭动画</button>
</body>
</html>

获得html中id为id名字的元素，给他加上class=“anime”的样式；
document.getElementById(“id名字”).className=“anime”;

获得html中id为id名字的元素，给他加上class=“”的样式，也就是空样式；
document.getElementById(“id名字”).className="";

<button οnclick="document.getElementById('targin').className='anime';">开始动画</button>
<button οnclick="document.getElementById('targin').className='';">关闭动画</button>

图片自己找一张替代，最好是动图.gif格式，自己多动手，可以实现很多简单动画。

上一篇： EXCMS 0day (过程精彩)

下一篇： 要等iPhone 15？郭明錤称Phone相机未来2年都不会有重大升级

推荐阅读