动画效果----webkit-animation-----动画背景变化transition:background-color 1s linear;

最新推荐文章于 2024-08-03 17:33:50 发布

小白咚

最新推荐文章于 2024-08-03 17:33:50 发布

阅读量44

点赞数

文章标签： webkit 前端

本文链接：https://blog.csdn.net/weixin_44438307/article/details/133022965

版权

<!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>
    /* 在css中，@keyframes规则可以使用来创建动画，创建动画是通过逐步改变从一个CSS样式到另一个CSS样式，在动画过程中，您可以更改CSS样式的设定多次，指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同，0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

@keyframes规则是css3中新增规则，目前主流浏览器都支持该规则(加浏览器对应的前缀)，但不兼容IE 9以及更早版本的浏览器 */
    div{
        background-color: red;
    }
    @-webkit-keyframes mycolor {
        0%{
            background-color: red;
        }
        40%{
            background-color: royalblue;
        }
        70%{
            background-color: salmon;
        }
        100%{
            background-color: seagreen;
        }
    }
    /* 鼠标滑过--开始动画  定义，时间，效果*/
    div:hover{
        -webkit-animation: mycolor 5s linear;
    }
</style>
<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">
    <title>Document</title>
    <style>
        div{
            background-color: blueviolet;
            transition: background-color 1s linear;
        }
        div:hover{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>动画背景颜色变换</div>
</body>
</html>

小白咚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画效果----webkit-animation-----动画背景变化transition:background-color 1s linear;

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
复制链接

扫一扫