/*reset css*/ body,button,input,select,textarea { font:12px/1.125 Arial,Helvetica,sans-serif; _font-family:"SimSun"; } 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; } /*main css*/ .kuzhan-list { width:700px; margin:20px auto; } .kuzhan-list .dressing { float:left; _display:inline; margin:8px; margin-top:15px; } .kuzhan-list .dressing_wrap,.kuzhan-list .dressing_wrapB { position:relative; _zoom:1; border-radius:2px; background:#F1F1F1; border-style:solid; border-width:1px; } .kuzhan-list .skinimg { z-index:2; border-style:solid; border-width:2px; border-color:#fff; } .kuzhan-list .skinimg a { display:block; overflow:hidden; } .kuzhan-list .skinimg img { display:inline-block; } .kuzhan-list .skinimg .loading { border-radius:0; width:31px; height:31px; padding-left:97px; padding-top:59px; } .kuzhan-list .dressing_wrap { border-color:#d8d8d8; -webkit-box-shadow:0 3px 6px -4px rgba(0,0,0,1); box-shadow:0 3px 6px -4px rgba(0,0,0,1); background:#FFF; border:1px solid #c4c4c4; border-radius:2px; -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.21); box-shadow:0 0 5px 0 rgba(0,0,0,.21); } .kuzhan-list .information_area { margin-bottom:11px; } .kuzhan-list .information_area_wrap { margin:auto; position:relative; } .kuzhan-list .item,.kuzhan-list .tipinfo { padding:3px 10px 0 10px; } .kuzhan-list .information_area h4,.kuzhan-list .W_vline,.kuzhan-list .price { margin-top:6px; } .kuzhan-list .information_area h4 a { cursor:default; } .kuzhan-list .price { color:#333; } .kuzhan-list .price a:hover { text-decoration:underline; } .kuzhan-list .op a { color:#0989d1; } .kuzhan-list .W_vline { color:#999; margin-right:8px; margin-left:10px; } .kuzhan-list .t_open { margin-top:5px; } .kuzhan-list .price { color:#f80; font:normal 12px/normal 'microsoft yahei'; } .kuzhan-list .skinimg img:hover { -webkit-animation:tada 1s .2s ease both; -moz-animation:tada 1s .2s ease both; } @-webkit-keyframes tada { 0% { -webkit-transform:scale(1); } 10%,20% { -webkit-transform:scale(0.9) rotate(-3deg); } 30%,50%,70%,90% { -webkit-transform:scale(1.1) 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%,90% { -moz-transform:scale(1.1) rotate(3deg); } 40%,60%,80% { -moz-transform:scale(1.1) rotate(-3deg); } 100% { -moz-transform:scale(1) rotate(0); } }.kuzhan-list .dressing_hover .information_area { -webkit-animation:flipInY 300ms .1s ease both; -moz-animation:flipInY 300ms .1s ease 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; } }
全css图片特效,没有添加任何js代码