background
Before that, I didn't know much about the css filter attribute in ---7aa4f752922ac70bd3d80ef47c5dd93c---, and I only knew how to use this attribute to change the color of the svg picture. Document and do a lot of experiments, and have some inspiration and ideas, simply share them here.
1. filter filter
The name "filter" is very appropriate. It can be understood as adding various display effects to elements. First, we don't need to remember various nouns. Let's look at the effects directly. How to use & renderings:
<style>
#lulu {
filter: grayscale(1);
}
</style>
<body>
<img id="lulu" src="./img/头像.jpeg" />
</body>
Looking at these effects in the picture above, for example, the first one in the first row, we will think that the overall website will turn into a gray style on some specific anniversaries, which should be the attribute used. The first one in the second row is Can be used with something to be "struck by lightning"?
2. Do a 'jitter' effect
When I saw this picture, my first thought was to make a jitter special effect, which is the kind of very dynamic effect:
Of course, it also works well with a rotation:
The principle is that two pictures are layered together, and the above picture is zoomed in and rotated through animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
position: relative;
border: 1px solid gray;
display: flex;
overflow: hidden;
width: 110px;
padding: 0px;
margin-top: 100px;
margin-left: 300px;
}
.box>img {
width: 100px;
height: 100px;
margin-left: 6px;
filter: invert(1);
}
.mk {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
animation: cc 0.5s linear infinite;
}
@keyframes cc {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
.mk2 {
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
animation: cc2 0.5s linear infinite alternate;
border-radius: 50%;
overflow: hidden;
}
@keyframes cc2 {
from {
transform: scale(2.2) rotate(30deg);
}
to {
transform: scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<img src="./img/头像.jpeg" />
<img class="mk" src="./img/头像.jpeg" />
</div>
<div class="box">
<img src="./img/头像.jpeg" />
<img class="mk2" src="./img/头像.jpeg" />
</div>
</body>
</html>Three, drop-shadow shadow
filter attribute is set by drop-shadow to add shadow to the element, but there is already box-shadow attribute, so what is the difference between these two attributes?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#w1 {
width: 50px;
height: 50px;
font-size: 36px;
font-weight: 900;
box-shadow: 0 0 2px red;
}
#w2 {
width: 50px;
height: 50px;
font-size: 36px;
font-weight: 900;
filter: drop-shadow(0px 0px 2px red);
}
</style>
</head>
<body>
<p id="w1">九</p>
<p id="w2">九</p>
</body>
</html> As can be seen from the above figure, box-shadow is for the entire dom元素 to generate shadows, but drop-shadow will ignore the "transparent" part.
Fourth, drop-shadow copy (make a picture guessing game)
Note: I am using svg images here.
Since both box-shadow have the ability to set shadows for elements, then box-shadow has the ability to copy itself drop-shadow is there also?
The so-called copy style of box-shadow f3a8b1b26c8ea56974748742d2b2534b--- is shown in the figure, box-shadow can make n styles with the same or different shape as the element itself, the red square on the right side of the picture below is the shadow of the left picture :
Take another look at the performance of drop-shadow :
When I saw the picture above, my first reaction was the "guess the character" game. We displayed the outline of the character, which is the picture on the right, and then displayed the original picture on the left when the answer was announced.
There is a bug in the assignment gif
There will be bugs in the assignment gif, and the effect is as follows:
Five, drop-shadow batch copy
box-shadow attribute can write multiple attribute values, I usually use this attribute to make a single style dom The copy effect of the element is as follows:
drop-shadow a bit 'ruthless', each copy of his is based on the shadow cast of the last overall effect:
As can be seen from the above picture, after the first copy, there are two horizontal rows, and the second projection produces the two below, and each projection is superimposed. Let's look at a more exaggerated set:
It is conceivable how terrible this growth method is, and it can cover the screen with a few writings.
"Find the Differences" Mini Game
We can make a shadow, but one of them we make a separate style to cover, test everyone's eyesight, as shown in the legend:
Here is the use of drop-shadow to generate shadows, and then make a little modification, the correct answer is here:
So as long as you write two more pieces of code, you can make this 8x8 become as much as 16x16, which should be quite fun.
Six, the combination of drop-shadow and box-shadow
drop-shadow and box-shadow both have the ability to project, so what will his two attributes work together on an element look like:
box-shadow will be based on all projections generated by the drop-shadow attribute for transmission shadowing, the first row is the projection of drop-shadow , the second row is the projection of box-shadow The projection, how to play specifically, I haven't thought of too suitable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#wrap {
position: relative;
height: 350px;
width: 500px;
margin: 50px auto;
overflow: hidden;
}
#n {
border: 1px solid gray;
width: 50px;
box-shadow: 0 200px;
transform: rotate(10deg);
filter: drop-shadow(70px 0) drop-shadow(140px 0px);
}
</style>
</head>
<body>
<div id="wrap">
<img id="n" src="./svg/人.svg" /
</div>
</body>
</html>7. 'Motion' after drop-shadow copying
Since so many projections can be projected, if my element rotates, will the projection also rotate? And what law does it move?
The following demonstration is, the object projection + the object itself rotation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#wrap {
position: relative;
height: 350px;
width: 400px;
margin: 250px auto;
}
#n {
width: 20px;
filter: drop-shadow(25px 0) drop-shadow(50px 0px) drop-shadow(100px 0);
animation: rr 2s linear infinite;
}
@keyframes rr {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<img id="n" src="./svg/人.svg" />
</div>
</body>
</html>The above is that the whole rotates with the 'element' itself as the rotation point, so how to make each projection of the 'element' rotate with itself as the origin?
The idea here is that in img outer wrapping layer div , our external layer div is projected internal img responsible for the rotation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#wrap {
position: relative;
height: 350px;
width: 400px;
margin: 250px auto;
}
#box {
width: 20px;
height: 20px;
filter: drop-shadow(25px 0) drop-shadow(50px 0px) drop-shadow(100px 0);
}
#n {
width: 20px;
animation: rr 2s linear infinite;
}
@keyframes rr {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="box">
<img id="n" src="./svg/人.svg" />
</div>
</div>
</body>
</html>Eight, filter attribute coloring (svg + png) pictures
The most direct way to change svg color is to change its own fill attribute, which is not discussed here, what we need to study here is why filter can change the picture What is the principle of color? Here we will explore it together (only solid color pictures are discussed here).
formation of contours
Not all pictures are given the drop-shadow attribute and will show the outline of the object, and the projection will ignore the transparent background, so png This kind of picture that can define a transparent background can be used. Project the corresponding outline instead of a rectangular outline, the same is true for svg.
For example, jpg cannot set a transparent background, so its projection effect is the same as box-shadow .
svg + png projection discoloration
We can use drop-shadow to make a projection of a specified color, and then just hide the element itself, leaving only the projection and it's ok.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box2 {
display: inline-block;
overflow: hidden;
}
#glasses2 {
filter: drop-shadow(200px 0 red);
transform: translateX(-200px);
}
</style>
</head>
<body>
<div>
<div id="box2">
<img id="glasses2" src="./img/太阳镜.png" />
</div>
</div>
</body>
</html>The superposition of the color discoloration is a bit strong!
Is there a way to directly change the color of the element itself? I tried to cast the drop-shadow at its own position, but the shadow cast is always behind the element, I tried to make the element opacity smaller, The shadow will also be smaller, if set opacity:0 the shadow is not visible.
No matter what color is nothing more than the composite color of three primary colors, filter attributes can define so many filters, does that mean that the superposition state of some filter effects is the target color we want:
It is not realistic to generate so many properties manually. Following this idea, I found a website that really does this:
Mix and color for pictures official website
- It takes a few more clicks of the
Compute Filtersbutton until the properties with less difference are generated. - If our element is not pure black, we need to first give it
filter: brightness(0) saturate(100%)to make it pure black, because different background colors need to be changed to the target colorfilterhave different attributes. - Of course, this is a brain wave, and it will not be done in actual projects.
9. Partial clarity
The so-called local clarity here can be imagined that a certain picture is all blurry, but if we put a magnifying glass somewhere, it will become clear here, let's see the effect I made:
The principle here is like this, there are two layers in total, the lower layer is the image of the blur filter, the upper layer is a circle div , and the background image of this div is a clear version of the picture , set background-position , while dragging div , change the background-position position of the background in real time, to achieve the effect in the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
#acc {
position: absolute;
left: 0;
right: 0;
width: 540px;
filter: blur(7px);
pointer-events: none;
}
#mk {
z-index: 2;
height: 100px;
width: 100px;
border-radius: 50%;
overflow: hidden;
border: 1px solid blue;
position: absolute;
left: 0;
top: 0;
background-image: url("./img/利姆露jpeg.jpeg");
background-size: 540px 562px;
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="wrap">
<div id="mk"></div>
<img id="acc" src="./img/利姆露jpeg.jpeg" />
</div>
<script>
function drag(elementId) {
const element = document.getElementById(elementId);
const position = {
offsetX: 0,
offsetY: 0,
state: 0,
}
function getEvent(event) {
return event || window.event;
}
element.addEventListener(
"mousedown",
function (event) {
var e = getEvent(event);
position.offsetX = e.offsetX;
position.offsetY = e.offsetY;
position.state = 1;
},
false
);
document.addEventListener(
"mousemove",
function (event) {
var e = getEvent(event);
if (position.state) {
position.endX = e.clientX;
position.endY = e.clientY;
element.style.top = position.endY - position.offsetY + "px";
element.style.left = position.endX - position.offsetX + "px";
element.style.backgroundPositionX = "-" + element.style.left;
element.style.backgroundPositionY = "-" + element.style.top;
}
},
false
);
element.addEventListener(
"mouseup",
function (event) {
position.state = 0;
},
false
);
}
drag("mk");
</script>
</body>
</html>end
That's it this time, hope to progress with you.
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。