CSS3提供的Transition动画

最新推荐文章于 2024-09-30 23:36:44 发布

WYG2020

最新推荐文章于 2024-09-30 23:36:44 发布

阅读量176

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/wyg2020/article/details/104162986

版权

transition-property:指定对HTML元素的哪个CSS属性进行平滑渐变处理。
transition-duration:指定属性平滑渐变的持续时间。
transition-timing-function:指定渐变的速度:
ease:动画开始时较慢，然后速度加快，到达最大速度后在减速。
linear:线性速度。
ease-in:动画开始时速度较慢，然后速度加快。
ease-out:动画开始时速度很快，然后速度减慢。
ease-in-out:动画开始时速度很慢，然后速度加快，到达最大速度后再减慢速度。
cubic-bezier(x1,y1,x2,y2):通过贝济埃曲线来控制动画的速度。
transition-delay:指定延迟时间。

鼠标移动到元素上时，背景颜色渐变：

<!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 type="text/css">
        div{
            width: 400px;
            height: 50px;
            border: 1px solid black;
            background-color: brown;
            padding: 10px;
            transition: background-color 4s linear ;
        }
        div:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>煞风景卡是否</div>
</body>
</html>

每次按下鼠标时，即可看到图片慢慢的漂浮过来：

<!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#target{
            position: absolute;
            transition: left 5s linear,top 5s linear;
        }
    </style>
</head>
<body>
    <img src="logo13.jpg" id="target">
    <script type="text/javascript">
        var target = document.getElementById("target");
        target.style.left  = "0px";
        target.style.top  = "0px";
        document.onmousedown = function(evt)
        {
            target.style.left  = evt.pageX+"px";
            target.style.top  = evt.pageY+"px";
        }
    </script>
</body>
</html>