Shulou(Shulou.com)06/03 Report--

This article mainly introduces CSS how to flip the picture, scroll the picture bar, open the door effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

In addition to 3D flipping and positioning, CSS flip images mainly use an attribute backface-visibility:visable | hidden;, which is mainly used to set whether the back of the element is visible.

The effect picture is as follows:

The specific steps are as follows:

1. Write out the body of the page

2. Make the two pictures superimposed by positioning

Div img {width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s;}

3. Set the back of the first picture to be invisible

Div img:first-child {z-index: 1; backface-visibility: hidden;}

4. Add 180 degrees of rotation

Div:hover img {transform: rotateY (180deg);}

Complete code:

Document / * backface-visibility * / div {width: 250px; height: 170px; margin: 100px auto; position: relative;} div img {width: 250px; height: 170px; position: absolute; top: 0 Left: 0; transition: all 1s;} div img:first-child {z-index: 1; backface-visibility: hidden;} div:hover img {transform: rotateY (180deg);}

CSS scrolling picture bar

You can often see some pictures scrolling continuously on the website, and this effect can be achieved through the animation effect of css.

The main principle is to move to the left through animation.

First, give two groups of the same pictures (on the same line), and let the whole picture move the length of one set of pictures to the left.

This quickly reverts to the original position at the end of the animation, which alternates with the second set of pictures, which looks like a group of pictures are constantly rolling to the left.

The specific steps are as follows:

1. Set up two groups of the same pictures everywhere in the body code.

2. Set the size of the nav. The width is the width added by a group of pictures, and the height is the height of the picture.

Nav {width: 750px; height: 170px; border: 1px solid red; margin: 100px auto;}

3. Set the ul size, twice the width of nav, the same height as nav, and specify animation-related attributes.

Ul {width: 200%; height: 100%; animation: picmove 5s linear infinite forwards;}

4. Define the animation, mainly to move the length of a group of pictures to the left

@ keyframes picmove {from {transform: translate (0);} to {transform: translate (- 750px);}}

5. Increase the effect of mouse hover and animation pause.

Ul:hover {animation-play-state: paused;}

6. Finally, add overflow:hidden to nav so that the excess part is hidden, so that the scrolling picture bar as a whole is done.

The complete code is as follows:

Document * {margin: 0; padding: 0;} ul {list-style: none;} nav {width: 750px; height: 170px; border: 1px solid red; margin: 100px auto; overflow: hidden } ul {width: 200%; height: 100%; animation: picmove 5s linear infinite forwards;} @ keyframes picmove {from {transform: translate (0);} to {transform: translate (- 750px) }} img {width: 250px; height: 170px; float: left;} ul:hover {animation-play-state: paused;}

CSS, open the gate.

3D rotation and positioning technology are mainly used.

The effect is as follows:

The specific steps are as follows:

1. First, add three simple div tags to the main body of the page:

2. Add basic attributes, background, line-of-sight and relative positioning to the outer box (.door) (the child box uses absolute positioning, so it is best to add relative positioning to the parent box).

.door {width: 450px; height: 450px; border: 1px solid # 000000; margin: 100px auto; background: url (Images/men.png) no-repeat; background-size: 100% 100%; position: relative; perspective: 1000px;}

3. Set the relevant properties for the left and right doors. Here, the relevant properties of the left box are given. Just change the positioning of the right box to 0 on the right, and change the axis of rotation to the right.

.door-l {width: 50%; height: 100%; background-color: brown; position: absolute; top: 0; transition: all 0.5s; left: 0; border-right: 1px solid # 000000; transform-origin: left;}

4. Add the small circle on the door, which is added here using the pseudo element before.

(1), set the size and border

(2) set border-radius to 50% to make it round.

(3) set the positioning to be vertically centered and within a certain distance.

.door-l::before {content: "; border: 1px solid # 000000; width: 20px; height: 20px; position: absolute; top: 50%; border-radius: 50%; transform: translateY (- 50%); right: 5px;}

5. Finally, set the degree of rotation. I have set 120 degrees here (note that the positive or negative of the degree represents the direction of rotation)

Door: hover. Door-l {transform: rotateY (- 120deg);}

The complete code is as follows:

Document .door {width: 450px; height: 450px; border: 1px solid # 000000; margin: 100px auto; background: url (Images/men.png) no-repeat; background-size: 100% 100%; position: relative; perspective: 1000px } .door-l, .door-r {width: 50%; height: 100%; background-color: brown; position: absolute; top: 0; transition: all 0.5s;} .door-l {left: 0 Border-right: 1px solid # 000000; transform-origin: left;}. Door-r {right: 0; border-left: 1px solid # 000000; transform-origin: right;} .door-l::before, .door-r::before {content: "" Border: 1px solid # 000000; width: 20px; height: 20px; position: absolute; top: 50%; border-radius: 50%; transform: translateY (- 50%);} .door-l::before {right: 5px Door-r::before {left: 5px;} .door: hover. Door-l {transform: rotateY (- 120deg);} .door: hover. Door-r {transform: rotateY (120deg) } the above is all the contents of the article "how to flip the picture, scroll the picture bar and open the door effect in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.