[分享]css光束沿中心点旋转效果

CSS光束沿中心点旋转效果可以为网页增加动态效果，锦上添花。它使用CSS3中的transform属性以及配合动画效果实现。下面是实现该效果的代码示例：.beam { backgroundcolor: ...

CSS光束沿中心点旋转效果可以为网页增加动态效果，锦上添花。它使用CSS3中的transform属性以及配合动画效果实现。下面是实现该效果的代码示例：

.beam {
  background-color: #fff;
  width: 10px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;
  animation: rotate-beam 2s linear infinite;
}

@keyframes rotate-beam {
  from {
    transform: rotate(0deg);
    opacity: 1;
  }
  to {
    transform: rotate(360deg);
    opacity: 0;
  }
} 

以上代码中，.beam是指光束的样式，通过设置背景颜色、宽度、高度、位置、圆角以及四次阴影的组合，为光束定制外观。translate(-50%, -50%)用来让光束在屏幕中间旋转。rotate-beam动画是光束的旋转动画，通过设置从0度到360度的旋转以及透明度从1到0的变化，使得光束沿中心点旋转的效果更加鲜明生动。

使用CSS3中的transform属性及动画效果，可以实现各种精美的动画效果，充分体现了CSS在Web设计中的重要性和灵活性。希望以上文章对大家学习css光束沿中心点旋转效果有所帮助。