在第一阶段 CSS3 新增属性的学习中, 掌握了有关 3d 的知识, 下面是利用 transform 属性的 3d 效果做的一个星空中星球围绕太阳旋转, 实现了自转和公转效果; 话不多说, 直接 code:
html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <link href="css/main.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <p class="mainbox">
- <p class="star sun">
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- </p>
- <p class="pathway a">
- <p class="star mercury">
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- </p>
- </p>
- <p class="pathway b">
- <p class="star saturn">
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- </p>
- </p>
- <p class="pathway c">
- <p class="star earth">
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- <p class="starline"></p>
- </p>
- </p>
- </p>
- </body>
- </html>
- CSS:
- html,body{
- height: 100%;
- padding: 0;
- margin: 0;
- background: #000;
- perspective: 1000px;
- overflow: hidden;
- background:url(../images/xk.jpg) no-repeat center;
- background-size:100% auto;
- }
- .mainbox{
- transform-style: preserve-3d;
- height: 100%;
- transform: rotateX(70deg) rotateY(-20deg);
- }
- .pathway{
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- border: 3px solid #b7b7b7;
- width: 400px;
- height: 400px;
- border-radius: 50%;
- transform-style: preserve-3d;
- box-shadow: 30px 20px 150px #fff;
- }
- .pathway.a{
- animation: starrotate 8s linear;
- animation-iteration-count: infinite;
- }
- .pathway.b{
- width: 600px;
- height: 600px;
- animation: starrotate 15s linear;
- animation-iteration-count: infinite;
- }
- .pathway.c{
- width: 800px;
- height: 800px;
- animation: starrotate 20s linear;
- animation-iteration-count: infinite;
- }
- .star{
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 300px;
- height: 300px;
- transform-style: preserve-3d;
- /*border: 1px solid #fff;*/
- animation: starrotate 10s linear;
- animation-iteration-count: infinite;
- }
- .starline{
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- width: 100%;
- height: 100%;
- border: 1px solid #FFD700;
- border-radius: 50%;
- }
- .starline:nth-child(1){
- transform: rotateY(20deg);
- }
- .starline:nth-child(2){
- transform: rotateY(40deg);
- }
- .starline:nth-child(3){
- transform: rotateY(60deg);
- }
- .starline:nth-child(4){
- transform: rotateY(80deg);
- }
- .starline:nth-child(5){
- transform: rotateY(100deg);
- }
- .starline:nth-child(6){
- transform: rotateY(120deg);
- }
- .starline:nth-child(7){
- transform: rotateY(140deg);
- }
- .starline:nth-child(8){
- transform: rotateY(160deg);
- }
- .starline:nth-child(9){
- transform: rotateY(180deg);
- }
- .starline:nth-child(10){
- transform: rotateX(20deg);
- }
- .starline:nth-child(11){
- transform: rotateX(40deg);
- }
- .starline:nth-child(12){
- transform: rotateX(60deg);
- }
- .starline:nth-child(13){
- transform: rotateX(80deg);
- }
- .starline:nth-child(14){
- transform: rotateX(100deg);
- }
- .starline:nth-child(15){
- transform: rotateX(120deg);
- }
- .starline:nth-child(16){
- transform: rotateX(140deg);
- }
- .starline:nth-child(17){
- transform: rotateX(160deg);
- }
- .starline:nth-child(18){
- transform: rotateX(180deg);
- }
- .sun .starline{
- box-shadow: 0px 0px 50px 0px #FFD700;
- }
- .mercury{
- width: 30px;
- height: 30px;
- left:98%;
- }
- .mercury .starline{
- border-color: #0000FF;
- }
- .saturn{
- width: 50px;
- height: 50px;
- left:97%;
- }
- .saturn .starline{
- border-color:#808000;
- }
- .earth{
- width: 80px;
- height: 80px;
- left:95%;
- }
- .earth .starline{
- border-color:#007AFF;
- }
- @keyframes starrotate{
- from{transform: rotateZ(0deg);}
- to{transform: rotateZ(360deg);}
- }
来源: https://www.2cto.com/kf/201807/760174.html