Today, yes and today, today is a lot of things to do ~ also repaired the washing machine, seemingly in addition to writing code no, everything is OK ~
Okay, here we are. Today when browsing a webpage, the mouse slides over its picture, there is a kind of I feel very cool effect. Like this:
I feel the next ~
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{position:relative;width:500px;Height:500px;Line-height:500px;background:Rgba (0,0,0,.8);transition:0.5s;Overflow:Hidden; }P{Color:#fff;text-align:Center; }P:before{content: "";position:Absolute; Left:-50%;Top:48%;Display:Block;margin:0;Height:0%;width:200%;Transform:Rotate ( -55deg);background:URL ("https://livedemo00.template-help.com/wordpress_51145/wp-content/themes/theme51145/images/ White-opacity.png ");transition:0.5s; }
Div:hover P:before{position:Absolute; Left:-50%;Top:-80%;Height:300%;width:200%;margin:0;Transform:Rotate ( -55deg); } </style></Head><Body><Div><P>I'm a little cutie.</P></Div></Body></HTML>
How do you think it's Fun ~
The code on the original Web page did not discover its full implementation principle.
Above this is I based on its own part of the added, so do not know is not the best method, but the effect is the same ~
To sum up is:
1. First insert a picture with a transparent effect (of course, the entire Rgba div effect is the same), set its height or width of 0% (depending on the rotation angle and the implementation of the effect), positioning to the position you want to give him a rotation angle (can be based on the angle to achieve different direction of the switch, such as up and down, Right or wrong. You can also rotate what by the combination, not listed.
2. Then, just set when the mouse is out of date, so that it can fill up all the elements you want to overwrite, preferably over (set a parent element Overflow:hidden), so it is more insured.
3. Solve cross-browser compatibility, after all is CSS3 (I'm lazy and not set). Friendship hint, here is mainly transition and transform,-o--webit--moz-.
How, is not very simple ~ hurriedly try to go at once, through your imagination, more to do some other effect out, refueling Oh, Sao year ~
Cool mouse slide over add matte layer effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
