css3 纯代码案例

CSS3提供了许多创造性和效果性的样式，以下是一些使用纯CSS3创建的代码案例：

1. 创建一个简单的加载动画：

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db; 
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}
 
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

2. 创建一个简单的阴影效果：

div {
  width: 100px;
  height: 100px;
  background: #474747;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.6);
}

3. 创建一个渐变背景色：

body {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

4. 创建一个圆角效果：

div {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  border-radius: 25px;
}

5. 创建一个阴影效果：

div {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

6. 创建一个3D旋转效果：

.card {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  margin: 50px;
  perspective: 1000px;
}
 
.card:hover {
  transform: rotateY(180deg);
}

这些都是使用CSS3创建的简单示例，CSS3提供了许多其他复杂的效果和动画，可以用来创建各种各样的网页设计。