Css on MoeJue's Blog

CSS3 Random Background Image Switching Effect

Wed, 16 May 2018 11:58:08 +0000

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!

Simple css3 avatar rotation and 3D rotation effect

Mon, 10 Jul 2017 07:45:23 +0000

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); }

Draw iPhone with CSS3

Mon, 03 Jul 2017 06:09:01 +0000

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*/ }