css3写玻璃融

CSS3在视觉效果上又有了新突破，其中之一就是玻璃融效果。

实现这种效果需要用到过渡和透明度属性。以下是实现玻璃融效果的CSS3代码：

.glass{
  position: relative;
  margin: 30px auto;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  Box-shadow: 0 0 20px #999;
  overflow: hidden;
}

.glass:after{
  content: "";
  position: absolute;
  top: -25%;
  left: -25%;
  right: -25%;
  bottom: -25%;
  background: linear-gradient(rgba(255,255,.8),rgba(255,0));
  transform: rotate(-45deg);
  animation: move 2s infinite;
}

@keyframes move {
  0%{
    transform: rotate(-45deg) translateX(-50%);
  }
  50%{
    transform: rotate(-45deg) translateX(50%);
  }
  100%{
    transform: rotate(-45deg) translateX(-50%);
  }
}

首先，需要一个容器，这个容器使用position: relative定位，然后设定宽度和高度，使用border-radius使之变为一个圆形，最后使用Box-shadow创造一个阴影效果。我们把这个容器命名为.glass。

接下来，需要在这个容器中创建一个伪元素 :after，这个伪元素的大小是原来容器的四倍，然后使用background: linear-gradient()给它加上线性渐变的背景颜色，使用rotate()让它倾斜45度，使用animation让它做出动画效果。

最终的效果就是，一个类似玻璃融效果的圆形容器。这个效果非常的简单和优雅，用于网页设计中可以起到非常好的视觉效果。