当前位置:首页 > 网站应用 > 正文内容

定时炸弹,网页特效

cjw1231年前 (2024-10-02)网站应用4360

点击下面的运行看效果:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时炸弹</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
    <style>
        body{background-color:#84B9BE;overflow:hidden;text-align:center}body,html{height:100%;width:100%;margin:0;padding:0}#animationWindow{width:100%;height:100%}
    </style>
</head>

<body>
    <div id="animationWindow"></div>
</body>
<script>
    var select=function(s){return document.querySelector(s)},selectAll=function(s){return document.querySelectorAll(s)},animationWindow=select('#animationWindow'),animData={wrapper:animationWindow,animType:'svg',loop:true,prerender:true,autoplay:true,path:'https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/walking_time_bomb.json'},anim;anim=lottie.loadAnimation(animData);anim.setSpeed(1);
</script>
</html>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://www.cjw123.com/blog/?id=135

标签: htmlJScss
分享给朋友:

相关文章

网站调整公告

        网站开通了也有三年多了,网站也进行了多次的改版,昨天是我生日嫌着没事在家里把网站再进行了一次改版,当大家再次访问网站时,网站已经换上了全新的衣裳,这次的改版也将意味着我自己也会以一个全新的面貌展现,在我过去的一岁里...

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

js打印文字打字输出特效代码

<center> <style type="text/css"> .a{background:#666666; border:0px solid #000000; width:300px; h...

灯光追踪

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">...

生日快乐气球特效代码

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。