第三周总结

在逆战班第三周学了CSS Sprite
超大图居中用图片 : position:relative; left:50%; margin-left:-容器的一半
滑动门:特殊元素要添加 唯一的class标识
轮播图:考虑一下切换的方向,左右排列,还是上下,还是叠加
模拟实现一些漂亮的控件:复选框、上传按钮: label方式position + opacity方式下拉菜单:也可以模拟
ul -> li input type=“hidden”
CSS3:
transition过渡:
transition-property : 规定设置过渡效果的CSS属性的名称。
all ( 默认值 ) , 指定 width , height;

transition-duration  :  规定完成过渡效果需要多少秒或毫秒。
    需要添加单位:s (秒)  ms (毫秒)  1s == 1000ms

transition-delay     :  定义过渡效果何时开始。
    2s : 延迟两秒进行过渡
    -2s : 提前两秒进行过渡

transition-timing-function : 规定速度效果的速度曲线。
运动形式:加速、减速、匀速…
linear, ease(默认值) ease-in ease-out ease-in-out cubic-bezier
复合写法:
transition:all 2s linear; √
transition:linear 2s all; √
transition:2s linear all; √
注意:当总时间与延迟时间同时存在的时候,就有顺序了,第一个是总时间,第二个是延迟时间。
transition:2s 3s linear all; √
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 或 弧度rad rotateX() ( 3d ) rotateY() ( 3d ) rotateZ()
注 : rotate()跟rotateZ()是等价关系。
skew : 斜切
transform:skew(num1,num2) : num1和num2都是角度,针对的是x 和 y transform:skewX() transform:skewY()
基点位置 : 主要是针对 旋转和缩放,默认都是中心点为基点。
还学了特效逐帧动画的过程学习了一些3D的效果的实现怎么样子才能让div立体,然后学习了背景图的填充位置,背景图的裁切的方式,CSS渐变:就是在一个DIV里面怎样实现颜色的渐变
最后是字体图标font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中好处就是减少页面访问次数放大不会失真,还有小图标的网站怎么用就是按照上面的方法复制粘贴到你程序里面相应的位置就可以了,需CSS文件
文字阴影默认颜色是黑色,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值