09-transitionDemo.html（画笔动画效果）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画笔动画效果</title>
<style type="text/css">
	body {
		background: #2192bc;
	}
	
	.box {
		width: 100px;
		height: 100px;
		background: url("img/brush.jpg") no-repeat center;
		background-size: cover;
		border-radius: 50%;
		margin: 100px auto;
		/* 鼠标划出效果：盒子阴影 扩展半径30px 透明 */
		box-shadow: 0 0 0 30px transparent;
		/* opera浏览器 */
		-o-transition: box-shadow 1s;
		/* ie浏览器 */
		-ms-transition: box-shadow 1s;
		/* 火狐浏览器 */
		-moz-transition: box-shadow 1s;
		/* 谷歌浏览器 */
		-webkit-transition: box-shadow 1s;
		transition: box-shadow 1s;
	}
	
	.box:hover {
		/* 鼠标划入效果：盒子阴影（渐变为无效果） 红色 */
		box-shadow: 0 0 0 0 rgba(255,0,0,0.8);
	}
	
	/*
	过渡动画效果思考步骤：
	1.找到过渡属性
	2.找到过渡属性起始值和结束值
	3.在合适的位置上增加transition属性
	
	过渡属性 box-shadow
	起始值 30px transparent
	结束值 0 red
	*/
</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
原文链接：https://blog.csdn.net/jamesge2010/article/details/103154201