小样式

图片缓慢变大

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>

猜你喜欢