短視訊app製作，對於需要付費的內功，實現模糊遮罩效果

zhibo系統開發發表於2022-06-17
APP遮罩

短視訊app製作，對於需要付費的內功，實現模糊遮罩效果

css實現：

.tip {
position: relative;
top: 80px;
font-weight: 700;
text-align: center;
font-size: 16px;
color: #2878ff;
}

相容性：

由於用ie不支援::after這種偽類，所以ie中不支援此方法，ie中可以配合模糊化圖片進行處理。

完整程式碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內容模糊化</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.wraper {
position: relative;
width: 100px;
margin: 100px auto;
padding: 0 20px;
background-color: pink;
}
ul {
width: 100%;
}
ul li {
height: 40px;
line-height: 40px;
}
.tip {
position: relative;
top: 80px;
font-weight: 700;
text-align: center;
font-size: 16px;
color: #2878ff;
}
.blur {
position: relative;
filter: blur(5px);
user-select: none;
}
.blur::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background: rgba(255, 253, 253, 0.2);
}
</style>
</head>
<body>
<div class="wraper">
<p class="tip">開通VIP檢視</p>
<ul class="blur">
</ul>
</div>
</body>
</html>


以上就是 短視訊app製作，對於需要付費的內功，實現模糊遮罩效果，更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2901194/，如需轉載，請註明出處，否則將追究法律責任。

相關文章