CSS 学习
文章平均质量分 94
nie-ny
小小的前端
展开
-
学习 CSS @media 媒体查询
属性简介基于一个或多个 媒体查询 的结果来应用样式表的一部分。就是可以根据不同的媒体类型定义不同的样式。当页面需要响应式布局时,@media 是非常有用的。因为浏览器重置大小时,页面也会根据浏览器的宽度和高度重新渲染页面,使@media重新计算书否加载样式。样例:/* screen 当设备是 电脑屏幕,平板电脑,智能手机等。并且 width > 900px 使用 .article 样式块 */@media screen and (min-width: 900px) { .artic原创 2021-08-09 17:25:28 · 451 阅读 · 0 评论 -
学习 CSS 滚动条样式
在开发中经常出现要滚动的模块,原始样式会影响客户的体验。为了以后更快速开发,现在开始加深影像。属性简介注意 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器才能使用。当使用了::-webkit-scrollbar后,默认样式就会全部消失::-webkit-scrollbar 整个滚动条样式。width 控制竖滚动条宽度,height横滚动条宽度。<!DOCTYPE html><html lang="en"> <style>原创 2021-08-09 17:24:23 · 262 阅读 · 0 评论 -
学习 CSS 文本溢出显示省略号
在开发中经常会用到文本溢出省略打点,为了更好的记住它,现在开始深入了解。单行文本显示省略号<!DOCTYPE html><html lang="en"> <style> .text { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <body&原创 2021-08-09 17:23:20 · 1059 阅读 · 0 评论 -
学习 clip-path属性 和 常用方式
clip-path 属性clip-path 属性是 clip 属性的升级版。clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。clip 属性只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形。第一类值 basic-shape 一种形状,由不同的函数绘制。第二类值 clip-source 用 <url> 的方式引用SVG 的 <clipPath> 来作为剪裁路径。第三类值 geometr原创 2021-08-09 17:22:17 · 5095 阅读 · 2 评论 -
学习 filter属性 和 常用方式
filter属性filter CSS属性 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。原图blur(px) 模糊函数将高斯模糊应用于输入图像。值越大越模糊,默认是0,不设置模糊。单位是px,不接受百分比值。.img { margin-left: 50px; filter: blur(5px);}brightness(%) 亮度函数将线性乘法器应用于输入图像,使其变暗或变亮。值为 0% 生成全黑图像。值为 100% 保持不变。值超过100%也是可原创 2021-06-04 10:31:16 · 460 阅读 · 0 评论 -
学习 css变量 和 常用方式
css变量使用CSS自定义属性(变量)由作者自己定义的css属性,(比如: --main-color: black;)。可以在整个文档中重复使用。css变量遵循级联,会从父级继承它们的值。由var() 函数来获取值(比如: color: var(--main-color);)可以降低维护成本,增加页面高性能,减少代码体积。变量声明和获变量的声明语法是:--*,变量使用语法是:var(--*)。* 代表变量名称。:root{ --main-color: #4d4e53;}:ro原创 2021-06-03 08:54:43 · 149 阅读 · 0 评论 -
实现 3D 时间动画展示效果
搭建舞台<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <原创 2021-06-03 08:54:20 · 194 阅读 · 0 评论 -
学习 animation属性 和 常用方式
transition 属性animation 属性是 animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。并非所有属性都支持 animation。支持 animation 的属性 – CSS animat原创 2021-06-03 08:53:53 · 2515 阅读 · 0 评论 -
transform 属性 实现3D立体相册
属性简介perspective 属性perspective 属性 指定了观察者与 z = 0 平面的距离,使具有三维位置变换的元素产生透视效果。transform-style 属性属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中变换。translateZ() 函数修改元素 z轴 在三维空间的位置。rotateX() 、rotateY() 函数rotateX()元素围绕 x轴 旋转。rotateY()元素围绕 y轴 旋转。animation 属性为元素原创 2021-06-02 10:33:57 · 232 阅读 · 1 评论 -
transform 属性 实现旋转木马效果
搭建舞台... <style type="text/css"> .main{ width: 900px; min-height: 100px; margin:0 auto; padding: 100px 50px; background-color: #f0f0f0; box-shadow: inset 0 0 3px rgba(0,0,0,.35); posi原创 2021-06-02 10:32:59 · 179 阅读 · 0 评论 -
学习 transform 属性 和 常用方式
transform-origin 属性作用是修改元素的中心点。transform属性 的变换都是基于中心点来进行变换的,中心点修改,元素变换后的位置就会改变。可以使用一个,两个或三个值来指定,中心点偏移量。第一个值指定X轴偏移量,参数类型是css 长度单位、百分比 或 left, center, right, top, bottom关键字。第二个值指定y轴偏移量,参数类型是css 长度单位、百分比 或 left, center, right, top, bottom关键字。第三个值指定z轴偏移量,参原创 2021-06-02 10:31:39 · 2187 阅读 · 0 评论 -
学习 transition 属性 和 常用方式
transition是什么transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个 简写属性 。主要用于实现 过渡动画,过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。( 例如开始高100px,修改为200px,它不是接修改,而是把每一次增加1px的过程也渲染出来了 )。transition 属性 可以被指定一个或多个 CSS原创 2021-06-02 10:30:29 · 906 阅读 · 0 评论 -
学习 ::before、::after 和 常用方式
::before 和 ::after 是什么它们是 css 中的 伪元素,作用就是在一个页面中添加一个元素,但是这个元素不会出现在DOM树中。::before 和 ::after 向被选中元素内的首部(尾部)添加元素。添加的内容是根据其特有的属性 content 来确认的。插入的内容默认是行内元素。因为添加的内容不会出现在DOM树,不会改变文档内容,只在css渲染时加入,所以不要给伪元素添加具有实际意义的内容。content属性使用 ::before 和 ::after 时 content属性原创 2021-06-02 10:29:10 · 1079 阅读 · 0 评论