CSS3 如何实现飘动的云朵动画

这篇具有很好参考价值的文章主要介绍了CSS3 如何实现飘动的云朵动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、动画的定义

二、动画的基本使用

        2.1.-animation-name

        2.2.-animation-duration

        2.3.-animation-timing-function

        2.4.-animation-delay

        2.5.-animation-iteration-count        

        2.6.-animation-direction

        2.7.-animation-fill-mode        

        2.8.-animation-play-state        

        2.9.动画模块连写格式

三、飘动的云朵动画的实现


一、动画的定义

     过渡动画是两个状态间的变化,帧动画可以处理动画过程中不同时间的细节变化,不过对过渡动画理解后再不习帧动画会非常容易,也可以把帧动画理解为多个帧之间的过渡动画。

二、动画的基本使用

2.1.-animation-name

指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画

     通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。

	   @keyframes animiationName{
​           keyframes-selector{
​               css-style;
​           }
​		}

2.2.-animation-duration

动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长

time 指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。  

2.3.-animation-timing-function

设置动画将如何完成一个周期,告诉系统动画执行的速度

执行速度
linear 动画从头到尾的速度是相同的。匀速
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

2.4.-animation-delay

设置动画在启动前的延迟间隔。time 可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0

2.5.-animation-iteration-count

定义动画的播放次数。告诉系统动画需要执行几次

 值 执行次数
n 一个数字,定义应该播放多少次动画
infinite

无限次执行

2.6.-animation-direction

指定是否应该轮流反向播放动画。

播放方向
normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行

2.7.-animation-fill-mode

规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

none 不做任何改变
forwards 让元素结束状态保持动画最后一帧的样式
backwards 让元素等待状态的时候显示动画第一帧的样式
both 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式

2.8.-animation-play-state

告诉系统当前动画是否需要暂停

running: 执行动画

paused: 暂停动画

2.9.动画模块连写格式

animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction);

三、飘动的云朵动画的实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            /* 天空轮播 晴朗 阴 晴 */
            * {
                margin: 0;
                padding: 0;
            }
            .parent {
                /* vh viewHeight 视口区域高度 vw  viewWidth 视口区域宽度 */
                height: 100vh;
                background-color: skyblue;
                animation: sky 10s linear infinite;
            }
            /* 定义一个天空动画 */
            @keyframes sky {
                0% {
                    background-color: skyblue;
                }
                50% {
                    background-color: #000;
                }
                100% {
                    background-color: skyblue;
                }
            }
            .cloud_one {
                width: 300%;
                height: 600px;
                margin: 30px auto;
                background: url(https://i.hd-r.cn/04462965ba09f768e47b6ea8cb065b1c.png) repeat-x;
                position: fixed;
                left: 0;
                top: 0;
                animation: cloud 20s linear infinite;
            }
            .cloud_two {
                width: 300%;
                height: 600px;
                margin: 30px auto;
                background: url(https://s3.bmp.ovh/imgs/2023/06/10/dc7235f6f0a978b5.png) repeat-x;
                position: fixed;
                left: 0;
                top: 0;
                animation: cloud 40s linear infinite;
            }
            .cloud_three {
                width: 300%;
                height: 600px;
                margin: 30px auto;
                background: url(https://s3.bmp.ovh/imgs/2023/06/10/8201e7f468f3570c.png) repeat-x;
                position: fixed;
                left: 0;
                top: 0;
                animation: cloud 60s linear infinite;
            }
            @keyframes cloud {
                from {
                    left: 0;
                }
                to {
                    left: -200%;
                }
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="cloud_one"></div>
            <div class="cloud_two"></div>
            <div class="cloud_three"></div>
        </div>
    </body>
</html>

最终实现效果如下

图片已转为在线地址,大家可以直接复制使用。

CSS3 如何实现飘动的云朵动画文章来源地址https://www.toymoban.com/news/detail-478474.html

到了这里,关于CSS3 如何实现飘动的云朵动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 纯css3实现小鸡从鸡蛋破壳而出动画特效

    实现一个使用纯css3实现小鸡破壳的效果 示例效果如下所示 实现这个小鸡破壳,使用css3,结合动画关键帧就可以实现,结合元素绝对定位,使用 div + css 进行绘制 当鼠标移上去时,实现蛋黄与蛋壳的分离,使用css3中的 transform ,变换,垂直反方向上,平移就可以实现 村民私自搭桥收费被

    2024年02月16日
    浏览(40)
  • 快六一啦,学习CSS3实现一个冰淇淋动画特效

    快六一啦,小时候顶多吃个小冰棍,或者是那种小冰袋,现在的小朋友真是好,动不动就能吃到冰淇淋,今天用CSS3实现一个冰淇淋的动画特效吧   目录 实现思路 桶身的实现 冰淇淋身体的实现 五彩颗粒的实现 HTML源码 CSS3源码 最后 实现思路 本文采用多DOM的方式进行布局,冰

    2024年02月06日
    浏览(35)
  • 看不上日全食了,学习CSS3,实现一个日全食的动画特效

    看新闻说,今年全球唯一一次日全食将于北京时间4月9日凌晨在北美洲地区上演。看来那边我是去不成了,日全食也看不见了,不过我可以用CSS3实现一个日全食的动画特效。一起来看一下吧。   目录 1. 实现思路 2. 天空的生成已经渐变 3 太阳的生成以及渐变 4 月亮的生成以及

    2024年04月09日
    浏览(39)
  • 【css3】涟漪动画

    2024年02月06日
    浏览(41)
  • CSS3 动画

    个人主页: 学习前端的小z 个人专栏: HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存

    2024年04月26日
    浏览(53)
  • CSS3设计动画样式

    CSS3动画包括过渡动画和关键帧动画,它们主要通过改变CSS属性值来模拟实现。我将详细介绍Transform、Transitions和Animations 3大功能模块,其中Transform实现对网页对象的变形操作,Transitions实现CSS属性过渡变化,Animations实现CSS样式分步式演示效果。 2012年9月,W3C发布CSS3变形工作草

    2024年02月06日
    浏览(47)
  • CSS3动画效果详解

    在CSS3中,animation属性用于实现元素的动画。 animation属性跟transition属性在功能实现上是非常相似的,都是通过改变元素的属性值来实现动画效果。但是,这两者实际上有着本质的区别 对于transition属性来说,它只能将元素的某一个属性从一个属性值过渡到另一个属性值 对于

    2024年01月21日
    浏览(52)
  • css3过渡与动画

    在数字时代,网页不再是静态的画面,而是充满活力和动感的空间。CSS3的过渡与动画技术就像是一场魔法表演,能够赋予网页以生命。本文将引领你进入这个奇妙的世界,解锁CSS3过渡与动画的神奇效果。 transition过渡属性时css3浓墨重彩的特性,过渡可以为一个元素在不同样

    2024年01月16日
    浏览(52)
  • CSS3 -- @keyframes动画

    CSS动画可以为网站添加生动的交互效果。在CSS3中,@keyframes规则被引入,用于定义CSS动画的关键帧和属性值。@keyframes规则提供了一个非常强大和灵活的工具,允许开发人员控制动画的细节,以创建各种类型的动画效果。在本文中,我们将深入探讨@keyframes规则,了解如何使用它

    2024年02月16日
    浏览(43)
  • CSS3D+动画

    1.css3D 给父元素设置 perspective:景深:近大远小的效果900-1200px这个范围内 transform-style:是否设置3D环境 flat 2D环境 默认值 perserve-3D环境 3D功能函数 1.位移: translateZ() translate3D(x,y,z) 2.3D旋转 属性: rotateX() rotateY() rotateZ() rotate3D(x,y,z,deg) x,y,z:0-1 0不旋转 deg:旋转的角度 3.3D缩放 缩放:

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包