CSS3实现动画效果的案例

发布时间:2020-08-31 14:39:52 作者:小新
来源:亿速云 阅读:159

这篇文章将为大家详细讲解有关CSS3实现动画效果的案例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

举例:

<!DOCTYPE HTML>
<html>
<head>   
    <title>一个绚丽的CSS3动画效果</title>
    <style  type="text/css">
        body{background:#000;}
        h2
        {
            text-align:center;
            color:#fff;
            font-size:48px;
            text-shadow: 1px 1px 1px #ccc,
                       0 0 10px #fff,
                       0 0 20px #fff,
                       0 0 30px #fff,
                       0 0 40px #ff00de,
                       0 0 70px #ff00de,
                       0 0 80px #ff00de,
                       0 0 100px #ff00de,
                       0 0 150px #ff00de;
            transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;  
            -ms-transform-style: preserve-3d;             
            -o-transform-style: preserve-3d;              
            animation: run  ease-in-out 9s infinite;
            -moz-animation: run  ease-in-out 9s infinite ; 
            -webkit-animation: run  ease-in-out 9s infinite;   
            -ms-animation: run  ease-in-out 9s infinite;   
            -o-animation: run  ease-in-out 9s infinite;
          }
        @keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
        @-webkit-keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
        @-moz-keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
        @-ms-keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
    </style>
</head>
<body>
    <h2>亿速云</h2>
</body>
</html>

关于CSS3实现动画效果的案例就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. css3实现动画效果的方法
  2. 怎么使用css3实现魔方的动画效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:CSS中取消下划线样式的方法是什么

下一篇:仿ElementUI实现一个Form表单的实现代码

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》