CSS特效（一）---聚光灯

最新推荐文章于 2024-07-18 16:51:41 发布

祭夜醉美

最新推荐文章于 2024-07-18 16:51:41 发布

阅读量147

点赞数

分类专栏： # HTML & CSS & JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/qq_44665456/article/details/124314313

版权

HTML & CSS & JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

此博客介绍了如何使用HTML和CSS创建一个动态的网页，通过'h1'元素展示Melody，并结合data-spolight属性和CSS动画，实现文字周围光晕效果。背景设置为深色，整体设计聚焦于前端视觉与交互的创新。

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

index.html

<body>
  <h1 data-spolight = "melody!">melody</h1>
</body>

index.html

  body {
    background-color:#222;
    display:flex;
    justify-content: center;
    align-items:center;
    min-height: 100vh;
  }

  h1 {
    color:#333;
    font-family:Helvetica;
    margin:0;
    padding:0;
    font-size:8rem;
    letter-spacing: -0.3rem;
    position:relative;
  }
  
  h1::after {
    content:attr(data-spolight);
    color:transparent;
    position:absolute;
    top:0;
    left:0;
    -webkit-clip-path: ellipse(100px 100px at 50% 50%);
    clip-path:ellipse(100px 100px at 0% 50%);
     animation:spotlight 5s infinite;
     -webkit-animation:spotlight 5s infinite; 
     background-image: url(https://images.unsplash.com/photo-1573655349936-de6bed86f839?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGxpZ2h0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60);
     background-size: 150%;
     background-position: center center;
    -webkit-background-clip:text;
    background-clip: text;
  }

  @keyframes spotlight {
    0% {
      -webkit-clip-path: ellipse(100px 100px at 50% 50%);
    clip-path:ellipse(100px 100px at 0% 50%)
    }
    50% {
      -webkit-clip-path: ellipse(100px 100px at 50% 50%);
    clip-path:ellipse(100px 100px at 100% 50%)
    }
    100% {
      -webkit-clip-path: ellipse(100px 100px at 50% 50%);
    clip-path:ellipse(100px 100px at 0% 50%) 
    }
  }
</style>

祭夜醉美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS特效（一）---聚光灯

index.html<body> <h1 data-spolight = "melody!">melody</h1></body>index.html body { background-color:#222; display:flex; justify-content: center; align-items:center; min-height: 100vh; } h1 { col
复制链接

扫一扫

专栏目录