所有CSS样式： /*基础样式*/body{padding:40px;background-color:#333;}.cardimg{height:100%;width:100%;}.card{bac
所有CSS样式：
/* 基础样式 */body { padding: 40px; background-color: #333;}.card img { height: 100%; width: 100%;}.card { background: #FFFFFF; width: 150px; height: 200px; border: 1px solid #CCCCCC; border-radius: 4px; margin: 2px; text-align: center; float: left;}/* 核心样式 */.card { /* 定义过渡属性，就是平滑的变大，看起来不会那么生硬 */ transition: all 1s 1 ease-in-out; /* webkit写法,现在的chrome版本已经支持transition这种方式了 */ -webkit-transition: all 1s 1 ease-in-out;}.card:hover,.card:focus { /* 依次定义变换、阴影、阴影的动画 */ transform: scale(1.2); box-shadow: 2px 4px 6px #555555; animation: glow 1500ms ease-out infinite alternate; -webkit-transform: scale(1.2); -webkit-box-shadow: 2px 4px 6px #555555; -webkit-animation: glow 1500ms ease-out infinite alternate; outline: none;}/* 阴影的呼吸灯效果 */@keyframes glow { 0% { border-color: #FFF; box-shadow: 0 0 5px 5px transparent; } 100% { border-color: #FFF; box-shadow: 0 0 10px 5px #FFF; }}@-webkit-keyframes glow { 0% {
body元素
<a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a> <a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a> <a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a> <a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a> <a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a>
图片大金刚，自己换了就OK
代码只在chrome上做了测试，其他浏览器如果支持上述CSS特性，那么应该也是可以的。
来看看效果图
