问答

css3如何实现这种动画效果

作者:admin 2021-07-14 我要评论

参考地址 css3如何实现这样的圆环扩散效果 ### 看下这个 demo ### 我也写了个 demo 看你需要哪种吧 div class="boxw" div class="box"41.4/div/div .box { margi...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

参考地址
css3如何实现这样的圆环扩散效果
image.png

###

看下这个demo

###

我也写了个demo

看你需要哪种吧

<div class="boxw" >
  <div class="box">41.4</div>
</div>
.box {
  margin: 180px auto;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: #ffd300;
  animation: app 2s infinite;
  text-align: center;
  color: #1a1a1a;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
}
.boxw {
  margin: 180px auto;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: #ffd300;
}
@keyframes app {
  100% {
    -webkit-transform: scale(1.3, 1.3);
    -moz-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    -o-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    opacity: 0;
  }
}
###

动画里设置阴影效果,差不多这样吧

.spot {
    height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 5px rgba(234, 54, 75, 0.8);
  background: rgba(234, 54, 75, 0.8);
  animation: localShine 1.5s linear infinite;
}
@keyframes localShine {
  from {
    box-shadow: 0 0 0 0 rgba(234, 54, 75, 0.8);
  }
  to {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }
}
###

纯样式写这个吃力不讨好,不如找线上网站生成 SVG

补充:毕竟看样子你需要的并不是单层的扩散阴影效果,
看样子是环状的3层次的动画

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • css3如何实现这种动画效果

    css3如何实现这种动画效果

  • vue 锚点定位问题

    vue 锚点定位问题

  • golang 的工程,为什么包的路径和它在

    golang 的工程,为什么包的路径和它在

  • android 原生跳转vue

    android 原生跳转vue

腾讯云代理商
海外云服务器