先看一个例子：
img{
width:350px;
height:350px;
visibility:hidden;
position:absolute;
}
img:target{
visibility:visible;
}
上面这个例子实现的效果，也可以用如下的来做：
img{
width:350px;
height:350px;
display:none;
}
img:target{
display:block;
}
注意，用visibility隐藏属性时，要将position设置为absolute，否则图片就会占据原来的位置。
转化属性transform：使用该属性应用2D或3D转换，指定一组转换函数，取值：
transform:none(默认值，元素不进行转换)/transform-function（表示一个或者多个转换函数，中间以空格
分开）;例transform:rotate(90deg)scale(0.8);
变化的只是该元素本身状态，不会使其位置和其他元素发生变化
transform-origin转换的原点：用来指定元素的转换原点位置，默认情况下，转换的原点在元素的中心点，或
者是X轴或Y轴的50%处。取值有：数字/百分比/关键字（left、top、right、bottom）；
一个值：表示所有轴的位置
两个值：表示X轴和Y轴
三个值：表示X轴、Y轴和Z轴
translate（）方法可以将元素从其当前位置移动，如果只取一个值，则表示X轴上移动多少，如果要让在X轴
和Y轴上都发生移动，需要设置两值，中间用逗号隔开，如：translate（X）或者translate（X,Y），可取值
：数值、百分比，也可以是负值。另外，虽然元素从视觉上发生了移动，但是本身占据的位置是没有变化的。
也可使用单向位移函数translateX（）或translateY（）
scale（）：缩放，此方法用于改变元素的尺寸，取一个值表示X轴和Y轴都进行相同的缩放。scale取值只能是
倍数缩放，默认为1，值为0~1之间的数值表示缩小，为大于1的数值表示放大。可以使用单向缩放函数scaleX
（X）和scaleY（Y）
rotate（）：旋转，里面只有一个值，即角度值，单位是deg,正值表示顺时针转对少度，负值表示逆时针转多
少度
skew（）：倾斜，以原点位置，围绕X轴和Y轴按照一定的角度倾斜，可能会改变元素的形状。值是一个角度，
角度为90度时只有一条线。只有一个值时表示在X轴发生变化，两个值则表示在X轴和Y轴都发生变化。也可以
使用单向倾斜函数skewX（x）和skewY（y）。角度值X轴上是向左移动，Y轴上是向上移动。
3D转换：效果不理想
perspective属性：定义3D元素距离视图的距离，以像素计。是一个空间，必须定义给父级元素，定义了父元
素的perspective里面的子元素才能发生选择等转换。只影响3d转换元素。浏览器兼容性：chrome和Safari支
持替代的-webkit-perspective属性。
translateZ 3D位移，改变元素在Z轴位置，属性包含translateZ（z）和translate3d(x,y,z)。使用的效果不
理想。
在3D转换里，旋转的效果稍微好点，其他的属性效果都不太好。
过渡：可以制作动画效果，使得CSS的属性值在一段时间内平滑的过渡。
指定4个要素：
指定过渡属性，如background、color
指定过渡所需时间，即过渡多久
指定过渡函数，即过渡的速度、方式等
指定过渡延迟时间，表示开始执行的时间
触发过渡：
通过用户的行为触发，如点击、悬浮等
由元素的状态变化触发 :hover\:active\:focus等
由JavaScript代码触发
过渡子属性：
过渡属性transition-property:
规定应用过渡效果的css属性的名称，当指定的css属性改变时，过渡效果将开始。语法transition-
property:none|all|property;
可以设置过渡的属性：颜色属性、取值为数值的属性(border，width等）、转换属性、渐变属性、
visibility属性、阴影属性
过渡时间transition-duration：
规定完成过渡效果需要花费的时间，以秒或毫秒计。语法transition-duration:s|ms; 默认值是0，
意味着不会有效果，必须设置transition-duration属性，否则时长为0，就不会产生过渡效果，
transition-timing-function过渡函数，过度曲线，实现的是匀速还是加速变化，取值为预定义函数或贝塞尔曲线
语法：transition-timing-function:function；
预定义函数：
ease：默认值，慢速开始，快速变快，然后慢速结束
linear：以相同速度开始至结束
ease-in：以慢速开始，加速效果
ease-out：以慢速结束，减速效果
ease-in-out：以慢速开始和结束，先加速再减速
过渡延迟transition-delay：规定过渡效果何时开始，鼠标指上去要过一段时间才发生变化，鼠标离开后也要过段时间才发生变化，以秒或毫秒计。语法：transition-delay:s|ms;
简写：
transition:property（属性） duration（变换时间） timing-function（变换是否迅速还是什么） delay（触发事件是否延迟）;
属性和持续时间是必须写的。可以同时过渡多个属性，中间用逗号隔开。分开写的时候，如果值相同就写一个值。transition可以视具体情况加在合适位置，不一定非得和里面的transform属性在一个东西里面。
两种写法，如：
方法一：
transition:transform 5s linear,
background 5s linear;
方法二：
transition-property：transform,background;
transition-duration:5s;
transition-timing-function:linear;
注：过渡属性可以用all（所有属性），这样表示过渡的其他值是相同的，最好是想让那个属性发生变化加all，要不然所有的属性都会发生变化。
翻转时，转一圈是180度两圈才是360度，转一圈后的图片左右两边反了。
定义了perspective属性就是3D效果了，但是要注意3D效果可能不太好。
transform是不受框的内容影响的
总结下容易出错的地方：
1： transform:scale(0.8,1.1);此处的scale里面如果有两个数值，需要用逗号隔开。其他同理；
2：transform:skew(120deg) translateY(120px);次处的transform属性里面有多个函数，要用空格隔开，不能用逗号或者分号，否则会出错的。
3：这个属性是直接作用在元素上的，和以前学的属性差不多。
4：#d4 {
background:#fff;
transform:translate(0px);
transition:transform 5s linear,
background 3s linear;
}
#d4:hover {
background:#f00;
transform:translate(100px);
}
如果把transition属性加到hover里面，那么鼠标指上去会显示效果，但是鼠标离开后就没有了。所有要将transition加到#d4里面，这样鼠标离开后也能有一个过渡效果。
内容总结：
transform 转换 使元素改变状态
2D： scale 缩放 倍数
rotate 旋转 角度（正值为顺时针，负值为逆时针）
translate 位移 translate(Xvalue,Yvalue)（只有一个值只表示x轴的值）
skew 倾斜 单位：角度
3D： perspective 定义元素的子元素3D变换的空间（其实定义的是3D变换的深度，立体空间）
rotate rotateX rotateY rotateZ
rotate3D(x,y,z,deg) rotate3D(0.5,1,1,30deg) （此处的0.5,1,1表示的是30deg的倍数，即x轴15度，y轴z轴30度。xyz放到一起写前面必须加3D）
translateX、Y、Z
scaleX、Y、Z
scale3D(x,y,z)
过渡 transition 让我们元素的变换有一个过渡效果
需要动作触发：:hover、:active、:focus
javascript
transition:width 3s linear 1s
必备属性：前两个 过渡属性可以用all（所有属性）
动画：
过渡属性只能模拟动画效果，animation属性可以制作类似flash动画（通过关键帧控制动画的每一步）
浏览器兼容性：不仅在animation前加前缀，调用时keyframes前面也要加的
1.最新版本支持良好
2.chrome和Safari需要前缀-webkit-、
3.Firefox需要前缀-moz-
4.opera需要前缀-o-
步骤：
1、声明动画：创建一个已命名的动画，使用动画的关键帧。不能同时定义群组@keyframes，但是一个动画可
以同时被调用多次。不是选择器 如：@keyframes name(动画名字，别取中文和纯数字就行){}
2、为元素调用动画：对元素使用animation属性调用动画，设置动画的播放时间、播放次数等，
如:animation:change 3s;
动画子属性：
animation-name：调用动画的名称
animation-duration：动画完成一个周期的时间
animation-timing-function：动画的速度曲线，取值为预定于函数，如ease、linear、ease-in、ease-out、
ease-in-out，可以为贝塞尔曲线
animation-delay：延迟播放时间
animation-iteration-count：播放次数，取值为数值或infinite（无限次播放）
animation-direction：动画播放方向，取值为normal（默认值）或alternate（轮流播放，动画会在奇数次数
正常播放，偶数次数向后播放）
animation简写：
animation:name duration timing-function delay iteration-count direction;
animation-play-state属性：规定动画正在运行还是暂停，常用于结合JavaScript代码使用，实现在播放过程
中暂停动画，可取值有paused（动画暂停）和running（动画播放）
animation-fill-mode属性：规定动画在播放之前或之后，其动画效果是否可见。可取值：none（不改变默认
行为）、forwards（当动画完成后，保持最后一个属性值，在最后一个关键帧中定义）、backwards（在动画
显示之前，显示第一帧，在第一个关键帧中定义）、both（动画开始前显示第一帧，最后保持最后一帧，向前
和向后填充模式都被应用）
总结：
动画 animation
关键帧：@keyframes name{
from {
第一帧的属性
}
percent(百分比) {
中间帧的属性
}
to {
最后一帧的属性
}
}
用animation属性调用
animation:name 动画过程时间 加速度 重复次数 延迟;
兼容性：Chrome加-webkit-
火狐加-moz-
opara加-o-
animation-fill-mode
动画开始播放前、播放结束后，是否保持动画帧状态
forwards 保持最后一帧状态
backwards 保持第一帧状态
both 保持第一帧和最后一帧状态
如果动画无限循环，则无效。
animation-play-state
running 播放
paused 暂停
hover paused、默认 running
可以实现鼠标滑过动画暂停，离开继续播放
html{
height:100%;/*为了实现在所有浏览器中都是100%显示，需要给body的外层容器加一个高度*/
}
body{
background:url(images/cloud.png) repeat-x left bottom #049ec4;
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;/*隐藏下面的滚动条，不设置会多一行*/
animation:cloud 20s linear infinite;
-webkit-animation:cloud 20s linear infinite;
}
css优化：
作用：减轻服务器压力缩短服务器响应时间、提高用户的体验度
原则：尽量减少HTTP请求次数，如图像精灵（合并多个图像拼在一个图像里），页面顶部引入css提高页面加载速度，缓存后后续的使用可以直接使用缓存就行了、合并样式（样式能合并就合并，提前定义统一的样式，利用css继承）、缩小样式文件（尽量使用简写属性）、选择更优的样式属性值（border:none要比border-color：transparent要好）、减少样式重写（使用reset，但并非全局reset，清除样式）、压缩代码（使用工具压缩css代码，如yuicompressor,这个需要在jdk环境下使用，可以在网上直接使用在线工具压缩代码）、不要在html中缩放图像（放大会使图片虚化，缩写会浪费资源，因为加载的是原图）、避免空的src和href属性
5万+
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
