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

定时炸弹,网页特效

cjw1237个月前 (10-02)网站应用1950

点击下面的运行看效果:

<!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...

css3设计伪元素实现太极阴阳图并旋转

<style> body{margin:0;} .wrap{ position:relative; width:200px; height:100px; background-color:#fff; margin:50px auto; border-width:...

网站设置点击任何地方弹出新页面广告只弹出一次

1、js实现第一次访问站时点击任何地方都先弹出一个广告页:<script> document.onmousedown = function(){     var isOpenedAd  =&nb...

Q弹果冻

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

生日快乐气球特效代码

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

字符乱码特效

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">      &...

发表评论

访客

看不清,换一张

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