css实现js效果，超详细，非常实用

CSS和JavaScript是两种不同的前端技术，各有其作用和用途。CSS主要用于样式设计和页面布局，而JavaScript则用于实现页面的交互功能和动态效果。虽然CSS和JavaScript的功能不同，但有时候我们可以通过一些技巧使用CSS来模拟一些JavaScript功能，从而达到简化页面代码和提高加载速度的目的。下面就介绍几种使用CSS实现JS功能的常见技巧。

1. 使用CSS实现简单的交互效果

CSS可以用于创建一些简单的交互效果，例如鼠标悬停时改变元素的颜色、大小等。这些效果可以通过使用CSS的伪类选择器和属性选择器来实现，而不需要使用JavaScript。例如，下面的代码使用CSS实现了当鼠标悬停在按钮上时改变按钮颜色的效果：

.btn {
  background-color: blue;
  color: white;
}

.btn:hover {
  background-color: red;
}

2. 使用CSS实现动画效果

CSS还可以用于创建动画效果，例如渐变、旋转、缩放等。这些效果可以通过使用CSS的过渡和动画属性来实现，而不需要使用JavaScript。例如，下面的代码使用CSS实现了当页面加载时显示一个元素从透明到不透明的渐变效果：

box {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

body:is(:not(.page-loaded)) .box {
  opacity: 1;
}

3. 使用CSS实现数据展示

虽然CSS不是用来处理数据的，但是它可以通过样式的方式将数据展示在页面上。例如，下面的代码使用CSS将一组数字按照特定的样式显示在页面上：

number-list {
  display: flex;
  justify-content: space-between;
}

.number-list .number {
  font-size: 2em;
  color: blue;
}

<div class="number-list">
  <div class="number">1</div>
  <div class="number">2</div>
  <div class="number">3</div>
  <div class="number">4</div>
  <div class="number">5</div>
</div>

我们使用CSS定义了一个名为`.number`的类，用于将数字按照特定的样式显示在页面上。然后我们在HTML中使用该类，将数字展示在`.number-list`容器中。

总之，虽然CSS不能完全替代JavaScript，但是它可以通过一些技巧来实现一些简单的交互效果、动画效果和数据展示，从而简化页面代码和提高加载速度。