Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
body { background: #eef; height: 100vh; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #sky { margin-top: -60px; -webkit-perspective: 400px; perspective: 400px; -webkit-filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2)); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #sky div { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #sky .bird { -webkit-animation: fly 10000ms linear infinite; animation: fly 10000ms linear infinite; } #sky .bird .wind { position: absolute; left: 50%; width: 4px; height: 200px; margin-left: -2px; border-radius: 999px; overflow: hidden; } #sky .bird .wind:nth-child(1) { -webkit-transform: translate3d(30px, -134px, -42px) rotateY(90deg); transform: translate3d(30px, -134px, -42px) rotateY(90deg); } #sky .bird .wind:nth-child(1)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 176, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1384ms 2589ms linear infinite; animation: wind 1384ms 2589ms linear infinite; } #sky .bird .wind:nth-child(2) { -webkit-transform: translate3d(-196px, 105px, -58px) rotateY(90deg); transform: translate3d(-196px, 105px, -58px) rotateY(90deg); } #sky .bird .wind:nth-child(2)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 1, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1185ms 2171ms linear infinite; animation: wind 1185ms 2171ms linear infinite; } #sky .bird .wind:nth-child(3) { -webkit-transform: translate3d(-1px, 128px, 20px) rotateY(90deg); transform: translate3d(-1px, 128px, 20px) rotateY(90deg); } #sky .bird .wind:nth-child(3)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 33, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1910ms 3502ms linear infinite; animation: wind 1910ms 3502ms linear infinite; } #sky .bird .wind:nth-child(4) { -webkit-transform: translate3d(166px, -3px, -13px) rotateY(90deg); transform: translate3d(166px, -3px, -13px) rotateY(90deg); } #sky .bird .wind:nth-child(4)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 114, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1301ms 3671ms linear infinite; animation: wind 1301ms 3671ms linear infinite; } #sky .bird .wind:nth-child(5) { -webkit-transform: translate3d(45px, -44px, 79px) rotateY(90deg); transform: translate3d(45px, -44px, 79px) rotateY(90deg); } #sky .bird .wind:nth-child(5)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 21, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1824ms 4855ms linear infinite; animation: wind 1824ms 4855ms linear infinite; } #sky .bird .wind:nth-child(6) { -webkit-transform: translate3d(45px, 100px, -13px) rotateY(90deg); transform: translate3d(45px, 100px, -13px) rotateY(90deg); } #sky .bird .wind:nth-child(6)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 25, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 2932ms 2504ms linear infinite; animation: wind 2932ms 2504ms linear infinite; } #sky .bird .wind:nth-child(7) { -webkit-transform: translate3d(-36px, 14px, -89px) rotateY(90deg); transform: translate3d(-36px, 14px, -89px) rotateY(90deg); } #sky .bird .wind:nth-child(7)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 16, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1827ms 1512ms linear infinite; animation: wind 1827ms 1512ms linear infinite; } #sky .bird .wind:nth-child(8) { -webkit-transform: translate3d(88px, 109px, -23px) rotateY(90deg); transform: translate3d(88px, 109px, -23px) rotateY(90deg); } #sky .bird .wind:nth-child(8)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 33, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 1285ms 4148ms linear infinite; animation: wind 1285ms 4148ms linear infinite; } #sky .bird .wind:nth-child(9) { -webkit-transform: translate3d(32px, 98px, 25px) rotateY(90deg); transform: translate3d(32px, 98px, 25px) rotateY(90deg); } #sky .bird .wind:nth-child(9)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 152, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 2701ms 2793ms linear infinite; animation: wind 2701ms 2793ms linear infinite; } #sky .bird .wind:nth-child(10) { -webkit-transform: translate3d(179px, 81px, 60px) rotateY(90deg); transform: translate3d(179px, 81px, 60px) rotateY(90deg); } #sky .bird .wind:nth-child(10)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 157, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 2695ms 1346ms linear infinite; animation: wind 2695ms 1346ms linear infinite; } #sky .bird .wind:nth-child(11) { -webkit-transform: translate3d(15px, 59px, -87px) rotateY(90deg); transform: translate3d(15px, 59px, -87px) rotateY(90deg); } #sky .bird .wind:nth-child(11)::before { content: ''; position: absolute; width: 4px; height: 300px; background: rgba(100, 200, 37, 0.3); border-radius: 999px; -webkit-transform: translateY(-300px); transform: translateY(-300px); -webkit-animation: wind 2048ms 3411ms linear infinite; animation: wind 2048ms 3411ms linear infinite; } #sky .bird_body { position: relative; width: 30px; height: 40px; background: #81b8ea; } #sky .bird_head { position: absolute; top: -30px; border-right: 15px solid transparent; border-bottom: 30px solid #95abca; border-left: 15px solid transparent; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); } #sky .bird_wing_left { position: absolute; left: -30px; height: 30px; border-right: 30px solid #8971ee; border-bottom: 10px solid transparent; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate; animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate; } #sky .bird_wing_left_top { position: absolute; left: -30px; border-right: 30px solid #97b0d0; border-bottom: 30px solid transparent; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } #sky .bird_wing_right { position: absolute; left: 30px; height: 30px; border-left: 30px solid #7f95ff; border-bottom: 10px solid transparent; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate; animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate; } #sky .bird_wing_right_top { position: absolute; border-left: 30px solid #bcb4d0; border-bottom: 30px solid transparent; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } #sky .bird_tail_left { position: absolute; top: 40px; border-right: 30px solid transparent; border-top: 40px solid #656eeb; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); } #sky .bird_tail_right { position: absolute; top: 40px; border-left: 30px solid transparent; border-top: 40px solid #af83f5; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: rotateX(-20deg); transform: rotateX(-20deg); } @-webkit-keyframes fly { 0% { -webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg); transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg); } 100% { -webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg); transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg); } } @keyframes fly { 0% { -webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg); transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg); } 100% { -webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg); transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg); } } @-webkit-keyframes wingLeft { 0% { -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); } 100% { -webkit-transform: rotateY(40deg); transform: rotateY(40deg); } } @keyframes wingLeft { 0% { -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); } 100% { -webkit-transform: rotateY(40deg); transform: rotateY(40deg); } } @-webkit-keyframes wingRight { 0% { -webkit-transform: rotateY(40deg); transform: rotateY(40deg); } 100% { -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); } } @keyframes wingRight { 0% { -webkit-transform: rotateY(40deg); transform: rotateY(40deg); } 100% { -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); } } @-webkit-keyframes wind { 0% { -webkit-transform: translateY(-300px); transform: translateY(-300px); } 100% { -webkit-transform: translateY(200px); transform: translateY(200px); } } @keyframes wind { 0% { -webkit-transform: translateY(-300px); transform: translateY(-300px); } 100% { -webkit-transform: translateY(200px); transform: translateY(200px); } }
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号