纯Css完成鼠标悬浮灯光阴影特效

最新推荐文章于 2024-09-26 15:03:53 发布

simpleQQP

最新推荐文章于 2024-09-26 15:03:53 发布

阅读量565

点赞数 1

分类专栏： css创意特效文章标签： css css3 html5 前端

本文链接：https://blog.csdn.net/qq_40115330/article/details/106709013

版权

本文介绍如何仅通过CSS技术实现一种鼠标悬停时的灯光阴影特效，适用于前端开发中的交互增强。

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

纯Css完成鼠标悬浮灯光阴影特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      body{
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        background-color: #000000;
        min-height: 100vh;
      }
      a{
        position: relative;
        padding: 10px 30px;
        margin: 45px 0;
        color: #21ebff;
        text-decoration: none;
        font-size: 20px;
        text-transform: uppercase;
        transition: 0.5s;
        overflow: hidden;
        -webkit-box-reflect: below 1px linear-gradient(transparent,#0003);
      }
      a:hover{
        background-color: #21ebff;
        color: #111;
        box-shadow: 0 0 50px #21ebff;
        transition-delay: 0.5s;
      }

      a:nth-child(1){
        filter: hue-rotate(115deg);
      }

      a:nth-ch