【css】在环境所有内容模糊下hover变得清晰。

KatyLight

已于 2022-08-02 10:50:29 修改

阅读量152

点赞数

分类专栏：静态页demo 样式文章标签： html 前端

于 2022-08-02 10:50:03 首次发布

本文链接：https://blog.csdn.net/qq_33014695/article/details/126117850

版权

样式同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

静态页demo

16 篇文章 0 订阅

订阅专栏

目前没有什么应用范围，这个先放着以后研究。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .cube {
      color: white;
      height: 100px;
      width: 100px;
      margin: 10px;
      float: left;
      position: relative;
      user-select: none;
      font-size: 25px;
      font-weight: bolder;
      box-sizing: border-box;
    }






    .back {

      background: inherit;
      filter: blur(52px);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: revert;
      width: revert;
    }

    .cube.a11 {
      background: inherit;
      filter: blur(10px);
      z-index: 11;
      border: solid 3px cyan;

    }
    .cube.a11:hover{

      filter: blur(0);
    }
    body {
      background-image: linear-gradient(45deg, #3b0a3b 0%, #230422 50%, #0a3a33 50%, #0a3a33);
      /*background-repeat: no-repeat;*/
      background-size: 80px 80px;
      background-position: center;
      background-attachment: fixed;
    }
  </style>
</head>
<body>

<div class="back"></div>
<div class="cube a11">ads</div>
<div class="cube a11">a</div>
<div class="cube a11"></div>
<div class="cube a11"></div>
<div class="cube a11"></div>
<div class="cube a11"></div>
<div class="cube a11"></div>
<div class="cube a11"></div>
<div class="cube a11"></div>
<div class="cube a11"></div>

<!--<div class="cube a7 b1"></div>-->
<!--<div class="cube a7 b2" ></div>-->
</body>
</html>