用css写一段地球滚动的代码

这是一段CSS代码：body {
background: url("earth.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
animation: earth 10s linear infinite;
}@keyframes earth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

相关问题

用css写一段云朵形状的代码

好的，以下是一段用 CSS 实现云朵形状的代码：

.cloud {
  width: 150px;
  height: 100px;
  border-radius: 50%;
  background-color: white;
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.cloud:before,
.cloud:after {
  content: "";
  position: absolute;
  background-color: white;
  border-radius: 50%;
}

.cloud:before {
  width: 70px;
  height: 70px;
  top: -30px;
  left: 10px;
}

.cloud:after {
  width: 90px;
  height: 90px;
  top: -50px;
  right: 10px;
}

这段代码实现了一个白色的云朵形状，使用了 CSS 的基本属性，如 `width`、`height`、`border-radius` 等，以及 `:before` 和 `:after` 伪元素，通过绝对定位和 `top`、`left`、`right` 等属性来实现云朵的形状。

写一段数字滚动效果代码

以下是一个简单的数字滚动效果的代码：

HTML:

<div id="counter">0</div>

CSS:

#counter {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  color: #333;
}

JavaScript:

// 定义变量
let count = 0;
const targetCount = 100;
const duration = 2000; // 动画持续时间，单位为毫秒

// 获取DOM元素
const counter = document.getElementById('counter');

// 定义动画函数
function animateValue(start, end, duration) {
  let startTime = null;
  function update(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    const value = Math.floor(progress * (end - start) + start);
    counter.innerHTML = value.toLocaleString(); // 将数字转换为千位分隔符形式
    if (timeElapsed < duration) {
      requestAnimationFrame(update);
    }
  }
  requestAnimationFrame(update);
}

// 开始动画
animateValue(count, targetCount, duration);

在上面的代码中，我们定义了三个变量：`count`表示起始数字，`targetCount`表示目标数字，`duration`表示动画持续时间。我们通过`document.getElementById`方法获取了`<div>`元素，然后定义了一个`animateValue()`函数，该函数会在指定的时间内将数字逐步增加到目标值。最后，我们调用`animateValue()`函数并将起始数字、目标数字和动画持续时间作为参数传递进去，即可开始数字滚动效果。