CSS3过渡属性的使用

标签: css3 过渡动画 transition
1人阅读 评论(0) 收藏 举报

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>

至此

查看评论

10、CSS3-过渡属性

01、CSS3-过渡属性 transition: property duration timing-function delay; transition-property:过渡属性的名称 transi...
  • chuipaopao163
  • chuipaopao163
  • 2016-08-07 09:15:24
  • 406

CSS3中transition过渡属性的简单应用实例

我们在很多网站上看到一些当鼠标悬浮时,商品图片有一种放大的效果、盒子有上升、下降效果或者文字会偏移等等。这些其实都是增加用户体验的方式,那么,今天就以transition过渡属性来写一个比较通用且简单...
  • qq_40087415
  • qq_40087415
  • 2017-12-07 18:58:56
  • 315

CSS3元素过渡属性transition

过渡动画是动画的基础 在学习动画属性之前 我们需要先了解过渡属性transition过渡transition先来看一个小例子.demo { width: 100px; height...
  • q1056843325
  • q1056843325
  • 2016-11-23 16:59:27
  • 2459

【CSS基础】css3 transition过渡属性<四>

transition 过渡,顾名思义就是说一种变化是循序渐进的走过去,而不是瞬间变化(博主的烂理解)。 请查看mdn的解释: transition实际上 transition 是 简写,它包含4个属...
  • a5534789
  • a5534789
  • 2016-12-01 00:37:13
  • 1222

CSS3新属性—2D维度以及过渡

CSS3新增的一些2D、3D以及动画模块等可以帮助我们轻松完成一些有趣的小动画,在一定程度上可以代替javascript完成某些动态效果。它和普通的css用法一样由属性和属性值组成,属性为transf...
  • u012369271
  • u012369271
  • 2016-12-13 14:04:02
  • 1316

CSS3过渡属性transition

CSS3中得过渡transition是一种能与动画属性有类似效果的属性,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 它有四...
  • wmc_12
  • wmc_12
  • 2017-07-30 23:31:01
  • 288

CSS3过渡、变形和动画

原文-——Responsive Web Design with HTML5 and CSS3 1.什么是CSS3过渡以及如何使用它 我们在给超链接设置样式时,一般都会设置一个悬停状态(ho...
  • dreamjl
  • dreamjl
  • 2013-07-30 17:57:59
  • 2071

CSS3实现过渡效果 (transition)

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的 动画。...
  • actorWen
  • actorWen
  • 2017-12-14 10:09:14
  • 481

CSS3属性transition(过渡)详解

transform呈现的是一种变形结果,而transition呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。 ...
  • github_36758028
  • github_36758028
  • 2016-11-21 11:32:33
  • 3281

【CSS3】动画--过渡属性 transition-property

动画--过渡属性 transition-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transit...
  • happyhaojie
  • happyhaojie
  • 2016-02-24 18:55:13
  • 843
    个人资料
    持之以恒
    等级:
    访问量: 658
    积分: 200
    排名: 34万+
    文章分类
    文章存档