css代码完成鼠标悬停时,图片边框和大小的变化

html-css036

css代码完成鼠标悬停时,图片边框和大小的变化,第1张

变色:使css的动画animate可以实现。

放大:使用css的过渡效果translate就可以了实现

如果你要同时实现,那就都用animate,样式代码写在一起

用CSS3中的transfrom:scale{x,y}来放大,如下:

<style>

*{margin:0padding:0}

div{border:solid 1px #333width:40pxheight:40px}

div img{width:40pxheight:40pxtransition:all 0.3s}

div img:hover{transfrom:scale{2,2}}//从中心放大两部

</style>

<div><img src="图片地址" alt=""/></div>

扩展资料:

注意事项

transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)

1、移动.左移右移或者上移下移:

CGAffineTransformMakeTranslation(X偏移量, Y偏移量)

CGAffineTransformTranslate(在某个transform的基础上-一般为自身, X偏移量, Y偏移量)

2、改变大小(形变):

CGAffineTransformMakeScale(宽缩放的倍数, 高缩放的倍数)

CGAffineTransformScale(在某个transform的基础上-一般为自身, 宽缩放的倍数, 高缩放的倍数)

源码如下

<!DOCTYPE html>    

<html>    

<head>    

 <meta charset="UTF-8">    

 <title>CSS3鼠标滑过图片放大特效DEMO演示</title>    

 <style>    

html{font-family:sans-serif-ms-text-size-adjust:100%-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-blockvertical-align:baseline}audio:not([controls]){display:noneheight:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2emmargin:0.67em 0}mark{background:#ff0color:#000}small{font-size:80%}sub,sup{font-size:75%line-height:0position:relativevertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-boxbox-sizing:content-boxheight:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospacefont-size:1em}button,input,optgroup,select,textarea{color:inheritfont:inheritmargin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:buttoncursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-boxbox-sizing:border-boxpadding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield-moz-box-sizing:content-boxbox-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0margin:0 2pxpadding:0.35em 0.625em 0.75em}legend{border:0padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapseborder-spacing:0}td,th{padding:0}    

</style>    

   <style>    

@import url("http://fonts.googleapis.com/css?family=Lato")    

* {    

 margin: 0    

 padding: 0    

 box-sizing: border-box    

}    

body {    

 font: 14px/1 Lato, sans-serif    

 color: #555    

 background: #eee    

}    

.gallery {    

 width: 790px    

 margin: 30px auto    

 padding: 5px    

 background: #333    

}    

.gallery > div {    

 position: relative    

 float: left    

 padding: 5px    

}    

.gallery > div > img {    

 width: 250px    

 transition: .1s transform    

 transform: translateZ(0)    

 /* hack */    

}    

.gallery > div:hover {    

 z-index: 1    

}    

.gallery > div:hover > img {    

 transform: scale(1.5, 1.5)    

 transition: .3s transform    

}    

.cf:before, .cf:after {    

 display: table    

 content: ""    

 line-height: 0    

}    

.cf:after {    

 clear: both    

}    

h1 {    

 margin: 40px 0    

 font-size: 24px    

 text-align: center    

 text-transform: uppercase    

}    

footer {    

 margin: 80px 0    

 text-align: center    

}    

</style>    

   <script src="js/prefixfree.min.js"></script>    

</head>    

<body>    

<div class="gallery cf">    

 <div>    

   <img src="landscape-test-1_1x.jpg" />    

 </div>    

 <div>    

   <img src="iceberg_1x.jpg" />    

 </div>    

 <div>    

   <img src="igloo-800_1x.jpg" />    

 </div>    

 <div>    

   <img src="trees_1x.jpg" />    

 </div>    

 <div>    

   <img src="space_1x.jpg" />    

 </div>    

 <div>    

   <img src="render1_1x.jpg" />    

 </div>    

</div>    

<div style="text-align:centerclear:both">    

<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>    

<script src="/follow.js" type="text/javascript"></script>    

</div>    

</body>    

</html>