当前位置:首页 > 网站应用

定时炸弹,网页特效

cjw1232年前 (2024-10-02)网站应用5680

点击下面的运行看效果:

<!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实现鼠标经过列表弹出提示层效果

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

瞌睡小鸟按钮特效

<!DOCTYPE html> <html lang="en">   <head>     <title>瞌睡小鸟按钮特效</title&g…

普通跳转页面

<!DOCTYPE html> <html> <head>  <meta charset="utf-8" />  <meta name="descr…

状态码页面单页源码

可做为各种错误页!具体点下面的运行看演示<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <m…

一个好看的404错误页源码

演示请拉到下面的“运行”查看,可以做为各种错误页或者引导页<!doctype html>     <html lang="zh-CN">     <…

发表评论

访客

看不清,换一张

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