99久久国产露脸精品麻豆,欧美日韩精品小说,亚洲免费在线美女视频,国产三级中文字幕,91极品国产情侣高潮对白,国产亚洲一区二区三区不卡片,欧美jizz精品欧美性,久久国产精品久久国产片

利用css3的filter(濾鏡)屬性制作交融效果

袁志蒙 2023-04-23 15:13:21 1497次瀏覽

摘要：交融效果:方式一: 元素設置filter:blur模糊,元素父級設置contrast時,會實現模糊元素相交產生水滴交融且相交部分變清晰的效果即:進行動畫的圖形的父元素需要是被設置了filter:...

交融效果:

方式一: 元素設置filter:blur模糊,元素父級設置contrast時,會實現模糊元素相交產生水滴交融且相交部分變清晰的效果

即:進行動畫的圖形的父元素需要是被設置了filter: contrast

方式二: 元素本身設置filter:contrast,對偽元素設置filter:blur模糊,會使得元素和偽元素產生交融

filter:blur 對圖像應用設置高斯模糊
filter:contrast 調整圖像的對比度,能實現元素更亮|淡

例一：文字交融效果

利用css3的filter(濾鏡)屬性制作交融效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            margin-top: 100px;
            text-align: center;
            filter: contrast(30);
            background-color: #000;
        }
        .text{
            font-size: 100px;
            color:#fff;
            animation: showup 3s forwards;
        }
        @keyframes showup {
            from{
                letter-spacing: -50px;
                filter: blur(10px);
            }
            to{
                letter-spacing: 10px;
                filter: blur(2px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
		<span class="text">
			YZMCMS.COM
		</span>
	</div>
</body>
</html>

例二：水滴交融效果

利用css3的filter(濾鏡)屬性制作交融效果

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      body {
         background: #000;
         filter: contrast(100);
         overflow: hidden;
      }
      .ball {
         position: absolute;
         left: 0; 
         top: 40vh;
         height: 20vh;
         width: 20vh;
         border-radius: 50%;
         background: #fff;
         animation: move 10s infinite;
         z-index: 1;
         filter: blur(15px);
      }

      .wall {
         position: absolute;
         left: 20%; 
         top: 30vh;
         height: 40vh;
         width: 15vh;
         border-radius: 50%;
         background:red;
         filter: blur(15px) ;
         
      }

      @keyframes move {
         20% {
             transform: translate(20vw, 0);
             background: #ddd;
         }
         
         100% {
             transform: translate(100vw, 0);
             background: #ddd;
         }
      }
   </style>
</head>
<body>
    <div class="ball"></div>
    <div class="wall"></div>
</body>
</html>