CSS学习笔记：transition

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

1、transition的属性值。

语法：

1   transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四个属性值：transition-property（执行变换的CSS属性）,transition-duration（变换持续时间）,transition-timing-function（变换速率变化）transition-delay（变换延迟时间）。

transition-property:主要有none、all以及特定的CSS属性，比如width/height/top/left/right等数值型属性，color值等。

transition-duration：默认为0，用户可以自行设定，比如0.5s。

transition-timing-function：这里主要有ease（逐渐变慢）、linear（匀速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）、cubic-bezier。

transition-delay：动画过渡延迟时间，用户自行设定，默认为0。

2、简单动画演示

（1）实现鼠标悬停后，模块直角变圆角的过渡动画。

 1  .img {
 2          width: 200px;;
 3          height: 200px;
 4          border: 10px solid #fff;
 5          -webkit-border-radius: 15px;
 6          border-radius: 15px;
 7          overflow: hidden;
 8          float: left;
 9          margin-left: 20px;
10      }
11      .img:hover {
12          cursor: pointer;
13      }
14      .border {
15          -webkit-transition: all 1s ease;
16          -moz-transition: all 1s ease;
17          -ms-transtion: all 1s ease;
18          -o-transition: all 1s ease;
19          transition: all 1s ease;
20      }
21      .border:hover {
22          border:10px solid #fff;
23          border-radius: 50%;
24          -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
25      }
26
27 <div class="border img">
28     <img src="img/7.jpg" alt=""/>
29 </div>

（2）实现鼠标悬停后，DIV内的图片放大的效果。

 1 .zoom img {
 2      width: 200px;
 3      height: 200px;
 4      -webkit-transition: all 2s ease;
 5      -moz-transition: all 2s ease;
 6      -ms-transition: all 2s ease;
 7      -o-transition: all 2s ease;
 8      transition: all 2s ease;
 9 }
10
11 .zoom img:hover {
12       width: 300px;
13       height: 300px;
14 }
15 .zoom:hover {
16      -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
17      -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
18      box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
19 }
20
21 <div class="zoom img">
22     <img src="img/14.jpg" alt=""/>
23 </div>

（3）悬停后，模块旋转。

 1 .rotate {
 2   -webkit-transition: all 0.3s ease;
 3   -moz-transition: all 0.3s ease;
 4   -o-transition: all 0.3s ease;
 5   -ms-transition: all 0.3s ease;
 6   transition: all 0.3s ease;
 7 }
 8
 9 .rotate:hover {
10   -webkit-transform: rotate(10deg);
11   -moz-transform: rotate(10deg);
12   -ms-transform: rotate(10deg);
13   -o-transform: rotate(10deg);
14    transform: rotate(10deg);
15   -webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
16   -moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
17    box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
18 }
19
20
21 <div class="rotate img">
22     <img alt="" src="img/15.jpg" />
23 </div>

转载于:https://www.cnblogs.com/lonelybonze/p/4445687.html

CSS学习笔记：transition相关推荐

CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

CSS学习笔记：transition

CSS学习笔记：transition相关推荐

最新文章

热门文章