Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background: radial-gradient(#550d39, #270537); } .stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .campfire { position: relative; width: 600px; height: 600px; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: scale(0.75); transform: scale(0.75); } .log { position: absolute; width: 238px; height: 70px; border-radius: 32px; background: #781e20; overflow: hidden; opacity: 0.99; } .log:before { content: ''; display: block; position: absolute; top: 50%; left: 35px; width: 8px; height: 8px; border-radius: 32px; background: #b35050; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 3; box-shadow: 0 0 0 2.5px #781e20, 0 0 0 10.5px #b35050, 0 0 0 13px #781e20, 0 0 0 21px #b35050, 0 0 0 23.5px #781e20, 0 0 0 31.5px #b35050; } .streak { position: absolute; height: 2px; border-radius: 20px; background: #b35050; } .streak:nth-child(1) { top: 10px; width: 90px; } .streak:nth-child(2) { top: 10px; left: 100px; width: 80px; } .streak:nth-child(3) { top: 10px; left: 190px; width: 30px; } .streak:nth-child(4) { top: 22px; width: 132px; } .streak:nth-child(5) { top: 22px; left: 142px; width: 48px; } .streak:nth-child(6) { top: 22px; left: 200px; width: 28px; } .streak:nth-child(7) { top: 34px; left: 74px; width: 160px; } .streak:nth-child(8) { top: 46px; left: 110px; width: 40px; } .streak:nth-child(9) { top: 46px; left: 170px; width: 54px; } .streak:nth-child(10) { top: 58px; left: 90px; width: 110px; } .log { -webkit-transform-origin: center center; transform-origin: center center; box-shadow: 0 0 2px 1px rgba(0,0,0,0.15); } .log:nth-child(1) { bottom: 100px; left: 100px; -webkit-transform: rotate(150deg) scaleX(0.75); transform: rotate(150deg) scaleX(0.75); z-index: 20; } .log:nth-child(2) { bottom: 120px; left: 140px; -webkit-transform: rotate(110deg) scaleX(0.75); transform: rotate(110deg) scaleX(0.75); z-index: 10; } .log:nth-child(3) { bottom: 98px; left: 68px; -webkit-transform: rotate(-10deg) scaleX(0.75); transform: rotate(-10deg) scaleX(0.75); } .log:nth-child(4) { bottom: 80px; left: 220px; -webkit-transform: rotate(-120deg) scaleX(0.75); transform: rotate(-120deg) scaleX(0.75); z-index: 26; } .log:nth-child(5) { bottom: 75px; left: 210px; -webkit-transform: rotate(-30deg) scaleX(0.75); transform: rotate(-30deg) scaleX(0.75); z-index: 25; } .log:nth-child(6) { bottom: 92px; left: 280px; -webkit-transform: rotate(35deg) scaleX(0.85); transform: rotate(35deg) scaleX(0.85); z-index: 30; } .log:nth-child(7) { bottom: 70px; left: 300px; -webkit-transform: rotate(-30deg) scaleX(0.75); transform: rotate(-30deg) scaleX(0.75); z-index: 20; } .stick { position: absolute; width: 68px; height: 20px; border-radius: 10px; box-shadow: 0 0 2px 1px rgba(0,0,0,0.1); background: #781e20; } .stick:before { content: ''; display: block; position: absolute; bottom: 100%; left: 30px; width: 6px; height: 20px; background: #781e20; border-radius: 10px; -webkit-transform: translateY(50%) rotate(32deg); transform: translateY(50%) rotate(32deg); } .stick:after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: #b35050; border-radius: 10px; } .stick { -webkit-transform-origin: center center; transform-origin: center center; } .stick:nth-child(1) { left: 158px; bottom: 164px; -webkit-transform: rotate(-152deg) scaleX(0.8); transform: rotate(-152deg) scaleX(0.8); z-index: 12; } .stick:nth-child(2) { left: 180px; bottom: 30px; -webkit-transform: rotate(20deg) scaleX(0.9); transform: rotate(20deg) scaleX(0.9); } .stick:nth-child(3) { left: 400px; bottom: 38px; -webkit-transform: rotate(170deg) scaleX(0.9); transform: rotate(170deg) scaleX(0.9); } .stick:nth-child(3):before { display: none; } .stick:nth-child(4) { left: 370px; bottom: 150px; -webkit-transform: rotate(80deg) scaleX(0.9); transform: rotate(80deg) scaleX(0.9); z-index: 20; } .stick:nth-child(4):before { display: none; } .fire .flame { position: absolute; -webkit-transform-origin: bottom center; transform-origin: bottom center; opacity: 0.9; } .fire__red .flame { width: 48px; border-radius: 48px; background: #e20f00; box-shadow: 0 0 80px 18px rgba(226,15,0,0.4); } .fire__red .flame:nth-child(1) { left: 138px; height: 160px; bottom: 100px; -webkit-animation: fire 2s 0.15s ease-in-out infinite alternate; animation: fire 2s 0.15s ease-in-out infinite alternate; } .fire__red .flame:nth-child(2) { left: 186px; height: 240px; bottom: 100px; -webkit-animation: fire 2s 0.35s ease-in-out infinite alternate; animation: fire 2s 0.35s ease-in-out infinite alternate; } .fire__red .flame:nth-child(3) { left: 234px; height: 300px; bottom: 100px; -webkit-animation: fire 2s 0.1s ease-in-out infinite alternate; animation: fire 2s 0.1s ease-in-out infinite alternate; } .fire__red .flame:nth-child(4) { left: 282px; height: 360px; bottom: 100px; -webkit-animation: fire 2s 0s ease-in-out infinite alternate; animation: fire 2s 0s ease-in-out infinite alternate; } .fire__red .flame:nth-child(5) { left: 330px; height: 310px; bottom: 100px; -webkit-animation: fire 2s 0.45s ease-in-out infinite alternate; animation: fire 2s 0.45s ease-in-out infinite alternate; } .fire__red .flame:nth-child(6) { left: 378px; height: 232px; bottom: 100px; -webkit-animation: fire 2s 0.3s ease-in-out infinite alternate; animation: fire 2s 0.3s ease-in-out infinite alternate; } .fire__red .flame:nth-child(7) { left: 426px; height: 140px; bottom: 100px; -webkit-animation: fire 2s 0.1s ease-in-out infinite alternate; animation: fire 2s 0.1s ease-in-out infinite alternate; } .fire__orange .flame { width: 48px; border-radius: 48px; background: #ff9c00; box-shadow: 0 0 80px 18px rgba(255,156,0,0.4); } .fire__orange .flame:nth-child(1) { left: 138px; height: 140px; bottom: 100px; -webkit-animation: fire 2s 0.05s ease-in-out infinite alternate; animation: fire 2s 0.05s ease-in-out infinite alternate; } .fire__orange .flame:nth-child(2) { left: 186px; height: 210px; bottom: 100px; -webkit-animation: fire 2s 0.1s ease-in-out infinite alternate; animation: fire 2s 0.1s ease-in-out infinite alternate; } .fire__orange .flame:nth-child(3) { left: 234px; height: 250px; bottom: 100px; -webkit-animation: fire 2s 0.35s ease-in-out infinite alternate; animation: fire 2s 0.35s ease-in-out infinite alternate; } .fire__orange .flame:nth-child(4) { left: 282px; height: 300px; bottom: 100px; -webkit-animation: fire 2s 0.4s ease-in-out infinite alternate; animation: fire 2s 0.4s ease-in-out infinite alternate; } .fire__orange .flame:nth-child(5) { left: 330px; height: 260px; bottom: 100px; -webkit-animation: fire 2s 0.5s ease-in-out infinite alternate; animation: fire 2s 0.5s ease-in-out infinite alternate; } .fire__orange .flame:nth-child(6) { left: 378px; height: 202px; bottom: 100px; -webkit-animation: fire 2s 0.35s ease-in-out infinite alternate; animation: fire 2s 0.35s ease-in-out infinite alternate; } .fire__orange .flame:nth-child(7) { left: 426px; height: 110px; bottom: 100px; -webkit-animation: fire 2s 0.1s ease-in-out infinite alternate; animation: fire 2s 0.1s ease-in-out infinite alternate; } .fire__yellow .flame { width: 48px; border-radius: 48px; background: #ffeb6e; box-shadow: 0 0 80px 18px rgba(255,235,110,0.4); } .fire__yellow .flame:nth-child(1) { left: 186px; height: 140px; bottom: 100px; -webkit-animation: fire 2s 0.6s ease-in-out infinite alternate; animation: fire 2s 0.6s ease-in-out infinite alternate; } .fire__yellow .flame:nth-child(2) { left: 234px; height: 172px; bottom: 120px; -webkit-animation: fire 2s 0.4s ease-in-out infinite alternate; animation: fire 2s 0.4s ease-in-out infinite alternate; } .fire__yellow .flame:nth-child(3) { left: 282px; height: 240px; bottom: 100px; -webkit-animation: fire 2s 0.38s ease-in-out infinite alternate; animation: fire 2s 0.38s ease-in-out infinite alternate; } .fire__yellow .flame:nth-child(4) { left: 330px; height: 200px; bottom: 100px; -webkit-animation: fire 2s 0.22s ease-in-out infinite alternate; animation: fire 2s 0.22s ease-in-out infinite alternate; } .fire__yellow .flame:nth-child(5) { left: 378px; height: 142px; bottom: 100px; -webkit-animation: fire 2s 0.18s ease-in-out infinite alternate; animation: fire 2s 0.18s ease-in-out infinite alternate; } .fire__white .flame { width: 48px; border-radius: 48px; background: #fef1d9; box-shadow: 0 0 80px 18px rgba(254,241,217,0.4); } .fire__white .flame:nth-child(1) { left: 156px; width: 32px; height: 100px; bottom: 100px; -webkit-animation: fire 2s 0.22s ease-in-out infinite alternate; animation: fire 2s 0.22s ease-in-out infinite alternate; } .fire__white .flame:nth-child(2) { left: 181px; width: 32px; height: 120px; bottom: 100px; -webkit-animation: fire 2s 0.42s ease-in-out infinite alternate; animation: fire 2s 0.42s ease-in-out infinite alternate; } .fire__white .flame:nth-child(3) { left: 234px; height: 170px; bottom: 100px; -webkit-animation: fire 2s 0.32s ease-in-out infinite alternate; animation: fire 2s 0.32s ease-in-out infinite alternate; } .fire__white .flame:nth-child(4) { left: 282px; height: 210px; bottom: 100px; -webkit-animation: fire 2s 0.8s ease-in-out infinite alternate; animation: fire 2s 0.8s ease-in-out infinite alternate; } .fire__white .flame:nth-child(5) { left: 330px; height: 170px; bottom: 100px; -webkit-animation: fire 2s 0.85s ease-in-out infinite alternate; animation: fire 2s 0.85s ease-in-out infinite alternate; } .fire__white .flame:nth-child(6) { left: 378px; width: 32px; height: 110px; bottom: 100px; -webkit-animation: fire 2s 0.64s ease-in-out infinite alternate; animation: fire 2s 0.64s ease-in-out infinite alternate; } .fire__white .flame:nth-child(7) { left: 408px; width: 32px; height: 100px; bottom: 100px; -webkit-animation: fire 2s 0.32s ease-in-out infinite alternate; animation: fire 2s 0.32s ease-in-out infinite alternate; } .spark { position: absolute; width: 6px; height: 20px; background: #fef1d9; border-radius: 18px; z-index: 50; -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-transform: scaleY(0); transform: scaleY(0); } .spark:nth-child(1) { left: 160px; bottom: 212px; -webkit-animation: spark 1s 0.4s linear infinite; animation: spark 1s 0.4s linear infinite; } .spark:nth-child(2) { left: 180px; bottom: 240px; -webkit-animation: spark 1s 1s linear infinite; animation: spark 1s 1s linear infinite; } .spark:nth-child(3) { left: 208px; bottom: 320px; -webkit-animation: spark 1s 0.8s linear infinite; animation: spark 1s 0.8s linear infinite; } .spark:nth-child(4) { left: 310px; bottom: 400px; -webkit-animation: spark 1s 2s linear infinite; animation: spark 1s 2s linear infinite; } .spark:nth-child(5) { left: 360px; bottom: 380px; -webkit-animation: spark 1s 0.75s linear infinite; animation: spark 1s 0.75s linear infinite; } .spark:nth-child(6) { left: 390px; bottom: 320px; -webkit-animation: spark 1s 0.65s linear infinite; animation: spark 1s 0.65s linear infinite; } .spark:nth-child(7) { left: 400px; bottom: 280px; -webkit-animation: spark 1s 1s linear infinite; animation: spark 1s 1s linear infinite; } .spark:nth-child(8) { left: 430px; bottom: 210px; -webkit-animation: spark 1s 1.4s linear infinite; animation: spark 1s 1.4s linear infinite; } @-webkit-keyframes fire { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 28% { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } 38% { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 50% { -webkit-transform: scaleY(0.6); transform: scaleY(0.6); } 70% { -webkit-transform: scaleY(0.95); transform: scaleY(0.95); } 82% { -webkit-transform: scaleY(0.58); transform: scaleY(0.58); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes fire { 0% { -webkit-transform: scaleY(1); transform: scaleY(1); } 28% { -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } 38% { -webkit-transform: scaleY(0.8); transform: scaleY(0.8); } 50% { -webkit-transform: scaleY(0.6); transform: scaleY(0.6); } 70% { -webkit-transform: scaleY(0.95); transform: scaleY(0.95); } 82% { -webkit-transform: scaleY(0.58); transform: scaleY(0.58); } 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes spark { 0%, 35% { -webkit-transform: scaleY(0) translateY(0); transform: scaleY(0) translateY(0); opacity: 0; } 50% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); opacity: 1; } 70% { -webkit-transform: scaleY(1) translateY(-10px); transform: scaleY(1) translateY(-10px); opacity: 1; } 75% { -webkit-transform: scaleY(1) translateY(-10px); transform: scaleY(1) translateY(-10px); opacity: 0; } 100% { -webkit-transform: scaleY(0) translateY(0); transform: scaleY(0) translateY(0); opacity: 0; } } @keyframes spark { 0%, 35% { -webkit-transform: scaleY(0) translateY(0); transform: scaleY(0) translateY(0); opacity: 0; } 50% { -webkit-transform: scaleY(1) translateY(0); transform: scaleY(1) translateY(0); opacity: 1; } 70% { -webkit-transform: scaleY(1) translateY(-10px); transform: scaleY(1) translateY(-10px); opacity: 1; } 75% { -webkit-transform: scaleY(1) translateY(-10px); transform: scaleY(1) translateY(-10px); opacity: 0; } 100% { -webkit-transform: scaleY(0) translateY(0); transform: scaleY(0) translateY(0); opacity: 0; } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS篝火-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号