H5页面利用css3动画以及定时器制作动画效果

最新推荐文章于 2022-05-06 16:06:25 发布
最新推荐文章于 2022-05-06 16:06:25 发布
阅读量769 收藏 2
点赞数
分类专栏： H5 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy3528/article/details/104697263
版权
H5 同时被 2 个专栏收录
16 篇文章 0 订阅
订阅专栏
CSS
11 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <title>女神节快乐</title>
    <style>
        [v-cloak] {
            display: none !important;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #FFC6CD;
        }

        #Vue {
            width: 100%;
        }

        .sreem {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            justify-content: center;
        }

        .wenzi {
            width: 100%;
            position: fixed;
            top: 100%;
            font-size: 2.5rem;
            animation: nsmymove_a 5s ease-in-out 0s 1 alternate forwards;
            text-align: center;
        }

        .nvshen {
            color: white;
            font-weight: bold;
        }

        .wenzitwo {
            width: 100%;
            position: fixed;
            top: 48%;
            display: flex;
            flex-direction: column;
            align-items: center;

            /* animation: wzmymove_a 3s ease-in-out 5s 1 alternate forwards; */
        }

        .wenzitwoa {
            font-size: 2.5rem;
            color: white;
            font-weight: bold;
            opacity: 0;
            animation: wzmymove_a 3s ease-in-out 5s 1 alternate forwards;
        }

        .wenzitwob {
            font-size: 2.5rem;
            color: white;
            font-weight: bold;
            opacity: 0;
            animation: wzmymove_a 3s ease-in-out 7s 1 alternate forwards;
        }

        .wenzitwoc {
            font-size: 2.5rem;
            color: white;
            font-weight: bold;
            opacity: 0;
            animation: wzmymove_a 3s ease-in-out 9s 1 alternate forwards;
        }

        .wenzitwod {
            font-size: 2.5rem;
            color: white;
            font-weight: bold;
            opacity: 0;
            animation: wzmymove_a 3s ease-in-out 11s 1 alternate forwards;
        }

        .tupian {
            width: 100%;
        }

        /* 动画 */
        /* 从top：100%过渡到top：40%，从透明到出现*/
        @keyframes nsmymove_a {
            from {
                top: 100%;
                opacity: 0;
            }

            to {
                top: 40%;
                opacity: 1;
            }
        }

        @keyframes nsmymove_b {
            from {
                top: 40%;
                font-size: 2.5rem;
                opacity: 1;
            }

            to {
                top: 40%;
                font-size: 0rem;
                opacity: 0;
            }
        }

        @keyframes wzmymove_a {
            from {
                /* top: 100%; */
                opacity: 0;
                font-size: 0rem;
            }

            to {
                /* top: 48%; */
                opacity: 1;
                font-size: 2.5rem;
            }
        }

        @keyframes wzmymove_b {
            from {
                top: 48%;
                opacity: 1;
            }

            to {
                top: 32%;
                opacity: 1;
            }
        }
	
        @keyframes wzmymove_c {
            from {
                top: 32%;
                opacity: 1;
            }

            to {
                top: -32%;
                opacity: 1;
            }
        }

        @keyframes tpmove {
            from {
                width: 0%;
                top: 50%;
                opacity: 0;
                transform: rotate(0deg);
            }

            to {
                width: 100%;
                top: 0%;
                opacity: 1;
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div v-cloak id="Vue">
        <div class="sreem">
            <div class="wenzi">
                <span class="nvshen">女神节快乐</span>
            </div>
            <div class="wenzitwo">
                <span class="wenzitwoa">2020</span>
                <span class="wenzitwob">你的美貌</span>
                <span class="wenzitwoc">继续营业</span>
                <span class="wenzitwod">祝愿你</span>
            </div>
            <img class="tupian" :src="bjimg" alt="">
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            bjimg: "",
            bjsz: ["https://sucai.suoluomei.cn/sucai_zs/images/20200305164843-nsjtp1.jpg",
                "https://sucai.suoluomei.cn/sucai_zs/images/20200305164903-nsjtp2.jpg",
                "https://sucai.suoluomei.cn/sucai_zs/images/20200305164924-nsjtp3.jpg"]
        },
        methods: {
            wenzianm() {
                let that = this
                setTimeout(function () {
                    console.log(1)
                    $(".wenzi").css("animation", "nsmymove_b 3s ease-in-out 0s 1 alternate forwards")
                }, 7000);//七秒之后执行此操作，将新的动画写入div中。
                setTimeout(function () {
                    console.log(2)
                    $(".wenzitwo").css("animation", "wzmymove_b 3s ease-in-out 0s 1 alternate forwards")
                }, 9000);
                setTimeout(function () {
                    console.log(2)
                    $(".wenzitwo").css("animation", "wzmymove_c 3s ease-in-out 0s 1 alternate forwards")
                }, 14000);
                setTimeout(function () {
                    console.log(3)
                    // that.bjimg = that.bjsz[Math.floor(Math.random() * that.bjsz.length)];
                    that.bjimg = "{$imgage}"
                    // that.bjimg = "https://sucai.suoluomei.cn/sucai_zs/images/20200305162345-nsjtk1.png"
                    $(".tupian").css("animation", "tpmove 2s ease-in-out 0s 1 alternate forwards")
                }, 16000);

            },
            // wenzitwoanm() {

            // }
        },
        created() {
            let that = this
            that.wenzianm();
            // $.ajax({
            //     type: "get",	//请求方式
            //     async: false,
            //     url: "",
            //     data: {},		//传值给后台
            //     dataType: "json",
            //     success: function (res) {
            //         console.log(res)
            //
            //     },
            // });


            //     axios.get('你的接口', {
            //         params: {
            //             传给后台的值
            //         }
            //     })
            //         .then(function (res) {
            //             //成功的回调
            //             console.log(res)
            //         })
            //         .catch(function (error) {
            //             //失败的回调
            //         });
        }
    })
</script>

</html>
hy3528
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5+CSS3+移动端，文章页面+轮播图+响应式
07-12
本项目利用H5和CSS3技术，结合移动端特性，创建了一个包含文章页面、轮播图以及响应式设计的网页应用。 首先，HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和API，旨在提高网页的语义性和可访问性。...
css动画或定时器实现简单过度条效果，动态控制电量
nlwebx_ying的博客
08-20 455
纯css动画实现 html: width - 可为动态数据 <div class="battary1"> <div class="box" style="width: 40%"></div> </div> css: .battary1 .box { height: 100%; } .battary1 .box::after { content: ''; display: block; animation: nob
css3动画添加间隔
高先生的猫
06-24 3164
因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。 在网上找了很多方法，最终的方法基本都是改动画规则，比如 @keyframes move{ /* 此处从75%开始 */ 75%{ transform: translateX(0px);} 100%{ transform: translateX(100px);} } 但是项目的特殊性在于元素都是组件类型的，意思就是给每个元素写单个的
利用css做时钟
m0_38038767的博客
05-06 1233
在网上看到的一种利用css3做出定时器的方式，就把他记录下来，偶尔可以翻出来看看。代码如下： html代码 <div class="timer"> <span class="hours"></span> <a class="split">:</a> <span class="minutes"></span> <a class="split">:</a> <
css3大绝技之animation动画
wj624的博客
04-27 9806
✨✨✨css3大绝技之animation动画 动画( animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 制作动画分为两步: 1．先定义动画 2．再使用(调用)动画 ✨✨🎈 动画的基本使用 ✨🎈🎈 用keyframes定义动画（类似定义类选择器） 语法格式： @keyformes 动画名称 { 0% { width:100px; } 100% { width:200px;
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
weixin_36064512的博客
08-03 2898
如上图，这种效果看着是不是挺“柔”的附代码文字一次渐变出现body{background-color: #333333;padding: 20px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}div,span{color: #ffffff;font-size: 30px;}.h...
微信小程序，H5翻书动画效果
11-10
对于微信小程序，由于其不直接支持CSS3的`transition`，我们可以利用小程序的`wx.createSelectorQuery`来获取元素的布局信息，并通过定时器更新页面状态，模拟出翻页动画。此外，小程序提供了`canvas`组件，可以更...
H5 3D六角菱形图案动画特效
06-24
3. **动画循环**：通过定时器（如`requestAnimationFrame`）来控制每帧的渲染，使得菱形图案按照预设的轨迹和速度持续运动，形成动画效果。 4. **响应式设计**：为了让特效在不同尺寸的设备上都能正常显示，需要...
H5彩色菱形图案圆球动画特效
07-24
在本文中，我们将深入探讨如何实现“H5彩色菱形图案圆球动画特效”，这是一个利用HTML5 Canvas技术创建的创新视觉效果。Canvas是HTML5的一个重要组成部分，它为Web开发者提供了一个在网页上进行动态图形绘制的能力，...
HTML5 3D几何模型动画特效
06-24
动画通常是通过定时器（如requestAnimationFrame）来实现的，每帧都更新模型的状态，并重新绘制到canvas上。同时，光照、纹理和相机视角的变化也能增加动画的真实感和深度。 此外，3D几何模型动画还涉及到碰撞检测...
css计时动画,CSS3 计时钟动画
weixin_31129039的博客
08-04 170
CSS语言：CSSSCSS确定html {height: 100%;}body {height: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-justify-content: space-around;-ms-flex-pack: distribute;just...
H5+JS实时时间使用定时器动态展示
fyydashen的博客
06-29 1501
这是我和小伙伴一起做的一个练手小demo，先上效果图： 注释我都写在代码里了： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实时时间展示</title> <style> #clock{ width: 480px; border-ra
CSS3动画 animation
qq_52301431的博客
04-01 2713
CSS3动画 animation 动画是使元素从一种样式逐渐变化为另一种样式的效果， 可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 格式： animation: 动画名字 动画时间 运动曲线 何时开始 循环次数 反向运动 animation: onemove 5s ease-in-out 2s 3 alternate; 1、基本使用 1.1、语法fro
用CSS3实现钟表效果
weixin_34288121的博客
03-08 754
背景：最近在学习CSS3，看到了一个小案例，通过自己的学习，动手实现了它，现在把它分享出来。 效果图 实现过程 1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置，用border-radius属性将其设置成圆形。 <div id="wrap"><...
【JS】html5+css3+js 用定时器实现时间轴的自动播放
wan小小冰的博客
07-23 4408
本篇介绍了用css3实现时间轴样式，用jq实现时间轴的自动轮播和启动暂停事件，具体代码如下： 一、time.html &amp;lt;div class=&quot;heatMapTimer&quot;&amp;gt; &amp;lt;ul class=&quot;time-line&quot;&amp;gt; &amp;lt;li class=&quot;time
前端 简单定时器
xinpz的博客
09-18 2248
 js简单定时器 &lt;!doctype html&gt; 　　&lt;html&gt; 　　　　&lt;head&gt; 　　　　　　&lt;meta charset="utf-8"&gt; 　　　　　　&lt;title&gt;前端笔记&lt;/title&gt; 　　　　　　&lt;script type="text/javascript"&gt
CSS3 动画卡顿解决方案
weixin_34252090的博客
12-30 984
2019独角兽企业重金招聘Python工程师标准>>> ...
前端性能优化 CSS动画
weixin_30650039的博客
11-29 107
最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录一下，其中的知识都是来源于这俩篇文章，我只是截取了其中比较关注的内容出来，原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时，以下四种情形绘制的效率较高，分别是：...
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
热门推荐
u014063717的博客
03-17 4万+
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。 （注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）下面做了个过渡动画汇总，包含常见的动画效果，效果图如下： 点击此处查看运行效果。 代码如下：<!DOCTYPE html> <html> <head> <m

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值