摘要: 3D特点 近大远小。 物体后面遮挡不可见 三维坐标系 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 简单记住他们的坐标:相对盒子本身的位置来移动的 x左边是负的,右边是正的 y 上面是负的, 下面是正的 z 里面是负的, 外面是正的 rotateX() 就是沿着 x 立体旋转. im 阅读全文
posted @ 2020-08-10 19:58 星辰ꦿ.大海 阅读(437) 评论(0) 推荐(0) 编辑
摘要: 动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 动画序列 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改变为新样式的动画效果 动画是使元素从一种样式逐 阅读全文
posted @ 2020-08-10 18:10 星辰ꦿ.大海 阅读(402) 评论(0) 推荐(0) 编辑
摘要: transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式 变形转换 transform transform 变换 变形的意思 移动 translate(x, y) 1. 2D移动是2D转换里面的 一种功能,可以改变元素在页面中的位置,类似定位 tra 阅读全文
posted @ 2020-08-10 18:03 星辰ꦿ.大海 阅读(221) 评论(0) 推荐(0) 编辑
摘要: 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画( 阅读全文
posted @ 2020-08-10 18:02 星辰ꦿ.大海 阅读(175) 评论(0) 推荐(0) 编辑
摘要: 图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了, 这 阅读全文
posted @ 2020-08-10 18:01 星辰ꦿ.大海 阅读(215) 评论(0) 推荐(0) 编辑
摘要: 精灵技术产生的背景 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的 阅读全文
posted @ 2020-08-10 18:01 星辰ꦿ.大海 阅读(255) 评论(0) 推荐(0) 编辑
摘要: CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主轴从左向右,侧轴默认从上到下 主 阅读全文
posted @ 2020-08-10 00:36 星辰ꦿ.大海 阅读(180) 评论(0) 推荐(0) 编辑
摘要: 滑动门出现的背景 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和盒子paddin 阅读全文
posted @ 2020-08-10 00:13 星辰ꦿ.大海 阅读(108) 评论(0) 推荐(0) 编辑
摘要: CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓以及 防止表单域拖拽等。但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了。 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : d 阅读全文
posted @ 2020-08-09 23:57 星辰ꦿ.大海 阅读(230) 评论(0) 推荐(0) 编辑
摘要: 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!! dis 阅读全文
posted @ 2020-08-09 23:47 星辰ꦿ.大海 阅读(107) 评论(0) 推荐(0) 编辑