HTML5实现烟雾笼罩下乡村旅馆闪烁的霓虹灯标牌动画效果源码.zip资源-CSDN文库

共7个文件

png：4个

jpg：1个

js：1个

版权申诉

html5

84 浏览量 2022-11-04 23:41:35 上传评论收藏 1.47MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5实现烟雾笼罩下乡村旅馆闪烁的霓虹灯标牌动画效果源码.zip （7个子文件）

132686863650457141

images

bates-off.png 545KB

bates-smoke.png 176KB

bates-smoke-sm.png 72KB

bates-on.png 550KB

bates-bg.jpg 151KB

index.html 2KB

jquery-1.11.1.min.js 94KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 乡村旅馆闪烁的霓虹灯标牌</title> <style> @keyframes smoke { from { background-position: 0 50%; } to { background-position: 100% 50%; } } body { margin: 0; background: #0c191c url(images/bates-bg.jpg) 0 0/cover no-repeat fixed; } body:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(images/bates-smoke.png) 0 50%/auto 100%; animation: smoke 90s infinite; } body:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(images/bates-smoke-sm.png) 0 50%/auto 100%; animation: smoke 30s infinite; } .header { position: absolute; bottom: -30px; right: 5%; width: 60%; max-width: 700px; z-index: 1; } .header img { display: block; width: 100%; } .header img.off { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; } </style> </head> <body> <div class="header"> <img src="images/bates-on.png" /> <img src="images/bates-off.png" class="off" /> </div> <script src="js/jquery-1.11.1.min.js"></script> <script> (function() { var toggle = function(element) { $("img.off").css({ "opacity": element ? "1" : "0" }); }; function el() { toggle(Math.random() > .8), setTimeout(el, 100 * Math.random() * .2); } el(); })(); </script> </body> </html>

评论收藏

内容反馈

版权申诉