纯CSS发光动效-CSS制作logo发光效果

最新推荐文章于 2022-06-24 11:05:50 发布

m0_60965117

最新推荐文章于 2022-06-24 11:05:50 发布

阅读量724

点赞数

分类专栏： CSS特效文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_60965117/article/details/121475100

版权

本文介绍了如何使用纯CSS创建发光动效，特别是在制作Logo发光效果方面的应用。提供了HTML和CSS代码示例，并给出了演示效果链接，帮助读者快速实现此类视觉效果。

摘要由CSDN通过智能技术生成

纯CSS发光动效-CSS制作logo发光效果

这里是html部分，复制进去就能用很简单

<div class="logo-nav">
    <a href="#">
      <img src="https://i-blog.csdnimg.cn/blog_migrate/52943d676d5f5814dc886877e749cdbc.webp?x-image-process=image/format,png" alt="">
      <i></i>
    </a>
  </div>

这里是css部分，复制进去就能用

body {
    background: #fff;
    font-family: "Arial";
    background-size: cover;
  }
  img{
    width: 160px;
  }
  a {
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 5px;
    color: #FAFAFA;
    padding:  5px 5px 0px 5px;
    position: absolute;
    left: 150px; /* 调整高度与宽度 */
    top: 150px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: transla