Reprinted from: http://blog.csdn.net/u014175572/article/details/51535768
CSS3 's Transform:scale () can be scaled or scaled down.
CSS3 's transition allows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner.
The effect is as follows:
1. Effect when no mouse is placed on the picture:
2, when the mouse is placed on the picture (the process of amplification is animated transition, the transition time can be customized):
The code is as follows:
1 <!DOCTYPE HTML> 2 <HTML> 3 <Head> 4 <MetaCharSet= "UTF-8"> 5 <title></title> 6 <styletype= "Text/css"> 7 Div{ 8 width:300px; 9 Height:300px; Ten Border:#000 solid 1px; One margin:50px Auto; A Overflow:Hidden; - } - div img{ the cursor:Pointer; - transition:All 0.6s; - } - Div Img:hover{ + Transform:Scale (1.4); - } + </style> A </Head> at <Body> - <Div> - <imgsrc= "Img/focus.png" /> - </Div> - </Body> - </HTML>
which
Transition:all 0.6s; Indicates that all attribute changes are completed in a period of 0.6s.
Transform:scale (1.4); Indicates that the picture is scaled by 1.4 times times when the mouse is placed on the picture.
Code: http://download.csdn.net/detail/u014175572/9535023
CSS3 realize the mouse move to the picture of the larger (slowly larger, there is a transition effect, the process of amplification is animated transition, the transition time can be customized)
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
