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

定时炸弹,网页特效

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

点击下面的运行看效果:

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

滚动文字消息代码

网上收集的滚动文字消息代码<!DOCTYPE html>     <html>     <head>     <meta&…

好看的网站自适应图片文字广告位代码

<div class="ad"> <!--图片横幅广告--> <a href="https://www.cjw123.com/blog/" target="_blank"&nb…

彩色流转文字代码

根据自己需求修改代码,点击运行预览效果!<style>     #nr{font-size:15px; margin: 0;background: -webkit-linear-gradient(left,#ffff…

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

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

发表评论

访客

看不清,换一张

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