先看一个例子:
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属性