Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
*{ margin: 0; padding: 0; } body{ background-color: #102037; overflow: hidden; } @-webkit-keyframes snow { 0% { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); } 20%{ opacity: 1;} 100% { opacity: 1; -webkit-transform: translateY(650px); transform: translateY(650px); } } @keyframes snow { 0% { opacity: 0; -webkit-transform: translateY(0px); transform: translateY(0px); } 20%{ opacity: 1;} 100% { opacity: 1; -webkit-transform: translateY(650px); transform: translateY(650px); } } @-webkit-keyframes astronaut{ 0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .box-of-star1, .box-of-star2, .box-of-star3, .box-of-star4{ width: 100%; position: absolute; z-index: 10; left: 0; -webkit-transform: translateY(650px); transform: translateY(650px); } .box-of-star1{ -webkit-animation: snow 5s linear infinite; } .box-of-star2{ -webkit-animation: snow 5s -1.64s linear infinite; } .box-of-star3{ -webkit-animation: snow 5s -2.30s linear infinite; } .box-of-star4{ -webkit-animation: snow 5s -3.30s linear infinite; } .star{ width: 3px; height: 3px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; opacity: .7; } .star:before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; top: 40px; left: 70px; opacity: .7; } .star:after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: #FFF; position: absolute; z-index: 10; top: 8px; left: 170px; opacity: .9; } .star-position1{ top: 30px; left: 20px; } .star-position2{ top: 110px; left: 250px; } .star-position3{ top: 60px; left: 570px; } .star-position4{ top: 120px; left: 900px; } .star-position5{ top: 20px; left: 1120px; } .star-position6{ top: 90px; left: 1280px; } .star-position7{ top: 30px; left: 1480px; } .astronaut{ width: 250px; height: 300px; position: absolute; z-index: 11; top: calc(50% - 150px); left: calc(50% - 125px); -webkit-animation: astronaut 5s linear infinite; } .schoolbag{ width: 100px; height: 150px; position: absolute; z-index: 1; top: calc(50% - 75px); left: calc(50% - 50px); background-color: #94b7ca; border-radius: 50px 50px 0 0 / 30px 30px 0 0; } .head{ width: 97px; height: 80px; position: absolute; z-index: 3; background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%); border-radius: 50%; top: 34px; left: calc(50% - 47.5px); } .head:after{ content: ""; width: 60px; height: 50px; position: absolute; top: calc(50% - 25px); left: calc(50% - 30px); background: -webkit-linear-gradient(top, #15aece 0%, #15aece 50%, #0391bf 50%, #0391bf 100%); border-radius: 15px; } .head:before{ content: ""; width: 12px; height: 25px; position: absolute; top: calc(50% - 12.5px); left: -4px; background-color: #618095; border-radius: 5px; box-shadow: 92px 0px 0px #618095; } .body{ width: 85px; height: 100px; position: absolute; z-index: 2; background-color: #fffbff; border-radius: 40px / 20px; top: 105px; left: calc(50% - 41px); background: -webkit-linear-gradient(left, #e3e8eb 0%, #e3e8eb 50%, #fbfdfa 50%, #fbfdfa 100%); } .panel{ width: 60px; height: 40px; position: absolute; top: 20px; left: calc(50% - 30px); background-color: #b7cceb; } .panel:before{ content: ""; width: 30px; height: 5px; position: absolute; top: 9px; left: 7px; background-color: #fbfdfa; box-shadow: 0px 9px 0px #fbfdfa, 0px 18px 0px #fbfdfa; } .panel:after{ content: ""; width: 8px; height: 8px; position: absolute; top: 9px; right: 7px; background-color: #fbfdfa; border-radius: 50%; box-shadow: 0px 14px 0px 2px #fbfdfa; } .arm{ width: 80px; height: 30px; position: absolute; top: 121px; z-index: 2; } .arm-left{ left: 30px; background-color: #e3e8eb; border-radius: 0 0 0 39px; } .arm-right{ right: 30px; background-color: #fbfdfa; border-radius: 0 0 39px 0; } .arm-left:before, .arm-right:before{ content: ""; width: 30px; height: 70px; position: absolute; top: -40px; } .arm-left:before{ border-radius: 50px 50px 0px 120px / 50px 50px 0 110px; left: 0; background-color: #e3e8eb; } .arm-right:before{ border-radius: 50px 50px 120px 0 / 50px 50px 110px 0; right: 0; background-color: #fbfdfa; } .arm-left:after, .arm-right:after{ content: ""; width: 30px; height: 10px; position: absolute; top: -24px; } .arm-left:after{ background-color: #6e91a4; left: 0; } .arm-right:after{ right: 0; background-color: #b6d2e0; } .leg{ width: 30px; height: 40px; position: absolute; z-index: 2; bottom: 70px; } .leg-left{ left: 76px; background-color: #e3e8eb; -webkit-transform: rotate(20deg); transform: rotate(20deg); } .leg-right{ right: 73px; background-color: #fbfdfa; -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .leg-left:before, .leg-right:before{ content: ""; width: 50px; height: 25px; position: absolute; bottom: -26px; } .leg-left:before{ left: -20px; background-color: #e3e8eb; border-radius: 30px 0 0 0; border-bottom: 10px solid #6d96ac; } .leg-right:before{ right: -20px; background-color: #fbfdfa; border-radius: 0 30px 0 0; border-bottom: 10px solid #b0cfe4; }
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号