-
CSS Sprite?
CSS雪碧也叫做CSS精灵,是一种网页图片应用处理方式。 它允许你将一个页面涉及到的所有零星图片都包含到一-张大图中去加载。
特点:优化网页的手段,提高加载速度。
好处
可以减少图片的质量,网页的图片加载速度快
减少图片的请求的次数,加快网页的打开通过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”
6.transition过渡
transition-property : 规定设置过渡效果的CSS属性的名称。
transition-property:width ,height;
all表示所有的属性,默认值
transition-duration : 规定完成过渡效果需要多少秒或毫秒。
transition-duration 需要加时间单位是 s秒 ms毫秒 1s ===1000ms
transition-delay :1s; 定义过渡效果何时开始。
transition-delay:2s;延时的效果
transition-delay:-2s;延时的效果
transition-timing-function : 规定速度效果的速度曲线。
transition-timing-function:
linear-----------------匀速
ease(默认值)-----------------逐渐慢下来
ease-in-----------------加速
ease-out-----------------减速
ease-in-out-----------------先加速后减速
cubic-bezier----------------- ( http://cubic-bezier.com )
复合写法: transition:all 2s linear
transition:2s linear all
transition:2s all linear
注意:当总时间与延迟时间同时存在的时候,就有顺序了,第一个是总时间,第二个是延迟时间。
transition:2s 3s linear all
7.transform变形
translate : 位移
transform:translate(x,y);
transform:translateX(100PX);
transform:translateY(100PX);
transform:translateZ(100PX);
scale : 缩放
transform:scale(num);
num是倍数,正常为1.
transform:scale(num1,num2);
两个值,分别代表w h
transform:scaleX(num);只针对宽
transform:scaleY(num);只针对高
transform:scaleZ(num);
rotate : 旋转
transform: rotate(num) num是旋转的角度30deg
正值:顺时针旋转
负值:逆时针旋转
表示一个角:角度deg 或 弧度rad
rotateX(3D)
rotateY(3D)
rotateZ(2D)
注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform : skew( num1, num2) : num1 和num2都是角度,针对的是x和y
transform : skewX( )
transform : skewY( )
注: skew没有3d写法。
注:设置多个值时候的顺序;先执行后面的,在执行前面的
位移会受到后面要执行的缩放、旋转和斜切的影响。
注:所有的变形不会影响其他元素,类似于相对定位。
注:变形操作对inline(内联元素)不起作用的。
tranform-origin 基点位置
主要是针对旋转和缩放,默认都是中心点为基点。
设置transform-origin的基点位置。设置transform-origin的基点位置。
-
animation动画:(可复合)
原理:逐帧动画。会把整个运动过程,划分为100份。 animation-name : 设置动画的名字 (自定义的) animation-duration : 动画的持续时间 animation-delay : 动画的延迟时间 animation-iteration-count : 动画的重复次数 ,默认值就是1 ,infinite无限次数 animation-timing-function : 动画的运动形式 linear-----------------匀速 ease(默认值)-----------------逐渐慢下来 ease-in-----------------加速 ease-out-----------------减速 ease-in-out-----------------先加速后减速 cubic-bezier----------------- ( http://cubic-bezier.com ) @keyframes 动画的名字{ from{}/*起点位置*/等价于0% to{}/*终点位置*/等价于100% } 注:默认情况下,元素运动完毕后,会停到起始位置。 animation-fill-mode : 规定动画播放之前或之后,其动画效果是否可见。 none (默认值) : 在运动结束之后回到初始位置,在延迟的情况下,让0%在延迟后生效 backwards : 在延迟的情况下,让0%在延迟前生效 forwards : 在运动结束的之后,停到结束位置 both : backwards和forwards同时生效 animation-direction : 属性定义是否应该轮流反向播放动画。 alternate : 一次正向(0%~100%),一次反向(100%~0%) reverse : 永远都是反向 , 从100%~0% normal (默认值) : 永远都是正向 , 从0%~100%
一款强大的预设css3动画库。
官网地址:https://daneden.github.io/animate.css/
9.animate.css
基本使用:
animated : 基类(基础的样式,每个动画效果都需要加)
infinite : 动画的无限次数
10.transform3D相关属性
rotateX() : 正值向上翻转
rotateY() : 正值向右翻转
translateZ() : 正值向前,负值向后
scaleZ() : 立体元素的厚度
3d写法
scale3d() : 三个值 x y z
translate3d() : 三个值 x y z
rotate3d() : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度) deg
erspective(景深) : 离屏幕多远的距离去观察元素,值越大幅度越小。
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
11.背景扩展
background-size:背景图的尺寸大小
cover:覆盖
contain:包含
background-origin:背景图的填充位置
(默认情况下,如果xy都平铺的话,border padding content 区域都有背景图。)
padding-box (默认):在padding区域填充背景图。
border-box:在边框border区域填充背景图。
content-box:在内容content区域填充背景图。
background-clip : 背景图的裁切方式
padding-box
border-box (默认)
content-box
复合样式:当位置与裁切都写时候,第一个表示位置,第二个表示裁切。
12.CSS3渐变
background-image:linear-gradient(to top, red ,blue);
background-image:linear-gradient( num deg, red ,blue);
background-image:linear-gradient( red 25% ,blue 75%);
linear-gradient : 线性渐变
to top:表示去哪儿方向
num deg:角度以底下中点为起点bottom位置,顺时针转。
red 25% ,blue 75%表示从25%到75%渐变,0~25%与75~100%没有变化。
radial-gradient : 径向渐变
13.字体图标
font-face是CSS3中的一个模块,他主要是把自已定义的Web字体嵌入到你的网页中。
@font-face{}
所有的自定义的字体都会放到一个文件中: xxx. svg
.eot .woff 这些文件主要是用来适配不同的环境或操作系统。
好处:
1.可以非常方便的改变大小和颜色
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
第三方库:
www.iconfont.cn
6.可使用计算机没有提供的字体。
-
文字阴影?
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 右
距离
遮罩 | 渐变
注:渐变必须是不透明渐变到透明
扩展:利用scale为-1实现翻转。
19.正常情况下,CSS是不支持运算的?
width:400px -200px -> 宽度失效了
calc() :可以进行四则运算
width:calc(100% - 200px);
width :width:calc(100% * 2);
注:运算的时候,需要在运算符两边添加空格
注:乘除的时候,是只写倍数的,不写单位。
注:应用场景,在百分比与像素进行计算的时候,用的比较多。