图片缓慢变大
CSS3的transform:scale()可以实现按比例放大或者缩小功能。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
<style type="text/css"> div{ width: 300px; height: 300px; border: #000 solid 1px; margin: 50px auto; overflow: hidden; } div img{ cursor: pointer; transition: all 0.6s; } div img:hover{ transform: scale(1.4); } </style> </head> <body> <div> <img src="img/focus.png" /> </div> </body>
呼吸灯效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*resize*/ body { background:#333; } .breathe-btn { position:relative; width:100px; height:100px; margin:40px auto; line-height:40px; border:1px solid #2b92d4; border-radius:50px; color:#fff; font-size:20px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.3); overflow:hidden; /*background-image:-webkit-gradient(linear,left top,left bottom,from(#e5e5e5),to(#F4D03F));*/ -webkit-animation-timing-function:ease-in-out; -webkit-animation-name:breathe; -webkit-animation-duration:2700ms; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; } @-webkit-keyframes breathe { 0% { opacity:.2; /*box-shadow:0 1px 2px rgba(255,255,255,1);*/ } 100% { opacity:1; border:1px solid rgba(255,255,255,0.1); /*border:1px solid rgba(59,235,235,1);*/ /*box-shadow:0 1px 30px rgba(59,255,255,1);*/ box-shadow:0px 1px 30px rgba(103,88,77,1); } } </style> </head> <body> <div class="breathe-btn"></div> <div class="xingzhuang"></div> </body> </html>