Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Summon the Ghosts?
Confirm
Too Late...
css
:root { --fireColor1: #ff5000; --fireColor2: rgba(255,80,0,0); --fireDuration: 1s; --blur: 0.4px; --fireSize: 90px; --smogColor1: rgb(49, 48, 48); --smogColor2: rgba(255,80,0,0); --smogDuration: 2s; --smogSize: 120px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body, #scene { width: 100%; height: 100%; } body { display: flex; justify-content: center; align-items: center; flex-direction: column; background: rgb(0, 0, 0); } h1 { width: 100%; font-size: 50px; text-align: center; color: white; font-family: 'Italiana', serif; font-family: 'Julius Sans One' } #scene { display: flex; justify-content: center; align-items: center; flex-direction: column; } #fire-container, #smog-container { font-size: 24px; filter: blur(var(--blur)); -webkit-filter: blur(var(--blur)); position: relative; width: 10em; height: 12em; } #fire-container .particle { animation: rise var(--fireDuration) ease-in infinite; background-image: radial-gradient(var(--fireColor1) 30%,var(--fireColor2) 70%); border-radius: 50%; mix-blend-mode: screen; opacity: 0; position: absolute; bottom: 0; width: var(--fireSize); height: var(--fireSize); } #smog-container .particle { animation: rise var(--smogDuration) ease-in infinite; background-image: radial-gradient(var(--smogColor1) 30%,var(--smogColor2) 70%); border-radius: 50%; mix-blend-mode: screen; opacity: 0; position: absolute; bottom: 0; width: var(--smogSize); height: var(--smogSize); } #buttons { display: flex; position: relative; justify-content: center; } button { margin: 10px; width: 200px; height: 50px; border-radius: 30px; position: absolute; bottom: 0px; font-weight: 900; border: none; font-size: 30px; cursor: pointer; font-family: system-ui; -webkit-box-shadow: 0px 15px 24px -9px rgba(255,255,255,0.2); box-shadow: 0px 15px 24px -9px rgba(255,255,255,0.2); } #yeah, #nah { display: flex; justify-content: center; align-items: center; } #confirm { background-color: #fd6408; color: #313131; transition: all 0.8s; } #confirm:hover { background-color: rgba(255,255,255,0); box-shadow: none; color: #fd6408; } #nah { position: relative; width: 300px; min-height: 100%; display: flex; justify-content: center; align-items: center; } #cancel { background-color: #e9e9e9; color: #313131; transition: all 0.8s; } #cancel:hover { background-color: rgba(255,255,255,0); box-shadow: none; color: #ffffff; } @keyframes rise { from { opacity: 0; transform: translateY(0) scale(1); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-10em) scale(0); } } @keyframes fly-away { 0% { opacity: 1; filter: blur(1px); } 100% { transform: scale(0.3); opacity: 0; filter: blur(20px); border-radius: 50%; } } img { position: fixed; min-width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
JavaScript
let fireContainer = document.getElementById("fire-container"); let smogContainer = document.getElementById("smog-container"); function createParticles(fireContainer, num, leftSpacing) { for (let i = 0; i < num; i += 1) { let particle = document.createElement("div"); particle.style.left = `calc((100% - 5em) * ${i / leftSpacing })`; particle.setAttribute("class", "particle"); particle.style.animationDelay = 4 * Math.random() + "s"; fireContainer.appendChild(particle); } } createParticles(fireContainer, 60, 60); createParticles(smogContainer, 30, 30);
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>火焰按钮动画-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号