对最近的学习情况做些总结(逆战班):
-
CSS Sprite(雪碧图)
特点:优化网页的手段,提高加载速度。
好处
可以减少图片的质量,网页的图片加载速度快
减少图片的请求的次数,加快网页的打开通过PS工具中的切片工具,可以非方便的测量位置和大小。
在线处理雪碧图:http://alloyteam.github.io/gopng
-
超大图居中
- 用背景 : background : center 0;
- 用图片 : position:relative; left:50%; margin-left:-容器的一半。
-
滑动门
选项卡、标签页(tab)
特殊元素要添加 唯一的class标识。
-
轮播图
考虑一下切换的方向,左右排列,还是上下,还是叠加。
-
模拟实现一些漂亮的控件
复选框、上传按钮:
label方式
position + opacity方式下拉菜单:也可以模拟
ul -> li
input type=“hidden” -
CSS3
CSS3是CSS的最新版本。
width height background border 都属于 CSS2.1
CSS3 会保留之前 CSS2.1的内容,只是添加了一些新的语法。CSS3 : border-radius :nth-of-type() background-size
-
transition过渡
transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;transition-duration : 规定完成过渡效果需要多少秒或毫秒。
需要添加单位:s (秒) ms (毫秒) 1s == 1000mstransition-delay : 定义过渡效果何时开始。
2s : 延迟两秒进行过渡
-2s : 提前两秒进行过渡transition-timing-function : 规定速度效果的速度曲线。
运动形式:加速、减速、匀速…
linear
ease(默认值)
ease-in
ease-out
ease-in-out
cubic-bezier
( http://cubic-bezier.com )复合写法:
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意:当总时间与延迟时间同时存在的时候,就有顺序了,第一个是总时间,第二个是延迟时间。transition:2s 3s linear all; √
注意:不要把transition放到hover中
-
transform变形
translate : 位移
transform:translate(100px,100px); : 两个值 分别对应 x 和 y。
transform:translateX(100px);
transform:translateY(100px);
transform:translateZ(100px); ( 3d )scale : 缩放
transform:scale(num) num是一个比例值,正常比例是1。
transform:scale(num1 , num2) 两个值 分别对应 w 和 h
transform:scaleX()
transform:scaleY()
transform:scaleZ() ( 3d )rotate : 旋转
transform:rotate(num) num是旋转的角度 30deg
正值:顺时针旋转
负值:逆时针旋转
表示一个角:角度deg 或 弧度radrotateX() ( 3d ) rotateY() ( 3d ) rotateZ() 注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度,针对的是x 和 y
transform:skewX()
transform:skewY()
注:skew没有3d写法。注:所有的变形操作,都不会影响到其他元素。(类似于相对定位)
注:变形操作对inline(内联元素)不起作用的。
注:transform可以同时设置多个值。
先执行后面的操作,在执行前面的操作。
位移会受到后面要执行的缩放、旋转和斜切的影响。 -
tranform-origin 基点位置
主要是针对 旋转和缩放,默认都是中心点为基点。
-
做特效
要确定:起点值和结束值。
套路:1.先把静态的效果做出来。
2. 把要运动的终点位置先做出。
3. 指定 tranform变形中对应的 0 值 ( 结束点位置 ).
4. 写 tranform变形的起点值 (起点的位置) -
animation动画
原理:逐帧动画。会把整个运动过程,划分成100份。
animation-name : 设置动画的名字 (自定义的)
animation-duration : 动画的持续时间
animation-delay : 动画的延迟时间
animation-iteration-count : 动画的重复次数 ,默认值就是1 ,infinite无限次数
animation-timing-function : 动画的运动形式
ease linear@keyframes 动画的名字 {
from {}
to {}
}from : 起点位置 , 等价于 0% to : 终点位置 ,等价于 100%
注:默认情况下,元素运动完毕后,会停到起始位置。复合样式:
animationanimation-fill-mode : 规定动画播放之前或之后,其动画效果是否可见。
none (默认值) : 在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效
backwards : 在延迟的情况下,让0%在延迟前生效
forwards : 在运动结束的之后,停到结束位置
both : backwards和forwards同时生效animation-direction : 属性定义是否应该轮流反向播放动画。
alternate : 一次正向(0%100%),一次反向(100%0%)
reverse : 永远都是反向 , 从100%~0%
normal (默认值) : 永远都是正向 , 从0%~100% -
animate.css
一款强大的预设css3动画库。
官网地址:https://daneden.github.io/animate.css/基本使用:
animated : 基类(基础的样式,每个动画效果都需要加)
infinite : 动画的无限次数
如果想改变运动的时间:需要在css文件中改变animated这个样式里的时间。 -
3D效果
perspective(景深) : 离屏幕多远的距离去观察元素,值越大幅度越小。
3D的眼镜rotateX rotateY translateZ scaleZ 注:反馈回来的立体,仅限于平面。
transform-style : 3D空间
flat (默认值2d)、preserve-3d (3d,产生一个三维空间)注:只要是有厚度的立体图形,就必须添加3D控件。 注:在立方体中默认会沿着第一个面进行旋转。 tranform-origin : x y z; (z不能写单词,只能写数字)
perspective-origin : 景深-基点位置,观察元素的角度。
backface-visibility : 背面隐藏
hidden、visible (默认值)3d写法( 扩展学习 )
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
rotate3d(1,1,1,30deg);
scale translate skew -
background-origin : 背景图的填充位置
默认情况下,如果xy都平铺的话,border padding content 区域都有背景图。
padding-box (默认) : 在padding区域开始填充背景图
border-box : 在border区域开始填充背景图
content-box : 在content区域开始填充背景图 -
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box注:当位置与裁切写入复合样式中,那么第一个值表示位置,第二个值表示裁切。
-
CSS3渐变?
线性渐变:
background-image:linear-gradient( 20deg , red , blue);
注:角度是0deg在容器的最下面bottom位置。正数就是顺时针旋转。径向渐变:
radial-gradient : 径向渐变 -
字体图标
font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。:你可以想象成一个小图片,其实它不是图片,而是一个字。
好处:
1.可以非常方便的改变大小和颜色
font-size:40px; color:red;
2.放大后不会失真3.减少请求次数和提高加载速度 4.简化网页布局 因为字体图标就是一个内联的元素,所以左右布局非常简单 5.减少设计师和前端工程师的工作量 用第三方库:www.iconfont.cn animate.css库
-
文字阴影
text-shadow
x
y
blur
color
多阴影注:默认情况下,阴影的颜色跟文字的颜色相同。
-
盒子阴影
box-shadow
x
y
blur : 模糊值
spread : 范围
color
inset : 内阴影 outset(默认值:外阴影 , 写上outset不会生效,不写就是外阴影)
多阴影注:默认盒子的阴影就是黑色。
-
浏览器前缀
浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。为此,当有一些CSS3样式语法还在波动的时候,他们提出了针对浏览器的前缀。chrome safari -webkit-
ie -ms-
firefox -moz-
opear -o- -
罩
mask
url
repeat
x
y
w
h
多遮罩注:需要在服务器环境下,之前通过右键打开方式都是本地打开。
注:如何在服务器环境下打开这个页面,下载插件:live server -
倒影
box-reflect
above 上
below 下
left 左
right 右
距离
遮罩 | 渐变
注:渐变必须是不透明渐变到透明