CSS3中过渡属性以及一些案例介绍
【摘要】 CSS中的过度属性是一种比较重要的属性
过渡( transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash 动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持( ie9以下版本）但是不会影响页面布局。
我们现在经常和:hover一起搭配使用。
可以用CSS3做一个动画效果
- 属性︰想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以。
- 花费时间:单位是秒(必须写单位）比如0.5s
- 运动曲线:默认是ease (可以省略)
- 何时开始︰单位是秒(必须写单位)可以设置延迟触发时间默认是0s(可以省略)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>1. 项目导读
1.1 需要实现的目标
2. 项目规划
2.1 网站制作流程
2.2 项目需要
- 品优购项目整体介绍
- 品优购项目学习目的
- 开发工具以及技术栈
2.1 项目介绍
项目名称:品优购
项目描述︰品优购是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作
2.2 学习目的
- 电商类网站比较综合，里面需要大量的布局技术，包括布局方式、常见效果以及周边技术。
- 品优购项目能复习、总结、提高基础班所学布局技术。
- 写完品优购项目，能对实际开发中制作PC端页面流程有一个整体的感知。
- 为后期学习移动端项目做铺垫。
2.3 涉及的工具和技术
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）