HTML5基础加强css样式篇（animation简写，控制多个动画，动画帧简写）（三十二）

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量4.6k 收藏 2
点赞数 2
分类专栏： HTML5基础篇 文章标签： html5 css 动画 经验 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010853130/article/details/69258659
版权

1.animation简写例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;
                     /* 动画的名字，播放时间，延时时间，动画效果，播放次数，播放顺序*/
            animation: anim2 3s 2s linear infinite alternate;

        }
        /*当鼠标悬浮在.box时，暂停播放动画*/
        .box:hover {
            animation-play-state: paused;
        }

        @keyframes anim2 {
            0%{ 
                background: url("img/1.png") no-repeat;
                background-size: 100%;
            }
            50%{
                background: url("img/2.png") no-repeat;
                background-size: 100%;
            }
            100%{
                background: url("img/3.png") no-repeat;
                background-size: 100%;
            }
        }



    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>

2.动画应用：

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box-3d{

            width: 200px;
            height: 200px;
            /*开启3D*/
            transform-style: preserve-3d;

            margin: 200px auto;

            position: relative;

            /*设置3D盒子的变换中心点*/
            transform-origin: center center -100px;

            /*transform: rotateX(15deg) rotateY(15deg);*/

            animation: anim1 10s linear infinite alternate;

        }

        @keyframes anim1 {
            0%{
                transform: rotateX(0deg) rotateY(0deg);
            }

            100%{
                transform: rotateX(360deg) rotateY(360deg);
            }
        }



        .box{
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 36px;

            position: absolute;
        }
        .box1{  background-color: rgba(0, 0, 0, .2); top: -200px;
            transform-origin: bottom;
            transform: rotateX(90deg)}
        .box2{  background-color: rgba(255, 0, 0, .2); left: 200px;
            transform-origin: left;
            transform: rotateY(90deg)
        }
        .box3{  background-color: rgba(0, 255, 0, .2); top: 200px;
            transform-origin: top;
            transform: rotateX(-90deg)

        }
        .box4{  background-color: rgba(0, 0, 255, .2); left: -200px;
            transform-origin: right;
            transform: rotateY(-90deg)
        }
        .box5{  background-color: rgba(255, 255, 0, .2);
            transform: translateZ(-200px)
        }
        .box6{  background-color: rgba(0, 255, 255, .2);}

    </style>
</head>
<body>

<div class="box-3d" id="box3d">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
</div>


</body>
</html>

3,控制多个动画：已，分割即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            animation: anim2 3s 2s linear infinite alternate, anim3 3s;

        }
        /*当鼠标悬浮在.box时，暂停播放动画*/
        .box:hover {
            animation-play-state: paused;
        }

        @keyframes anim2 {
            0%{
                background: url("img/1.png") no-repeat;
                background-size: 100%;
            }
            50%{
                background: url("img/2.png") no-repeat;
                background-size: 100%;
            }
            100%{
                background: url("img/3.png") no-repeat;
                background-size: 100%;
            }
        }

        @keyframes anim3 {
            10%{
                border: 10px solid red;
            }
            50%{
                border: 50px solid blue;
            }
        }



    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>


4.动画帧简写： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            /* .box 默认样式 */
            margin: 200px 0 0 200px;
            width: 200px;
            height: 200px;
            background-color: orange;

            animation: anim2 3s linear infinite alternate;

        }
        /*当鼠标悬浮在.box时，暂停播放动画*/
        .box:hover {
            animation-play-state: paused;
        }

        @keyframes anim2 {
            /*使用,设置各帧的相同样式 0%{} 和 90{} 使用相同样式*/
            0%, 90%{
                background: url("img/1.png") no-repeat;
                background-size: 100%;
            }
            50%{
                background: url("img/2.png") no-repeat;
                background-size: 100%;
            }
            100%{
                background: url("img/3.png") no-repeat;
                background-size: 100%;
            }
        }





    </style>
</head>
<body>

<div class="box"></div>

<script type="text/javascript">
</script>
</body>
</html>





咸鸭蛋炒饭
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS3 -- 简写animation
05-10 183
@-webkit-keyframes 'buttonLight' { 0%,50%,100% { opacity:1;} 25%,75%{ opacity:0;} } a.flash{ -webkit-animation-name: "buttonLight"; /*动画名称，需要跟@keyframes定义的名称一致*/ ...
css animation 简写和参数
weixin_30237281的博客
08-27 2683
转载于:https://www.cnblogs.com/fan-fan/p/4764000.html
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 1932
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
animation简写属性总结
qq_37142399的博客
05-14 113
关于animation简写各参数说明
章鱼no丸子
08-23 8943
animation: toOpacity 8s 2s infinite both; animation: 1s .5s linear forwards vanis, 1s 1.5s linear toBig;依次为动画名字， 动画播放时间，延迟时间，播放次数，both：设置对象状态为动画结束或开始的状态，结束时状态优先依次为动画播放时间，延迟时间， 播放方式，动画结束时的状态（如果是reverse则
css-动画animation
qq_39111074的博客
08-25 950
animation动画属性的使用方法 步骤一：定义动画 @keyframes 动画名称 {} @keyframes 动画名称 { 0% {} 70% { ··· } 100% { ··· } } 里面的百分比是定义的时间节点，定义这个时间下元素的状态， 例如动画总时间为 2秒，则0%代表初始时间，70%代表 2S * 70% = 1.4s 时，100% 代表动画结束时间 步骤二：使用动画 在要使用动画的元素里面添加animation属性 可以分开写，也可以简写 animation是综合写法：顺序为如下： a
CSS3 简写animation
09-25
关键贞的动画效果如果一样，可以将关键贞的百分比用逗号隔开，然后再写效果
基于CSS3 animation动画属性实现轮播图效果
09-24
animation属性是一个简写属性，它可以合并设置多个与动画相关的属性，如animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction。...
CSS3 Animation文字动画特效
06-24
这个属性是一个简写属性，可以设置多个与动画相关的属性，如`animation-name`、`animation-duration`、`animation-timing-function`等。例如： ```css .myText { animation: fadeIn 2s ease-in-out; } ``` 这段...
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
05-23
`animation`属性是一个简写属性，可以设置多个动画相关的属性，如`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`...
Animation动画详解
weixin_52274216的博客
03-02 1427
一、介绍 8个属性： 1、animation-name：指定要绑定到选择器的关键帧的名称。 2、animation-duration：定义动画完成一个周期需要多少秒或毫秒(动画持续时间) 3、animation-timing-function：指定动画将如何完成一个周期。 4、animation-delay：定义动画什么时候开始。 5、animation-iteration-count ：定义动画应该播放多少次。 6、animation-direction：定义是否：循环交替-反向播放动画。 7、anim.
CSS3 动画
weixin_41909678的博客
07-07 290
动画（animation） 可通过设置多个节点来精确控制一个或一组动画，常用来实现较复杂的动画效果 相较于过渡，动画可以实现更过的变化，更多控制，连续自动播放等效果 制作动画分为两步： 先定义动画 在使用（调用）动画 定义动画 keyframes 类似于定义类选择器 /*keyframes 关键帧*/ @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px; } }
CSS3 animation（动画）属性详解
qq_40891322的博客
11-19 1263
CSS3 animation（动画）属性详解 1.语法 简写为：animation: name duration timing-function delay iteration-count direction fill-mode; @keyframes 规定 @keyframes 动画的名称。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规
动画的一些常见写法
weixin_47013797的博客
07-17 313
动画的一些常见写法
html css animation,css animation是什么？
weixin_42348363的博客
06-26 413
animation是CSS3中的一个简写属性，可以通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。语法：animation: name duration timing-function delay iteration-count direction;说明：animation 属性可以设置的六个动画属性分别为：●　animati...
animation同时写多个动画，先执行一个再执行下一个
热门推荐
DreamFJ的博客
10-29 2万+
animation可以同时写多个动画，这里只是给出一个例子，其实可以用一个动画就能实现了 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; .test{ width: 100px
39.html5的动画（animation）
越努力越幸运的博客
05-04 2612
文章目录html5的动画（animation）动画的定义（@keyframes（关键帧））动画的调用（使用）animation-iteration-count（动画执行的次数）animation-direction(动画执行的方向）animation-play-state（动画的执行状态）animation-fill-mode（动画的填充模式）animation的简写 html5的动画（animation） animation（动画）和transition（过渡）其实差不多，就是一个自己会动（动画），一个需
HTML animate()动画更改多个元素背景颜色但不同时生效问题
Moelimoe的博客
10-20 818
问题： 我想点击按钮时把页面中的body颜色和button中颜色同时改变 这个时候出现了body颜色先变化，而button颜色后变化，因为我的code是这样的： $("html,body").animate({backgroundColor:BGC[randomColorNum]}); $("html,.button").animate({backgroundColor:BGC[randomC...
CSS3_动画简写属性
weixin_44079801的博客
06-26 666
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画简写属性</title> <style> key@frames move {
介绍CSS3动画简写属性的视频脚本 ，字数1000字左右。内容包括 animation属性也是一个简写属性，用于综合设置以上六个动画属性，结合一个综合实例。
06-02
CSS3动画简写属性是用于设置动画效果的一个简写属性，它可以综合设置以下六个动画属性： 1. animation-name：设置动画名称。 2. animation-duration：设置动画持续时间。 3. animation-timing-function：设置动画的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咸鸭蛋炒饭

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值