微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css3太阳光效果

CSS3太阳光效果可以通过使用渐变和动画等特性来实现。以下是一段实现太阳光效果的CSS代码

.sun {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #Ffdb58;
  border-radius: 50%;
  overflow: hidden;
}
.sun::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,rgba(255,255,0) 0%,0) 10%,0.2) 20%,0.5) 40%,0.8) 60%,0.9) 80%,1) 100%);
  animation: sun-moon 30s linear infinite;
  transform-origin: center center;
}
@keyframes sun-moon {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

css3太阳光效果

在上面的代码中,我们创建了一个类名为.sun的div元素,将它的背景颜色设置为黄色,圆角半径为50%。接着,我们给.sun元素的before伪类添加样式,用线性渐变在透明的背景上添加白色光线,通过动画将背景旋转360度,形成太阳旋转的效果

可以通过调整渐变的颜色和动画的持续时间等属性来实现不同的太阳光效果

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。