Once upon a time there was a duck.
Once upon a time there was a duck that was not generally ugly:
Tony Leung, I'm a duck.
So, ducks have been very inferiority, never dare to look in the mirror, also dare not swim down the river. Other ducks like to swim in the river, because they can play, while the WC, let the food into the comfort from the back out, and the duck once down the river, the food will only come out from the front, because always inadvertently see their own face.
In this way very many many years, the world is changeable, the same year will speak to live in the cave by the duck molested gorilla reverse attack now live into the animal Kingdom Five star hotel-Shanghai wildlife Park; and ducks themselves, after years of vicissitudes, looks have undergone a great change:
Tony Leung, a handsome duck.
However, the Ducks do not know all this, because it does not dare to look in the mirror dare not swim, so it does not know what their appearance is now, until the middle of August 2016, Ducks accidentally encountered a treasure, this suddenly found himself now more than Tony Leung is handsome.
Yi, neither the mirror nor the water, what is it that makes the Ducks know their true colors?
All right, welcome to the front end of this period: duck's real Barb Treasures--box-reflect Properties!
Two, CSS treasure box reflection attribute-webkit-box-reflect
The situation was this: Ducks have a bit of a cold, phlegm a little more, so decided to take a hammer fly to London to feed pigeons scattered heart, in the airport waiting, next to a black man looks like people are using a 5K screen fruit notebook to see the film "East into West", ducks on the side of the past together to see. When the movie was put into the "sausage mouth", the duck laughed hysterically!
Tony Leung, sausage mouth.
Incredibly, yes, it's "incredibly"! Do you know that ducks have almost not laughed in the past hundreds of years, even though the past few centuries have seen countless funny scenes, but, has been to suppress the laughter in their hearts. But, perhaps because this "sausage mouth" has a past life familiar feeling, let oneself suddenly did not endure, together with the hundreds of years ago suppressed laugh suddenly gushing out, "ha ... Ah ... "
Ha ha
However, when the duck realized that he was laughing, he could not allow himself to think, and seemed to find himself making a big mistake, so that he could keep his nitrous oxide in his best breath. However, this hundred years of accumulation of nitrous oxide energy is strong, it is to accept it can be closed. For a moment, laughing gas, the chest burst into a sense of crack, unable to breathe. Ducks can not endure, the surge of energy into the sword general, accompanied by a loud cough from the mouth released.
All this came so suddenly so unprepared, although some pale, some embarrassed, but not to cause too much interference, after all, 2 laughter, 1 cough sound just. Until the duck breathed a sigh of relief, continue to watch the black man notebook ... The Ducks found a 5K screen with a pattern of a viscous liquid shaped like "eight". This moment, the world seems to stop running, ducks really hope that now there is a river can get themselves into the ~ ~
But the man in black seemed very calm, I saw him a key shutdown, and then, homeopathy from the belly of the pocket to write the words of the magic cloth, on the 5K screen on such a wipe,-webkit-box-reflect, Miracle happened, no contact, screen thoughtful become clean, not only that, The screen becomes clear and abnormal, reflecting the surrounding scenery clearly.
At this time, the duck suddenly saw a handsome man from the screen, "Yi, this person looks like me very much ..." (The target browser only has a reflection, ie and Firefox left White without reflection)
Behind the story we should know, from then on, Ducks began to self-confidence up, smile also more up, this is the "ugly duckling into a white swan" story.
Above let the Ducks see their face reflection of the treasure is the-webkit-box-reflect of the CSS session, the above cast magic skills are:
-webkit-box-reflect:below;
Of course, since it is a treasure, the skills can not be only one, speed all to the opening.
The syntax is as follows:
-webkit-box-reflect: [above | below | right | left]???
In the grammar above, []|? are common expressions in regular expressions, for example, to represent 0 or 1. | Specifically, the-webkit-box-reflect can be composed of up to 3 parts, respectively, as follows:
Position
Can be the following 4 values in the 1, Above,below,left,right, respectively, representing up and down. This azimuth value cannot be defaulted if global keywords such as inherit are not used.
Offset size
The reflection and the original element offset distance. Can be a numeric value, or it can be a percentage. If this is a percent value, the percentage size is calculated relative to the element's own size. is consistent with the percentage calculation of the translate in the transform.
Mask picture
Mask control of the element's reflection. Syntax is similar to Background-image.
Therefore, we can have some of the following writing:
-webkit-box-reflect:below;
-webkit-box-reflect:right;
-webkit-box-reflect:right 10px;
-webkit-box-reflect:below 0 linear-gradient (transparent, white);
-webkit-box-reflect:below 0 url (shuai2.png);
Wait Then, the corresponding effect is as follows:
You can ruthlessly click here:-webkit-box-reflect each property value effect demo Demo
If you're using a chrome or Safari browser, or you're using a mobile device browsing, you should see a screenshot like the following:
Screenshot of Reflection effect
Corresponds to the effect of the above writing respectively. However, there is a lot of information is not reflected in the demo need additional instructions.
Other Notes
Reflection does not occupy dimensional space, is the same as outline, box-shadow the same kind of real sense of the size of the space. Therefore, the demo uses the padding value to open the spacing, lest several ducks picture overlap together;
mentioned above, the reflection offset value supports the percentage and is calculated based on the size of the element itself. But there is one more thing to add, that is, the position of the dimension calculation is automatically recognized according to the direction of your reflection. Rather than saying that your reflection is below or above, the offset percentage is calculated based on the height of the original element, such as whether your reflection is left or right, based on the width of the element;
Mask pictures can use CSS3 gradients. And the gradient syntax here is almost exactly the same as the CSS3 background-image syntax. Note that the wording here is "almost", indicating that there are differences, different support is the-webkit-box-reflect mask picture does not support multiple graphs (for background background), can only be a picture. The other grammars are exactly the same. This includes not only linear gradients (linear-gradient), but also radial gradients (radial-gradient), support to the new syntax for the to top or to bottom, and support for stop breakpoints, such as:
-webkit-box-reflect: Below 0 linear-gradient (transparent, white 50%, white);
When you use a mask picture, the offset value of the reflection is not the default. If there is no offset, use 0 placeholder, which is why there is a 0 reason in the code;
the end effect of the mask is not color--that is, you use linear-gradient (transparent, white) and linear-gradient ( The effect of transparent, black, is exactly the same, and the key is transparency and the amount of transparency. The result of a solid mask is transparency, and the result of a transparent mask is to expose the original color value. A
Mask picture can also be directly a picture, with syntax background-image. But there is a need to note that when the image is applied to the shadow mask, the image itself will be (because of reflection) and flip. For example, the last example of the demo, mask out a "handsome" word, and the original "handsome" text picture is like this:
"Handsome" word
you find no, is inverted. In this way, the reflection down, we can see in the reflection is coming over the "handsome" effect.
The reflection effect has the real time rendering characteristic. That is, if we suddenly restore the ducks to the "ugly duckling" state, then, Ducks will be reminded of the past.
Ugly Duckling's reflection
So, we can take advantage of this feature to achieve some cool dynamic effects. That's right. The one that moves underneath and moves along. You should know.
Third,-webkit-box-reflect compatibility
-webkit-box-reflect said now, I almost have the-webkit-private prefix removed, because the box reflection property Box-reflect itself is a webkit private characteristics, and support has been for many many years, so, This property is supported as long as the browser is the-webkit-kernel.
Includes Chrome/safari/opera and mobile-side browsers (from Caniuse):
Reflection Compatibility Table
So, we can use this CSS property in an internal project, or in a mobile-end project.
What if we need to achieve a projection effect on a traditional PC project? In fact, can curve the salvation.
Four,-moz-element () Let Firefox browser also support element projection
First, we look at Firefox also has no way to achieve the effect of element projection.
Yes, try the element () function, about the element () function, which I introduced at 2011, "CSS3 Background Extended attribute element Introduction", which allows an element to be used as a background, and the syntax is simple:
Background:element (#id)
As long as the corresponding elements of #id are not element ①, they also have real-time tracking rendering characteristics.
ZXX: I do not know from which version to start, Firefox does not support the image of the tracking rendering ~ ~
If you are Firefox browser, you can ruthlessly click here: Using-moz-element () to achieve reflection demo
Entering the page is the effect of this:
The reflection effect under the Firefox browser
We click on the demo page below the button, so that the original spin up, we can find that the reflection of the picture is also spinning up.
Rotate Follow screenshot
However, compared with the real reflection effect, there are still many problems.
Limitations
Masks are not supported. Demo saw the "Reflection" is actually covered with a layer of white gradient simulation.
Occupy space. The reflected reflection is not occupying any size position. However, if the background is simulated, you need to set a size. And the background picture is not able to exceed the element, so (as shown in the above picture), the reflection may not be fully displayed.
The position of the reflection is dead. The true reflection rotation should be the following figure, not the image above:
The true reflection and the position of the rotation
Poor rendering performance. Firefox browser, the original image in 360 degrees rotation, but, "reflection" elements of the rotation to take the "smile Half Step Epilepsy", an epileptic epilepsy, a meal, a IE6 of the spring breeze blowing.
So, to sum up,-moz-element () is only suitable for simulating the static reflection effect.
Five, let IE browser also support element projection
Now, Webkit/moz two factions are on the scene, that IE browser how to do? Is there any private reflection property or something like that?
In the field of knowledge I now possess, there is no.
However, it is also possible to achieve this.
You can use modern web technology, both SVG and canvas.
If you use these technologies, naturally, Chrome and Firefox browsers are also supported. That is, if you want the full compatibility of the page to achieve a reflection effect, you can try SVG or canvas, but there are limitations, only applicable to pictures, or text, if the complex DOM structure, theoretically achievable, but the actual cost is quite moving, is not a cost-effective drop.
So, here, how to use SVG and canvas to achieve the image reflection effect.
1. SVG realizes reflection
SVG has a real meaning of the mask, and you can use the Fill property bar picture as shading to a number of elements, in theory, to achieve the original image and reflection of the linkage effect.
Or use the duck picture to do the schematic, the code is as follows:
<svg width= "height=" "352" >
<defs>
<lineargradient id= "gradient" x1= "0" y1= "0" x2= "0" y2= "1" >
<stop offset= "0%" stop-color= "#fff" stop-opacity= "0"/>
<stop offset= "100%" stop-color= "#fff" stop-opacity= "1"/>
</linearGradient>
<mask id= "Mask" >
<rect x= "0" y= "176" width= "height=" 177 "fill=" url (#gradient) "/>
</mask>
<pattern id= "reflect" patternunits= "Userspaceonuse" width= "height=" "176" >
<image xlink:href= "chaowei.jpg" width= "height=" 176
</pattern>
</defs>
<!--artwork-->
<rect x= "0" y= "0" width= "height=" 176 "fill=" url (#reflect) "></rect>
<!--reflection Map-->
<rect x= "0" y= "176" width= "height=" 176 "fill=" url (#reflect) "mask=" url (#mask) "transform=" translate (75 264) Scale (1,-1) Translate ( -75-264) "></rect>
</svg>
You can ruthlessly click here: SVG realization Reflection Effect Demo Demo
The effect is as follows:
2. Canvas Realize Reflection
About Canvas realize the reflection, had previously shared a JS plug-in, specific see: "reflection.js-realize the image of the reflection JS plug-in", this article is quite an article of the Elder, published in 09 of August.
Reflection.js is a very simple JS file, very small, you can click here to download the ~
Because this JS file is older, some places some out, for example IE9 support canvas, but, actually is to have the filter to achieve, there is a problem, the following modifications:
Line 65th
if (document.all &&!window.opera) {
↓
if (
