【css】简单大气css玻璃滤镜样式

最新推荐文章于 2024-05-07 14:55:18 发布

KatyLight

最新推荐文章于 2024-05-07 14:55:18 发布

阅读量249

点赞数

分类专栏：样式文章标签： css css3

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

版权

样式专栏收录该内容

32 篇文章 0 订阅

订阅专栏

按钮会比背景饱和度更高，点击时候更高。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>




    .back {

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

    .cube {
      background: inherit;
      filter: saturate(60%);
      z-index: 11;
      border-top:solid 10px rgba(255, 255, 255, 0.44);
      border-left:solid 10px rgba(255, 255, 255, 0.44);
      border-right:solid 10px rgba(0, 0, 0, 0.58);
      border-bottom:solid 10px rgba(0, 0, 0, 0.58);
      /*border: solid 1px rgba(255, 255, 255, 0.39);*/
      /*box-shadow: inset 10px 10px 0  10px rgba(255, 255, 255, 0.31) ,  inset -10px -10px  0  10px rgba(0, 0, 0, 0.31);*/
      text-align: center;
      color: white;

      height: 400px;
      width: 400px;
      margin: 10px;
      float: left;
      position: relative;
      user-select: none;
      font-size: 25px;
      font-weight: bolder;
      box-sizing: border-box;
     }
    .cube >span{
      line-height: 400px;
      vertical-align: middle;
    }
    .cube:active{
      filter:saturate(200%);
      border-top:solid 10px   rgba(0, 0, 0, 0.58);
      border-left:solid 10px  rgba(0, 0, 0, 0.58);
      border-right:solid 10px rgba(255, 255, 255, 0.44);
      border-bottom:solid 10px rgba(255, 255, 255, 0.44);
    }
    body {
      background-image: url("./IOS7星空壁纸.png");
      background-repeat: no-repeat;
      /*background-size: 80px 80px;*/
      background-position: center;
      background-size: 100% 100%;
      background-attachment: fixed;
    }
  </style>
</head>
<body>

<div class="back"></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<div class="cube a11"><span>schön</span></div>
<!--<div class="cube a7 b1"></div>-->
<!--<div class="cube a7 b2" ></div>-->
</body>
</html>

KatyLight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】简单大气css玻璃滤镜样式

按钮会比背景饱和度更高，点击时候更高。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .back { background: inherit; filter: saturate(0); position:...
复制链接

扫一扫