Declaration: this code is not the author of the original, is in the development process, feel some special effects better, on the collection of some mask special effects source code, for future use. All source code as long as I did not write myself, I will cite the source. If the original author does not want to be reprinted for use, please contact me to delete the relevant content. I will continue to update the mask effect, which is convenient for myself to check and use in the future, but also hope to bring convenience to everyone.
The function of a mask mask is to mask an element’s background with a transparent image or gradient. Therefore, mask mask is very similar to background background, except that there is no color subattribute, and the remaining six subattributes of background background have masks. Mask is a compound attribute, Including mask-image, mask-mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, mask-composite: Internet Explorer does not support webKit-enabled browsers (including Chrome, Safari, IOS, and Android) need to add the -webkit- prefix. Note in particular that firefox also supports the WebKit-mask attribute
“Mask – image”
The default is None, and the value is transparent image, or transparent gradient
【 mask – repeat 】
The default value is repeat, and the optional value is the same as background-repeat, but the details go there
“Mask – position”
The default value is 0, 0, and the optional value is the same as background-position
【 mask – clip 】
The default value is border-box, and the optional value is the same as background-clip. For details, go to this point
【 mask – origin 】
The default value is border-box, and the optional value is the same as background-origin
“Mask – size”
The default value is auto, and the optional value is the same as background-size
【 mask – mode 】
The default value is match-source, and the optional values are alpha, luminance, match-source, or a combination of them
【 mask – composite 】
The default value is add. Optional values are Add, subtract, INTERSECT, and exclude
[Note] Only Firefox supports mask-mode and mask-Composite
Gaussian blur +mask
For a full explanation, please check the original text
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100vh;
width: 100vw;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: "Open Sans"."PingFang SC"."Microsoft YaHei"."Helvetica Neue"."Hiragino Sans GB"."WenQuanYi Micro Hei",Arial,sans-serif;
}
@keyframes move {
0% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
.bg {
background: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
background-size: cover;
position: fixed;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
filter: blur(15px);
z-index: -1;
}
.mask {
width: 340px;
height: 196px;
animation: move 40s infinite;
background-image: url(https://sp-webfront.skypixel.com/skypixel/v2/public/website/assets/1535027674204-f6eca6369ec03e70262b58b0e25cda7b.jpg);
background-size: cover;
-webkit-mask:
url(http://static.w3ctrain.com/upload_cae6fcb079f57792a47202cb67bbc04a-dji-seeklogo.com.svg);
-webkit-mask-size: cover;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="mask"></div>
</body>
</html>
Copy the code【 reprint 】 A glimpse of a little
The source forgot #-#, the original author after reading please contact me, I add the source.
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position:absolute;
width: 400px;
border:1px solid black;
}
#mask{
height: 300px;
background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;
-webkit-mask: url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;
animation: 2s maskPosition infinite alternate ;
}
#mask:hover{animation: none; } @keyframes maskPosition{ 0%{-webkit-mask-position:0 0; } 100%{-webkit-mask-position:100% 100%; } } </style> </head> <body> <div class="wrap">
<div id="mask"></div>
</div>
<script>
var oBox = document.getElementById('mask');
oBox.onmousemove = function(e){
e = e || event;
oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
}
</script>
</body>
</html>
Copy the codeThree, [reprint] hollow effect
This effect is reproduced on the excavation of a god, this paper only records, convenient later access to use. If you want to understand how this works, check out the original article
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-image: linear-gradient(-45deg, #8067B7, #EC87C0);
min-height: calc(100vh - 40px);
margin: 20px;
font-family: 'Lato', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.mask {
width: 288px;
height: 176px;
background: url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
background-size: cover;
}
.ticket-mask {
width: 288px;
height: 176px;
-webkit-mask:
url(http://static.w3ctrain.com/upload_dc601fca016e97ec2575565e7f0dcfb2-mask2.svg);
mask-size: cover;
}
.ticket {
width: 288px;
height: 176px;
border-radius: 4px;
overflow: hidden;
background-image: linear-gradient(134deg, #3023AE 0%, #C86DD7 100%);
}
.info {
height: 120px;
background: url(http://static.w3ctrain.com/upload_9c0746a7eb377f304e733edc1effdb40-cover.jpeg);
padding: 24px 16px;
color: white;
}
h3 {
font-size: 24px;
line-height: 32px;
}
p {
margin: 16px 0 0 0;
}
button {
background: transparent;
appearance: none;
display: flex;
border: none;
height: 56px;
justify-content: center;
align-items: center;
width: 100%;
font-size: 14px;
color: white;
outline: none;
}
.symbol {
color: white;
font-size: 64px;
margin: 16px 40px;
}
.addend {
display: flex;
align-items: center;
}
@media (max-width: 800px) {
flex-direction: column
;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="addend">
<div class="ticket">
<div class="info"Play fracture > < h3 > < / h3 > < p > specializes in a variety of defy < / p > < / div > < button > buy buy buy < / button > < / div > < span class ="symbol">+</span>
<div class="mask"></div>
</div>
<span class="symbol">=</span>
<div class="ticket-mask">
<div class="ticket">
<div class="info"Play fracture > < h3 > < / h3 > < p > specializes in a variety of defy < / p > < / div > < button > buy buy buy < / button > < / div > < / div > < / div > < / body > < / HTML >Copy the code