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

定时炸弹,网页特效

cjw12312个月前 (10-02)网站应用4120

点击下面的运行看效果:

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

摇摆的灯光

点击运行看演示效果!<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">...

html中文本不停变色的特效

<HTML><HEAD><TITLE>文本特效篇--文本不停变色</TITLE> </HEAD> <BODY bgcolor="#fef4d2"> <br> <center...

兼容的HTML5的网页圆角提示框

<!doctype html><html><head><meta charset="utf-8"> <title>纯css的圆角提示框全兼容_www.youkud.com</title>...

生日快乐气球特效代码

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

发表评论

访客

看不清,换一张

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