CSS3过渡属性的使用

1. 目的:更改背景图片

2. 思路:联想到CSS3的transition属性,有更好的用户体验

3. 用法:可以在更改CSS样式时同时增加transition属性,该属性共有四个子属性

    1). transition-property    ->    过渡属性
    2). transition-duration    ->    过渡时间
    3). transition-timing-function    ->    速度曲线

    4). transition-delay    ->    延时时常

    其中第三点较难理解,有如下六种设置方式

描述
linear规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4. 则核心代码如下:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#ad {
				width: 320px;
				height: 510px;
				background-image: url(../../img/heros/yasuo.jpg);
				background-repeat: no-repeat;
				background-size: 100%;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {

				$('button').click(function() {
					
					$('#ad').css({
						
						'background-image': 'url(../../img/heros/wukong.jpg)',
						'transition': 'background-image 2s'
					})
				})
			})
		</script>
	</head>

	<body>
		<div id="ad">

		</div>
		<button>btn</button>
	</body>

</html>

至此

阅读更多

没有更多推荐了,返回首页