一款纯CSS的宇航员太空漂浮动画,宇航员在做顺时针自旋转运动,太空的背景里星星点点会自动地若隐若现。
页面的head部分,需引入页面的样式文件,代码如下:
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,需设置好太空背景和宇航员等容器和内容,代码如下:
<div class="box-of-star1">
<div class="star star-position1"></div>
<div class="star star-position2"></div>
<div class="star star-position3"></div>
<div class="star star-position4"></div>
<div class="star star-position5"></div>
<div class="star star-position6"></div>
<div class="star star-position7"></div>
</div>
<div class="box-of-star2">
<div class="star star-position1"></div>
<div class="star star-position2"></div>
<div class="star star-position3"></div>
<div class="star star-position4"></div>
<div class="star star-position5"></div>
<div class="star star-position6"></div>
<div class="star star-position7"></div>
</div>
<div class="box-of-star3">
<div class="star star-position1"></div>
<div class="star star-position2"></div>
<div class="star star-position3"></div>
<div class="star star-position4"></div>
<div class="star star-position5"></div>
<div class="star star-position6"></div>
<div class="star star-position7"></div>
</div>
<div class="box-of-star4">
<div class="star star-position1"></div>
<div class="star star-position2"></div>
<div class="star star-position3"></div>
<div class="star star-position4"></div>
<div class="star star-position5"></div>
<div class="star star-position6"></div>
<div class="star star-position7"></div>
</div>
<div class="astronaut" data-js="astro">
<div class="head"></div>
<div class="arm arm-left"></div>
<div class="arm arm-right"></div>
<div class="body">
<div class="panel"></div>
</div>
<div class="leg leg-left"></div>
<div class="leg leg-right"></div>
<div class="schoolbag"></div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791