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

最新推荐文章于 2022-03-23 08:50:18 发布
最新推荐文章于 2022-03-23 08:50:18 发布
阅读量768 收藏 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
    评论
专栏目录
纯CSS实现倒计时动画
whqet
02-25 1万+
OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。 实现原理 a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。 b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。 c.内盒子的移动动画的animation-timing-function使用step。 d.倒计时结束，外盒子动画消失掉。
前端性能优化 CSS动画
weixin_30650039的博客
11-29 107
最近拜读了一下html5rocks上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录一下，其中的知识都是来源于这俩篇文章，我只是截取了其中比较关注的内容出来，原文地址High Performance Animations及Accelerated Rendering in Chrome 原理 现代浏览器在使用CSS3动画时，以下四种情形绘制的效率较高，分别是：...
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...
CSS动画的定时通知
culiao9310的博客
09-28 535
css动画效果定时图片抖动View demo 查看演示Download Source 下载源In today’s tip we’ll show you how to create a simple timed notification with CSS animations. The idea is to show a notification or ale...
css动画或定时器实现简单过度条效果，动态控制电量
nlwebx_ying的博客
08-20 454
纯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
H5+CSS3+移动端，文章页面+轮播图+响应式
07-12
本项目利用H5和CSS3技术，结合移动端特性，创建了一个包含文章页面、轮播图以及响应式设计的网页应用。 首先，HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和API，旨在提高网页的语义性和可访问性。...
微信小程序，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几何模型动画还涉及到碰撞检测...
定时器动画
09-08
定时器动画,CSS3，HTML5.等网页轮播图效果
CSS3定时提示动画特效
weixin_30244681的博客
12-06 142
在线演示 本地下载 转载于:https://www.cnblogs.com/qixidi/p/10079674.html
CSS3图片动画计时器
hellolrf的博客
03-02 161
文献种类：专题技术文献； 开发工具与关键技术： css3 作者：刘任锋 ；年级： 2020级 ；撰写时间： 2021 年 3 月 2 日; 效果图： 数字2到12的动画效果。 Html图 animation动画 animation-name: number1; animation-duration: 15s; animation-iteration-count: 10; animation-delay: 1s; animation-timing-function: linear; 用keyf
css关键帧动画_带有关键帧动画CSS计时器
cungui5726的博客
08-19 214
css关键帧动画This article started in typical fashion for me: that is, as another topic entirely. I plan to write an article on animated CSS3 media query transitions, but I was sidetracked by the question o...
HTML基础第八课（定时器，动画）
wangsongll的博客
03-17 407
一、定时器 两种定时器： a:一次性定时器，只会执行一次---setTimeout setTimeout(function(){ console.log("执行了f1"); },1000) b.循环定时器----setIntervval var timer = setInterval(function(){ console.log("我是循环定时器"); ...
CSS3基础之动画
m0_61794291的博客
03-23 1412
文章目录前言1.用keyframs定义动画2.font-size3.font-size4.font-style5.字体属性复合写法6.字体属性总结 前言 动画animation是CSS3中新增的内容之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 1.用keyframs定义动画 2.font-size 3.font-size 4.font-style 5.字体属性复合写法 6.字体属性总结 ...
前端性能优化（CSS动画篇）
Whisper_a的专栏
03-20 767
正巧看到在送书，于是乎找了找自己博客上记录过的一些东西来及其无耻的蹭书了~~~ 小广告：更多内容可以看 我的博客 最近拜读了一下 html5rocks 上几位大神写的一篇关于CSS3动画性能优化的文章，学到了很多，在这里记录一下，其中的知识都是来源于这俩篇文章，我只是截取了其中比较关注的内容出来，原文地址 High Performance Animations 及 Accelera
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
weixin_36064512的博客
08-03 2896
如上图，这种效果看着是不是挺“柔”的附代码文字一次渐变出现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...
uniapp页面过渡动画h5
最新发布
10-26
uniapp页面过渡动画在H5环境中的实现方式与其他平台类似，主要通过CSS3动画和transition来实现。在uniapp中，我们可以使用vue-router提供的过渡效果组件来创建页面过渡动画。 首先，我们需要在页面组件中设置过渡...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值