![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css高级
文章平均质量分 73
随笔
旅泊
总有一个晴朗的上午
风会停
雪会化
希望会到来
展开
-
06 浏览器私有前缀
浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加 私有前缀 -moz-: 代表firefox浏览器私有属性 -ms-: 代表ie浏览器私有属性 -webkit-: 代表safari, chrome私有属性 -o-: 代表Opera私有属性 提倡的写法 -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; ...原创 2021-02-23 15:05:40 · 92 阅读 · 0 评论 -
05 CSS3 3D转换
3D转换 有什么特点? 近大远小 物体后面遮挡不可见 三维坐标系 三维坐标系其实就是指立体空间, 立体空间是由3个轴共同组成的 x轴: 水平向右 注意: x右边是正值, 左边是负值 y轴: 垂直向下 注意: y下面是正值, 上面是负值 z轴: 垂直屏幕 注意: 往外面是正值, 往里面是负值 主要知识点 3D位移: translate3d(x, y, z); 3D旋转: rotate3d(x, y, z); 透视: perspective 3D呈现: transfrom-style 3D移动tr原创 2021-02-23 15:04:59 · 161 阅读 · 0 评论 -
04 动画
动画 动画(animation)是CSS3种具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果 相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果 动画的基本使用 制作动画分为两步 先定义动画 再使用(调用)动画 用keyframes定义动画(类似定义器选择器) 语法: @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px;原创 2021-02-23 15:02:23 · 81 阅读 · 0 评论 -
03 CSS3 2D
CSS3 2D转换 **转换(transform)**是CSS3中具有颠覆性的特征之一, 可以实现元素的唯一, 旋转, 缩放等特效效果 转换(transform)可以简单理解为变形 移动: translate 旋转: rotate 缩放: scale 1) 2D转换之移动translate 2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位 语法: transform: translate(x, y); 或者分开写 -> transform: translateX(n) t原创 2021-02-23 15:01:06 · 70 阅读 · 0 评论 -
02 CSS3新特性
CSS3的现状 新增的CSS3特性有兼容性问题, ie9+才支持 移动端支持优于PC端 不断改进中 应用相对广泛 现阶段主要学习:新增选择器和盒子模型以及其他特性 CSS3新增选择器 属性选择器 结构伪类选择器 伪元素选择器 注意:类选择器, 属性选择器, 伪类选择器, 权重为10 1. 属性选择器 属性选择器可以根据元素特定的属性来选择元素。 这样就可以不用借助类或者id选择器 用中括号[] 权重为10 下面权重为11 标签选择器+属性选择器 input[value] { color原创 2021-02-23 14:59:01 · 110 阅读 · 0 评论 -
01 CSS高级
精灵图 为什么需要精灵图? 一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这将大大降低页面的加载速度 因此, 为了有效地减少服务器接收和发送请求次数, 提高页面的加载速度, 出现了CSS精灵技术(也称为CSS Sprites, CSS雪碧) 精灵图(spriyes)的使用(重要) 使用精灵图核心: 精灵技术主要针对于背景图片使用. 就是把多个小背景图片整合到一张大图片中 这个大图片也称为sprites精灵原创 2021-02-23 14:52:47 · 80 阅读 · 0 评论