HTML +CSS学习⑤

HTML +CSS学习⑤

HTML +CSS学习⑤

​​1 浏览器前缀？​​​​2 transition 过渡？​​​​3 transform变形？​​​​4 animation 动画？​​​​5 animate.css？​​​​6 3D操作？​​​​7 CSS3提供了扩展背景样式？​​​​8 CSS3渐变？​​

1 浏览器前缀？

CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加前缀。

2 transition 过渡？

transition-property : 规定设置过渡效果的CSS属性的名称。 transition-duration : 规定完成过渡效果需要多少秒或毫秒。 transition-delay : 定义过渡效果何时开始。 ( 延迟(数值为正数)，也可以提前(数值为负数) ) transition-timing-function : 规定速度效果的速度曲线。

注：不要加到hover上。

3 transform变形？

translate : 位移 translateX translateY translateZ ( 3d )

scale : 缩放 （值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放） scaleX scaleY scaleZ (3d)

rotate : 旋转 （ 旋转的值，单位是角度 deg ） rotateX (3d) rotateY (3d) rotateZ ( 和rotate是等级关系，那正值按顺时针旋转，负值按逆时针旋转 )

skew : 斜切 skewX : 单位也是角度，正值向左倾斜，负值向右倾斜。 skewY

transform的注意事项： 1. 变形操作不会影响到其他元素。 2. 变形操作只能添加给块元素，但是不能添加给内联元素。 3. 复合写法，可以同时添加多个变形操作。 执行是有顺序的，先执行后面的操作，再执行前面的操作。 translate会受到 rotate、scale、skew的影响 4. transform-origin : 基点的位置 x y z(3d)

4 animation 动画？

animation-name : 设置动画的名字 (自定义的) animation-duration : 动画的持续时间 animation-delay : 动画的延迟时间 animation-iteration-count : 动画的重复次数 ，默认值就是1 ，infinite无限次数 animation-timing-function : 动画的运动形式

注： 1. 运动结束后，默认情况下会停留在起始位置。 2. @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%

5 animate.css？

一款强大的预设css3动画库。 官网地址：​​​: 基类(基础的样式，每个动画效果都需要加)​​​infinite​​ : 动画的无限次数

6 3D操作？

transform:

​​rotateX() ​​: 正值向上翻转​​rotateY()​​ : 正值向右翻转​​ translateZ()​​ : 正值向前，负值向后​​scaleZ()​​ : 立体元素的厚度

3d写法​​​ scale3d()​​​ : 三个值 x y z​​​translate3d()​​​ : 三个值 x y z​​​rotate3d()​​ : 四个值 0|1(x轴是否添加旋转角度) 0|1(y轴是否添加旋转角度) 0|1(z轴是否添加旋转角度)

deg

​​perspective​​（景深）: 离屏幕多远的距离去观察元素，值越大幅度越小。​​perspective-origin​​ : 景深-基点位置，观察元素的角度。​​transform-origin​​: center center -50px; （Z轴只能写数值，不能写单词）​​transform-style​​​ : 3D空间 flat (默认值2d)、preserve-3d (3d，产生一个三维空间)​​backface-visibility​​​ : 背面隐藏 hidden、visible (默认值)

7 CSS3提供了扩展背景样式？

​​background-size​​​ : 背景图的尺寸大小cover : 覆盖contain : 包含​​background-origin​​​ : 背景图的填充位置padding-box (默认)border-boxcontent-box​​background-clip ​​​: 背景图的裁切方式padding-boxborder-box (默认)content-box

注：复合样式的时候，第一个是位置，第二个是裁切

8 CSS3渐变？

1 线性渐变 -> linear-gradient是值，需要添加到background-image属性上

注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转。

2 径向渐变 -> radial-gradient3 字体图标？

​​font-fac​​​e是​​CSS3​​中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。

好处：

1 可以非常方便的改变大小和颜色 font-size color2 放大后不会失真3 减少请求次数和提高加载速度4 简化网页布局5 减少设计师和前端工程师的工作量6 可使用计算机没有提供的字体

使用： @font-face语法 像.woff等文件都是做兼容平台处理的, mac、linux等。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。