CSS,CSS3 achieve a variety of picture effects summary

According to conventional understanding, the effect of image processing should be the designer's tools, and even these things should be given to Photoshop and other design software to complete. However, with the development of CSS technology and the advent of CSS3, the browser compatibility of major manufacturers more and more good, the use of CSS technology to deal with and realize the various effects of the picture becomes more and more convenient. The various properties in CSS and CSS3 will easily help us achieve the desired image effects. Here, let's talk about using CSS and CSS3 to achieve a variety of image effects.

First, you can learn the free course of PHP Chinese network.

1. Learn the CSS Pictures Chapter course in the CSS3 introductory tutorial

2. Watch the 3d rotation effect of the pictures in "Hanshunping 2016 latest CSS3 video tutorial"

CSS,CSS3 achieve a variety of picture effects

1. Share a HTML+CSS image amplification effect code

How to enlarge the picture, the following code to take you to achieve this effect

<style>*{    margin:0px;    padding:0px;} #pHead {    display:block;    height:220px;    Overflow:hidden;    width:350px;} #pHead: Hover img{    Transform:scale (1.3);    transition:all 1s ease 0s;    -webkit-transform:scale (1.3);    -webkit-transform:all 1s ease 0s;} </style>

2. P+css Picture List layout (i)

Front-end transduction often encounter picture layout, beginners may be more unfamiliar. Next I will be 3 rows and 3 columns of the picture list to introduce two commonly used plans: Display:inline-block layout, very simple, generally I will use the UL Li layout. Display:inline-block Layout , similar to the float layout, but we have to replace the float:left with Display:inline-block;

3. P+css Picture List layout (ii)

This article by default you've read my previous article p+css Picture List layout (i), let's implement a more complex picture list layout. There is an interval between the rows and columns of the picture list, and we use a container p.content to wrap the contents, set the width of the. Content to 80% of the parent container, and the upper and lower padding (paddind) about 20px.

4. CSS3 Picture Flip Switch case and its important attribute analysis

Picture flipping switch, in the case of not using CSS3, generally use JS to achieve animation, while manipulating the elements of the width and left, or height and top to simulate the effect of flipping, and in due course change src or z-index to achieve picture switching.

5. CSS3 Picture Slide effect

. cr-container{    width:600px;    height:400px;    position:relative;    margin:0 Auto;    border:20px solid #fff;    box-shadow:1px 1px 3px Rgba (0,0,0,0.1);}. Cr-container label{    font-style:italic;    width:150px;    height:30px;    Cursor:pointer;    Color: #fff;    line-height:32px;    font-size:24px;    Float:left;    position:relative;    margin-top:350px;    z-index:1000;}. Cr-container label:before{    content: ";    width:34px;    height:34px;    Background:rgba (130,195,217,0.9);    Position:absolute;    left:50%;    Margin-left: -17px;    border-radius:50%;    box-shadow:0px 0px 0px 4px rgba (255,255,255,0.3);    Z-index:-1;}

Related questions

1. CSS3 icon

2. CSS picture centering problem?

3. CSS3 Image Jitter

"Recommended"

1. CSS Image Center: CSS image centered around the top (horizontal and vertical center)