css 卡片绕着地球旋转

CSS是一门用于网站美化的语言，它可以制作出各种各样的效果。今天我们来学习一下如何制作一张卡片绕着地球旋转的动态效果。

/*首先定义一个地球的样式*/#earth{
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: url(earth.jpg) no-repeat center center;
      background-size: cover;
}
/*然后定义一个卡片的样式*/#card{
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -50px;
      width: 200px;
      height: 100px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
      text-align: center;
      line-height: 100px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
}
/*最后定义一个动画，使卡片绕着地球旋转*/@keyframes rotate-earth{
  from{
        transform: rotate(0deg);
  }
  to{
        transform: rotate(360deg);
  }
}
#card{
      animation: rotate-earth 10s linear infinite;
}
    

以上代码中，我们首先定义了地球的样式，这里采用了一个圆形的背景图片，并且通过border-radius属性将其设为圆形。然后定义了一个卡片的样式，这里采用了一个白色背景，并且设置了一些效果，比如阴影、字体颜色等等。最后通过定义一个动画，使卡片绕着地球旋转。

以上就是如何制作一张卡片绕着地球旋转的动态效果的方法了。相信通过这次介绍，你也可以掌握CSS的基本运用，制作出更加酷炫的网页效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！