简单基础概念如下:
1、转换
1、什么是转换
改变元素在页面中的大小,位置,角度和形状的一种方式
2、转换分类
1、2D转换
使元素在x轴和y轴上发生变化效果
2、3D转换
在2D转换基础上,增加 z轴的变化效果
3、转换属性
属性:transform 取值:
1、none
默认值,不进行任何转换
2、转换函数
表示一个或者多个转换函数,如果是多个函数的话,中间以空格分开
4、转换原点
属性:transform-origin
默认情况下,原点是在整个元素的中心位置处
取值:数值/百分比/关键字
两个值:表示 x轴 和 y轴的位置
三个值:表示 x轴 ,y轴 ,z轴的位置
2、2D转换
1、2D位移
1、属性 和 函数
属性:transform
函数:
translate(x) :元素在x轴上的位移距离,取值为正,向右移动,取值为负,向左移动
translate(x,y) :
x表示x轴位移距离
y表示y轴位移距离,取值为正,向下移动,取值为负,向上移动
translateX(x) :只改变元素在x轴上的位置
translateY(y) :只改变元素在y轴上的位置
取值:
1、数值
2、百分比
2、2D缩放
1、作用
改变元素在页面中的大小
2、属性和函数
属性:transform
函数:
scale(value),如果只给一个值,那么x轴和y轴将等比缩放
scale(x,y):改变 x轴和y轴的缩放比例
scaleX(x):只改变x轴的缩放比例
scaleY(y):只改变y轴的缩放比例
取值:
默认值 为1
缩小:0~1 之间的数值
放大:大于1的数值
3、2D旋转
1、作用
改变元素在页面中的角度
2、属性 和 函数
属性:transform
函数:rotate(ndeg)
n取值为正,则顺时针旋转
n取值为负,则逆时针旋转
3、注意
1、转换时,坐标轴会一起进行转换
2、转换原点可以影响转换效果
4、2D倾斜
1、作用
改变元素在页面上的形状
2、属性 和 函数
属性:transform
函数:
skew(xdeg) : x轴倾斜指定角度
实际上时改变 y轴的倾斜角度
取值为正:逆时针
取值为负:顺时针
skewX(xdeg) : 效果同上
skewY(ydeg) : y轴倾斜指定角度
实际上是改变 x轴的倾斜角度
取值为正:顺时针
取值为负:逆时针
3、3D转换
1、3D转换
增加 z轴 转换效果
2、属性
属性:perspective
作用:模拟 人眼睛到 3D投射元素的距离
注意:该属性 需要加在 3D转换元素的父元素上
兼容性:
火狐:-moz-perspective:
Chrome,Safari:-webkit-perspective
Opera:-o-perspective
3、3D旋转
允许元素在 x轴,y轴,z轴上进行旋转操作
属性 和 函数
属性:transform
函数:
rotateX(xdeg):以x轴为中心轴进行元素的旋转
rotateY(ydeg)
rotateZ(zdeg)
rotate3D(x,y,z,ndeg)
x,y,z,如果取值为 0的话,说明该轴不参与旋转
x,y,z,如果取值为 1的话,说明该轴是参与旋转的
rotate3d(0,0,1,45deg)-- rotatez(45deg)
rotate3d(1,1,0,45deg)
4、3D位移
1、作用
改变元素在z轴上的位置
2、属性 和 函数
属性:transform
函数:
translateZ();
translate3D(x,y,z)
3、属性 : transform-style
作用:规范当前元素的子元素如何去排列3D位置
取值:
1、flat
默认值,不保留子元素的3D位置
2、preserve-3d
保留子元素3d位置
过渡
1、什么是过渡
使得CSS的属性值在一段时间内平滑过渡
2、过渡的 4个要素(属性)
1、指定过渡属性
属性:transition-property
作用:规定应用过渡效果的CSS属性名称
取值:
1、none
2、all
3、property-name : 具体使用过渡效果的属性名称
可以设置过渡的属性:
1、颜色属性
2、取值为数值的属性
3、转换属性
transform
4、渐变属性
5、visibility 属性
6、阴影属性
例子:
div{
transition-property:background;
}
2、指定过渡时间
属性:transition-duration
取值:以秒(s) 或 毫秒(ms) 作为单位的
默认值为0,即没有过渡效果
例子:
div{
transition-property:background;
transition-duration:300ms;
}
3、指定速度时间曲线函数
属性:transition-timing-function
取值:
1、ease : 默认值,慢速开始,快速变快,慢速结束
2、linear : 匀速
3、ease-in : 慢速开始,加速结束
4、ease-out: 快速开始,减速结束
5、ease-in-out:慢速开始和结束,中间先加后减
例子:
div{
transition-property:background;
transition-duration:300ms;
transition-timing-function:linear;
}
4、指定过渡延迟时间
属性:transition-delay
取值:ms 或 s 作为单位的数值
3、触发过渡效果
一般都是由用户行为触发
5、过渡属性-过渡子属性的简写模式
transition:property duration timing-function delay;
3、动画
1、什么是动画
使元素从一种样式逐渐变化为另一种样式
其原理是通过 关键帧 控制动画的每一步
注意:浏览器兼容性
通过了浏览器前缀解决兼容性
-moz-
-webkit-
-o-
2、使用动画的步骤
1、声明动画
声明动画的名称,并且指定关键帧的信息
关键帧:
1、时间点
2、该时间点上的状态(样式)
2、使用动画
通过动画属性,将动画效果绑定到某个元素上
3、声明动画
语法
@keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
兼容 Chrome Safari
@-webkit-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
兼容 Firefox
@-moz-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
... ...(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}
时间点:
0%(from) : 动画开始的时候
50% : 动画运行到一半的时候
100%(to) : 动画结束的时候
4、动画的调用
1、animation-name
要调用的动画名称
2、aniamtion-duration
动画完成一个周期需要用的时间
以s 或 ms 为单位
3、animation-timing-function
动画的 速度时间 曲线函数
ease
linear
ease-in
ease-out
ease-in-out
4、animation-delay
动画执行延迟时间
s|ms为单位
5、animation-iteration-count
动画播放次数
取值:
1、具体数值
2、infinite
无限次播放
6、animation-direction
动画播放方向
取值:
1、normal
默认值,正向播放,即从 0%~100%
2、reverse
逆向播放,即从100% ~ 0%
3、alternate
轮流播放,动画在奇数次数播放时,从 0% ~ 100%,动画在偶数次数播放时,从100% ~ 0%
7、animation属性
animation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
动画播放前后的填充方式
取值:
1、none
默认值,不改变默认行为
2、forwards
动画完成后,将保持在最后一个关键帧的状态上
3、backwards
动画播放前(在延迟时间内),将元素保持在第一个帧的状态上
4、both
动画播放前后的填充模式都应用
9、animation-play-state
动画的播放状态
取值:
1、paused
暂停
2、running
播放
实际例子:
设计折叠面板:
使用CSS设计折叠效果,没使用js,使用过度属性设计滑动效果,代码如下:
<style>
/*定义折叠框外框样式*/
.accordion{
background: #eee;
border: 1px solid #999;
margin: 2em;
}
/*定义折叠框标题样式栏*/
.accordion h2{
margin: 0;
padding: 12px 0;
background: #CCC;
}
/*定义折叠框内容框样式*/
.accordion section{
border-bottom: 1px solid #ccc;
background: #fff;
}
/*定义折叠框选项标题样式*/
.accordion h3{
margin: 0;
padding: 0;
background: #eee;
padding: 3px 1em;
}
/*定义超链接样式*/
.accordion h3 a{
font-weight:normal;
text-decoration: none;
}
/*当获得目标焦点时,粗体显示选项标题栏文字*/
.accordion :target h3 a{
font-weight: bold;
}
/*选项栏对象子选项框样式*/
.accordion h3+div{
height: 0;
padding: 0 1em;
overflow: hidden;
/*定义过渡对象为高度,过渡时间为3秒,渐显显示*/
transition: height 0.3s ease-in;
}
.accordion h3+div img{margin: 4px;}
.accordion:target h3+div{
height: 300px;
overflow: auto;
}
</style>
<div class="accordion">
<h2>我爱买</h2>
<div id="one" class="section">
<h3><a href="#one">爱逛</a></h3>
<div><img src="../imag/timg (3).jpg"></div>
</div>
<div id="two" class="section">
<h3><a href="#two">爱逛</a></h3>
<div><img src="../imag/timg .jpg"></div>
</div>
<div id="three" class="section">
<h3><a href="#three">爱吃</a></h3>
<div><img src="../imag/首页1.jpg"></div>
</div>
</div>