css3 random background image fade switching effects demo effect as shown in the background of this article See you pick my fantasy field of secondary limited edition pick more tired, pick a half an hour, take the time to organize and send it out! design was originally intended to use jQuery to achieve, but noticed the css3 @keyframes rule, css3 has been so powerful that once only js can achieve the effect! ...
You often see comment sections on some websites, where the commenter’s avatar will rotate 360° when the mouse passes over it. Let’s take a look at the effect first .tximg{ height:300px; border-radius:50%; border:2px solid green; /*Change rules*/ transition:all 2s; } .tximg:hover{ /* Change action defines 2d rotation, parameter fills in angle */ transform:rotate(360deg); } css part img{ height:300px; border-radius:50%; border:2px solid green; /*Change rules*/ transition:all 2s; } img:hover{ /* change action Define 2d rotation, fill in the angle as a parameter */ transform:rotate(360deg); } ...
Let’s take a sneak peek at the renderings first. (This is definitely not a picture. Well~ why are these words so weird~) Don’t ask me how much my iPhone is, because I don’t know, I haven’t used it, so you know. css style part #phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*Set the rounded border of the div element*/ } #camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*10px from top margin, left and right center*/ } ...