Home > Developer > Web Develop
Good CSS3 image and text list, mouse hover image jitter, css3 hover
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> CSS3 Sina Weibo template store list image jitter effect </title>
<Style>
Body, button, input, select, textarea {font: 12px/1.125 Arial, Helvetica, sans-serif; _ font-family: "SimSun ";}
Body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button,
Textarea, hr {margin: 0; padding: 0 ;}
Body {background: # f4f4f4 ;}
Table {border-collapse: collapse; border-spacing: 0 ;}
Li {list-style: none ;}
Fieldset, img {border: 0 ;}
Q: before, q: after {content :'';}
A: focus, input, textarea {outline-style: none ;}
Input [type = "text"], input [type = "password"], textarea {outline-style: none;-webkit-appearance: none ;}
Textarea {resize: none ;}
Address, caption, cite, code, dfn, em, I, th, var, B {font-style: normal; font-weight: normal ;}
Abbr, acronym {border: 0; font-variant: normal ;}
A {text-decoration: none ;}
A: hover {text-decoration: underline ;}
A {color: #0a8cd2; text-decoration: none ;}
A: hover {text-decoration: underline ;}
. Clearfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;}
. Clearfix {display: inline-block ;}
. Clearfix {display: block ;}
. Clear {clear: both; height: 0; font: 0/0 Arial; visibility: hidden ;}
. Left {float: left ;}
. Right {float: right ;}
. Buybtn {border-width: 1px; border-style: solid; border-color: # FF9B01; background-color: # FFA00A; color: white; border-radius:
2px; display: inline-block; overflow: hidden; vertical-align: middle; cursor: pointer ;}
. Buybtn: hover {text-decoration: none; background: # FFB847; background:-webkit-gradient (linear, left top, left bottom, color-stop
(0%, rgba (255,184, 71, 1), color-stop (100%, rgba (255,162, 16, 1 )));}
. Buybtn span {border-color: # FFB33B; padding: 0 9px 0 10px; white-space: nowrap; display: inline-block; border-style: solid; border
-Width: 1px; border-radius: 2px; height: 18px; line-height: 17px; vertical-align: middle ;}
. Zzsc-list {width: 700px; margin: 100px auto ;}
. Zzsc-list. dressing {float: left; _ display: inline; margin: 8px; margin-top: 15px ;}
. Zzsc-list. dressing_wrap,. zzsc-list. dressing_wrapB {position: relative; _ zoom: 1; border-radius: 2px; background:
# F1F1F1; border-style: solid; border-width: 1px ;}
. Zzsc-list. skinimg {z-index: 2; border-style: solid; border-width: 2px; border-color: # fff ;}
. Zzsc-list. skinimg a {display: block; overflow: hidden ;}
. Zzsc-list. skinimg img {display: inline-block ;}
. Zzsc-list. skinimg. loading {border-radius: 0; width: 31px; height: 31px; padding-left: 97px; padding-top: 59px ;}
. Zzsc-list. dressing_wrap {border-color: # d8d8d8;-webkit-box-shadow: 0 3px 6px-4px rgba (0, 0, 1); box-shadow: 0 3px 6px-4px
Rgba (,); background: # FFF; border: 1px solid # c4c4c4; border-radius: 2px;-webkit-box-shadow: 0 0 5px 0 rgba, 0 ,. 21); box
-Shadow: 0 0 5px 0 rgba (0, 0, 0,. 21 );}
. Zzsc-list. information_area {margin-bottom: 11px ;}
. Zzsc-list. information_area_wrap {margin: auto; position: relative ;}
. Zzsc-list. item,. zzsc-list. tipinfo {padding: 3px 10px 0 10px ;}
. Zzsc-list. information_area h4,. zzsc-list. W_vline,. zzsc-list. price {margin-top: 6px ;}
. Zzsc-list. information_area h4 a {cursor: default ;}
. Zzsc-list. price {color: #333 ;}
. Zzsc-list. price a: hover {text-decoration: underline ;}
. Zzsc-list. op a {color: #0989d1 ;}
. Zzsc-list. W_vline {color: #999; margin-right: 8px; margin-left: 10px ;}
. Zzsc-list. t_open {margin-top: 5px ;}
. Zzsc-list. price {color: # f80; font: normal 12px/normal 'Microsoft yahei ';}
. Zzsc-list. skinimg img: hover {-webkit-animation: tada 1 s. 2 s release both;-moz-animation: tada 1 s. 2 s release both ;}
@-Webkit-keyframes tada {0% {-webkit-transform: scale (1 );}
10%, 20% {-webkit-transform: scale (0.9) rotate (-3deg );}
30%, 50%, 70% {-webkit-transform: scale (90%) rotate (3deg );}
40%, 60%, 80% {-webkit-transform: scale (1.1) rotate (-3deg );}
100% {-webkit-transform: scale (1) rotate (0 );}}
@-Moz-keyframes tada {0% {-moz-transform: scale (1 );}
10%, 20% {-moz-transform: scale (0.9) rotate (-3deg );}
30%, 50%, 70% {-moz-transform: scale (90%) rotate (3deg );}
40%, 60%, 80% {-moz-transform: scale (1.1) rotate (-3deg );}
100% {-moz-transform: scale (1) rotate (0 );}}
. Zzsc-list. dressing_hover. information_area {-webkit-animation: flipInY 300 ms. 1 s faster both;-moz-animation: flipInY 300 ms. 1 s
Required both ;}
@-Webkit-keyframes flipInY {0% {-webkit-transform: perspective (400px) rotateY (90deg );
Opacity: 0 ;}
40% {-webkit-transform: perspective (400px) rotateY (-10deg );}
70% {-webkit-transform: perspective (400px) rotateY (10deg );}
100% {-webkit-transform: perspective (400px) rotateY (0deg );
Opacity: 1 ;}}
@-Moz-keyframes flipInY {0% {-moz-transform: perspective (400px) rotateY (90deg );
Opacity: 0 ;}
40% {-moz-transform: perspective (400px) rotateY (-10deg );}
70% {-moz-transform: perspective (400px) rotateY (10deg );}
100% {-moz-transform: perspective (400px) rotateY (0deg );
Opacity: 1 ;}}
</Style>
</Head>
<Body>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
<Div class = "zzsc-list">
<Div class = "dressing">
<Div class = "dressing_wrap">
<Div class = "skinimg"> <a href = "/" target = "_ blank"> </a> </div>
<Div class = "information_area">
<Div class = "information_area_wrap">
<Div class = "item clearfix">
<H4 class = "left"> private UFO <I class = "W_vline left" >|</I>
<Div class = "price left"> <span> ￥18.00 </span> </div>
</Div>
<Div class = "tipinfo clearfix">
<Div class = "t_open left"> <a href = "/" target = "_ blank"> <span> activate a member </span> </a> & nbsp; & nbsp; <span class = "W_textb">
Free use </span> </div>
<Div class = "right"> <a href = "/" class = "buybtn"> <span> purchase </span> </a> </div>
</Div>
</Div>
</Div>
</Div>
</Div>
<Div class = "dressing">
<Div class = "dressing_wrap">
<Div class = "skinimg"> <a href = "/" target = "_ blank"> </a> </div>
<Div class = "information_area">
<Div class = "information_area_wrap">
<Div class = "item clearfix">
<H4 class = "left"> ancient creatures <I class = "W_vline left" >|</I>
<Div class = "price left"> <span> ￥18.00 </span> </div>
</Div>
<Div class = "tipinfo clearfix">
<Div class = "t_open left"> <a href = "/" target = "_ blank"> <span> activate a member </span> </a> & nbsp; & nbsp; <span class = "W_textb">
Free use </span> </div>
<Div class = "right"> <a href = "/" class = "buybtn"> <span> purchase </span> </a> </div>
</Div>
</Div>
</Div>
</Div>
</Div>
<Div class = "dressing">
<Div class = "dressing_wrap">
<Div class = "skinimg"> <a href = "/" target = "_ blank"> </a> </div>
<Div class = "information_area">
<Div class = "information_area_wrap">
<Div class = "item clearfix">
<H4 class = "left"> world impact <I class = "W_vline left" >|</I>
<Div class = "price left"> <span> ￥18.00 </span> </div>
</Div>
<Div class = "tipinfo clearfix">
<Div class = "t_open left"> <a href = "/" target = "_ blank"> <span> activate a member </span> </a> & nbsp; & nbsp; <span class = "W_textb">
Free use </span> </div>
<Div class = "right"> <a href = "/" class = "buybtn"> <span> purchase </span> </a> </div>
</Div>
</Div>
</Div>
</Div>
</Div>
<Div style = "clear: both"> </div>
</Div>
<Div style = "text-align: center; margin: 50px 0; font: normal 14px/24px 'Microsoft yahei';">
</Div>
</Body>
</Html>
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
