Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
100
THANKYOU!
NATHAN.TOKYO
css
html { font-size: 1.2vh; } body { height: 100vh; width: 100vw; overflow: hidden; background: -webkit-linear-gradient(white, #e0d1d1); background: linear-gradient(white, #e0d1d1); box-shadow: inset 0 5vh 30vh 5vh #d6c2c2; font-family: "Share Tech Mono", monospace; color: white; font-size: 2rem; } body:after { z-index: 1; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-radial-gradient(circle, #ffffff 40%, #e0d1d1); background-image: radial-gradient(circle, #ffffff 40%, #e0d1d1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(1.5) scaleX(1); transform: scaleY(1.5) scaleX(1); opacity: 0.5; } .center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); text-align: center; line-height: 0.9; z-index: 3; } h1 { font-size: 30rem; margin: 0; padding: 0; color: #ff6666; } h2 { font-size: 9rem; margin: 0; padding: 0; color: #ff6666; } h1, h2 { text-shadow: 0rem 4rem 2rem rgba(140, 115, 115, 0.2); } .balloon { top: 100vh; opacity: 0.95; position: absolute; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 10rem; height: 10rem; background: #faf9f9; border-radius: 10rem 10rem 4rem 10rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 3rem 3rem 1.5rem rgba(153, 102, 102, 0.2); -webkit-animation: float1 10s infinite ease-out; animation: float1 10s infinite ease-out; } @-webkit-keyframes float1 { 0% { -webkit-transform: rotate(40deg) translateY(0) translateX(0); transform: rotate(40deg) translateY(0) translateX(0); } 100% { -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh); transform: rotate(50deg) translateY(-85vh) translateX(-85vh); } } @keyframes float1 { 0% { -webkit-transform: rotate(40deg) translateY(0) translateX(0); transform: rotate(40deg) translateY(0) translateX(0); } 100% { -webkit-transform: rotate(50deg) translateY(-85vh) translateX(-85vh); transform: rotate(50deg) translateY(-85vh) translateX(-85vh); } } @-webkit-keyframes float2 { 0% { -webkit-transform: rotate(55deg) translateY(0) translateX(0); transform: rotate(55deg) translateY(0) translateX(0); } 100% { -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh); transform: rotate(45deg) translateY(-85vh) translateX(-85vh); } } @keyframes float2 { 0% { -webkit-transform: rotate(55deg) translateY(0) translateX(0); transform: rotate(55deg) translateY(0) translateX(0); } 100% { -webkit-transform: rotate(45deg) translateY(-85vh) translateX(-85vh); transform: rotate(45deg) translateY(-85vh) translateX(-85vh); } } @-webkit-keyframes float3 { 0% { -webkit-transform: rotate(45deg) translateY(0) translateX(0); transform: rotate(45deg) translateY(0) translateX(0); } 100% { -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh); transform: rotate(35deg) translateY(-85vh) translateX(-85vh); } } @keyframes float3 { 0% { -webkit-transform: rotate(45deg) translateY(0) translateX(0); transform: rotate(45deg) translateY(0) translateX(0); } 100% { -webkit-transform: rotate(35deg) translateY(-85vh) translateX(-85vh); transform: rotate(35deg) translateY(-85vh) translateX(-85vh); } } @-webkit-keyframes floatfront1 { 0% { -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0); transform: scale(1.3) rotate(40deg) translateY(0) translateX(0); } 100% { -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh); transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh); } } @keyframes floatfront1 { 0% { -webkit-transform: scale(1.3) rotate(40deg) translateY(0) translateX(0); transform: scale(1.3) rotate(40deg) translateY(0) translateX(0); } 100% { -webkit-transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh); transform: scale(1.3) rotate(50deg) translateY(-100vh) translateX(-100vh); } } @-webkit-keyframes floatfront2 { 0% { -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0); transform: scale(1.3) rotate(55deg) translateY(0) translateX(0); } 100% { -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh); transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh); } } @keyframes floatfront2 { 0% { -webkit-transform: scale(1.3) rotate(55deg) translateY(0) translateX(0); transform: scale(1.3) rotate(55deg) translateY(0) translateX(0); } 100% { -webkit-transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh); transform: scale(1.3) rotate(45deg) translateY(-100vh) translateX(-85vh); } } @-webkit-keyframes floatfront3 { 0% { -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0); transform: scale(1.3) rotate(45deg) translateY(0) translateX(0); } 100% { -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh); transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh); } } @keyframes floatfront3 { 0% { -webkit-transform: scale(1.3) rotate(45deg) translateY(0) translateX(0); transform: scale(1.3) rotate(45deg) translateY(0) translateX(0); } 100% { -webkit-transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh); transform: scale(1.3) rotate(35deg) translateY(-85vh) translateX(-100vh); } } .balloon:after { content: ''; position: absolute; bottom: -.05rem; right: -.05rem; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; border-right: 0.9rem solid #dbbdbd; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 1rem; } .holder.back { position: relative; z-index: 2; } .holder.back .balloon:nth-child(1) { left: 50%; -webkit-animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: float2 9.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 0s; animation-delay: 0s; } .holder.back .balloon:nth-child(2) { left: 20%; -webkit-animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: float1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 3.2s; animation-delay: 3.2s; } .holder.back .balloon:nth-child(3) { left: 90%; -webkit-animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: float3 10.5s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 7.7s; animation-delay: 7.7s; } .holder.back .balloon:nth-child(4) { left: 70%; -webkit-animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: float1 9s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 1.3s; animation-delay: 1.3s; } .holder.back .balloon:nth-child(5) { left: 35%; -webkit-animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: float2 10.2s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 5.6s; animation-delay: 5.6s; } .holder.front { position: relative; z-index: 4; } .holder.front .balloon { box-shadow: inset -0.5rem -0.5rem 5rem -0.5rem #c99c9c, 8rem 8rem 4rem rgba(153, 102, 102, 0.2); } .holder.front .balloon:nth-child(1) { left: 80%; -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 2.8s; animation-delay: 2.8s; } .holder.front .balloon:nth-child(2) { left: 35%; -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .holder.front .balloon:nth-child(3) { left: 7%; -webkit-animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: floatfront3 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 7.7s; animation-delay: 7.7s; } .holder.front .balloon:nth-child(4) { left: 46%; -webkit-animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: floatfront2 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 6.3s; animation-delay: 6.3s; } .holder.front .balloon:nth-child(5) { left: 75%; -webkit-animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); animation: floatfront1 10s infinite cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-animation-delay: 8.9s; animation-delay: 8.9s; } .sig { position: fixed; bottom: 8px; right: 8px; text-decoration: none; font-size: 12px; font-weight: 100; font-family: sans-serif; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px; }
JavaScript
粒子
时间
文字
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号