CSS3过渡属性的使用

最新推荐文章于 2024-04-25 16:16:15 发布

Koon_AgueroAgnis

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量635

点赞数

文章标签： css3 过渡动画 transition

本文链接：https://blog.csdn.net/guoxiaozhuang4/article/details/79967897

版权

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>

至此