过度Transition
css的transition允许css的属性值在一定的时间区间内平滑的过渡
语法格式
transition:属性名 时间 速度曲线 何时开始
transition:width 2s ease-in 2s;
-webkit-transition:width 2s ease-in 3s;
width 因为我们是为宽度写了hover后的值,所以如果这里写height属性是不会有过渡效果的
2s整个过渡效果持续的时间
ease-in 指定了过渡的动画效果
3s 过3秒后开始执行过渡效果
动画效果的可选值
linear 规定以相同的速度开始到结束(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,最后慢速结束
ease-in 规定慢速开始
ease-out 规定慢速结束
ease-in-out 规定慢速开始和结束的效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。数值在0至1之间。
transform 转换
通常的属性包含了属性名和属性值,而css3的transform属性是用函数来定义的。
transform 2D 最常用到的函数是rotate(30deg)
书写格式
transform:rotate(30deg);
通过rotate()方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。它以deg为单位,代表了旋转的角度。
示例:
div{width: 30px;height: 25px;background: url("img/jt.png")no-repeat left top;
transition:background 1s linear }
div:hover{transform: rotate(180deg); }
transform3D相关函数
rotateX()
rotate的翻转,好比一张纸,在根据X轴水平的翻转
rotateY()
rotateY与rotate函数一样,只不过是通过Y轴垂直翻转。
translate3d(x,y,z)
此函数用来规定指定元素在三维空间的位移。它有三个值,x轴,y轴,z轴。
示例:
<style>
.d{width: 200px;height:300px;background: orange;margin: 100px; position: relative;overflow: hidden;}
.d2{width: 200px;height: 100px;background: red;position: absolute;bottom: -100px;}
.d:hover{transform: translate3d(0px,-5px,0px);box-shadow: 0px 15px 15px gray;}
.d:hover .d2{bottom: 0px;transition: .4s;}
</style>
<div class="d">内容内容内容内容内容
<div class="d2"></div>
</div>
css的transition允许css的属性值在一定的时间区间内平滑的过渡
语法格式
transition:属性名 时间 速度曲线 何时开始
transition:width 2s ease-in 2s;
-webkit-transition:width 2s ease-in 3s;
width 因为我们是为宽度写了hover后的值,所以如果这里写height属性是不会有过渡效果的
2s整个过渡效果持续的时间
ease-in 指定了过渡的动画效果
3s 过3秒后开始执行过渡效果
动画效果的可选值
linear 规定以相同的速度开始到结束(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,最后慢速结束
ease-in 规定慢速开始
ease-out 规定慢速结束
ease-in-out 规定慢速开始和结束的效果
cubic-bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值。数值在0至1之间。
transform 转换
通常的属性包含了属性名和属性值,而css3的transform属性是用函数来定义的。
transform 2D 最常用到的函数是rotate(30deg)
书写格式
transform:rotate(30deg);
通过rotate()方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。它以deg为单位,代表了旋转的角度。
示例:
div{width: 30px;height: 25px;background: url("img/jt.png")no-repeat left top;
transition:background 1s linear }
div:hover{transform: rotate(180deg); }
transform3D相关函数
rotateX()
rotate的翻转,好比一张纸,在根据X轴水平的翻转
rotateY()
rotateY与rotate函数一样,只不过是通过Y轴垂直翻转。
translate3d(x,y,z)
此函数用来规定指定元素在三维空间的位移。它有三个值,x轴,y轴,z轴。
示例:
<style>
.d{width: 200px;height:300px;background: orange;margin: 100px; position: relative;overflow: hidden;}
.d2{width: 200px;height: 100px;background: red;position: absolute;bottom: -100px;}
.d:hover{transform: translate3d(0px,-5px,0px);box-shadow: 0px 15px 15px gray;}
.d:hover .d2{bottom: 0px;transition: .4s;}
</style>
<div class="d">内容内容内容内容内容
<div class="d2"></div>
</div>