css3实现动画效果_htmlcss电话号码动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40641206/article/details/104161225

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格式，自己多动手，可以实现很多简单动画。