![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 90
FEWY
这个作者很懒,什么都没留下…
展开
-
:before 和 :after的多用途实践 — 提升篇
说明之前我们已经聊过,关于伪元素 :before 和 :after的一些基础知识了,但是并没有感觉到他的神奇之处,这次,我们继续来说,看看他有点什么用,基础知识不太明白的可以看这里 :before 和 :after的多用途实践 — 基础篇 http://blog.csdn.net/fe_dev/article/details/71775624 应用清除浮动(clearfix)这里说一种用伪元素原创 2017-05-16 11:01:06 · 1035 阅读 · 1 评论 -
CSS中用 opacity、visibility、display 属性将 元素隐藏 的 对比分析
说明opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见,但是他们在方方面面都还是有区别的。是否占据页面空间例子<!doctype html&a原创 2018-05-27 21:41:30 · 4297 阅读 · 1 评论 -
简单说 CSS中的mask—好好利用mask-image
说明CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现,部分或完全隐藏某个元素的可见性。 好吧,这个概念可能有点不好理解,先看图。 看了这个等式,似乎明白点什么了吧,朋友们,第一张图就是一张普通的图,第二张图,黑色部分是不透明的,白色部分是透明的,用上mask之后,两张图重叠,黑色区域中的会显示出来,白色区域不显示。 用过ps的朋友,应该很清楚,蒙版这东西,这就和蒙版很像,好吧原创 2017-07-01 23:46:46 · 20231 阅读 · 4 评论 -
简单说 通过CSS的滤镜 实现 火焰效果
说明上次我们了解了一些css滤镜的基础知识, 简单说 CSS滤镜 filter属性 这次我们就来用css的滤镜实现一个 火焰的效果。 解释 要实现上面的火焰效果,我们先来了解一些必要的东西。 上次我们说过两个滤镜,blur 和 contrast。 blur 是给图像设置高斯模糊, contrast 是调整图像的对比度, 他们一起使用会产生融合的效果。 效果图 图中 红色原创 2017-10-27 14:51:04 · 67938 阅读 · 1 评论 -
简单说 CSS滤镜 filter属性
说明滤镜主要是用来实现图像的各种特殊效果,css的滤镜是很神奇的。解释css的滤镜,也就是filter属性,主要有下面这几个属性值 blur(模糊) brightness(亮度) 注意:值是100%,图像无变化。超过100%,变亮,小于100%,变暗。 contrast(对比度) 与brightness 一样 contrast 100%,图片无变化。 drop-shad原创 2017-10-22 09:45:07 · 69460 阅读 · 0 评论 -
简单说 CSS的vertical-align
说明vertical-align属性,是CSS属性中一个比较重要的属性,也是比较不好理解的一个。 我们今天就来说说它。 解释先来看看他的定义。 定义和用法 vertical-align 属性设置元素的垂直对齐方式。 说明 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在...原创 2017-08-02 20:43:39 · 21017 阅读 · 3 评论 -
简单说 用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用好CSS的transform,这是非常重要的,好的,我们先拼出一个魔方的样子。 效果图 代码(代码比较长,朋友们可以直接粘贴复制到电脑看效果)<!DOCTYPE html><html>原创 2017-07-15 04:47:41 · 38255 阅读 · 16 评论 -
简单说 通过CSS实现 文字渐变色 的两种方式
说明这次的重点就在于两个属性, background 属性 mask 属性 这两个属性分别是两种实现方式的关键。 解释方式一效果图 代码 <!DOCTYPE html><html><head> <meta charset="utf-8"> <style> span { background: linear-gradient原创 2017-11-05 17:48:09 · 72022 阅读 · 6 评论 -
简单说 CSS中的 object-fit 与 object-position
说明问题: 一个div宽度不固定,高度固定,采用Flex布局,它里面有两个元素一个img宽度占40%,高度占100%,一个p元素,宽度占60%,高度占100%,调整浏览器窗口大小,要保证,img元素不变形,宽高比不变,怎么办! 从图中可以看出,随着调整浏览器窗口,图片的宽高比也被破坏了,我们该怎么办呢?我想大家应该会想到用 background,用一个div的background来替代im原创 2017-10-16 14:04:08 · 66512 阅读 · 1 评论 -
简单说 CSS变量
说明变量,我想大家一定知道是什么?在CSS中也是有变量的,我们今天就来说说。 解释1、声明CSS变量语法: –变量名 例如: body{ --bg:red;}2、使用CSS变量语法: var( 变量名[, 默认值 ]) 例如: body{ --bg:red; background:var(--bg);} 效果图: body{ /*变原创 2017-09-06 17:36:17 · 529 阅读 · 0 评论 -
:before 和 :after的多用途实践 — 基础篇
说明CSS 伪元素用于向某些选择器设置特殊效果 在CSS中,伪元素,是一个很有趣的东西,而:before和 :after,这两个伪元素是我在开发中用到的比较多的,也是在许多系统和库中见到的比较多的,这篇博客先来讲讲这两个伪元素的基础知识! 解释:before :before 选择器向选定的元素 前 插入内容。 使用content 属性来指定要插入的内容。 代码<!doctype html>原创 2017-05-13 09:54:31 · 1124 阅读 · 1 评论 -
:before 和 :after的多用途实践 — 特效篇(1)
说明之前的两篇文章 :before 和 :after的多用途实践 — 基础篇 http://blog.csdn.net/fe_dev/article/details/71775624 :before 和 :after的多用途实践 — 提升篇 http://blog.csdn.net/fe_dev/article/details/72236681 讲了一些,:before和:after的知识原创 2017-05-19 15:34:04 · 773 阅读 · 0 评论 -
:before 和 :after的多用途实践 — 特效篇(2)
说明上一篇,我们实现了遮罩层的特效,这次,我们看看如何能生成一道光,当鼠标移入时,能有种闪光的效果。 白光特效效果图 这张图好像有点太漂亮了,没法看清白光的样子,看看下面这个,应该能看清楚。 好了这个应该是相当清楚了,我们看下代码。 代码 <!doctype html><html lang="en"> <head> <meta charset=&原创 2017-05-20 10:48:47 · 660 阅读 · 0 评论 -
关于opacity、visibility、display属性的一道CSS面试题
说明问题: 一个下拉菜单,结构如下,&amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;ul&amp;amp;amp;gt; &amp;amp;amp;lt;li&amp;amp;amp;gt;菜单一&amp;amp;amp;lt;/li&amp;amp;amp;gt; &原创 2017-05-22 18:14:02 · 1426 阅读 · 0 评论 -
:before 和 :after的多用途实践 — 特效篇(3)
说明按钮动画特效总结原创 2017-05-26 12:36:35 · 768 阅读 · 1 评论 -
详解 清除浮动 的多种方式(clearfix)
说明本文适合知道HTML 与 CSS基础知识的读者,或者想要了解清除浮动背后原理的读者!1.什么是浮动首先我们需要知道定位 元素在页面中的位置就是定位,解决问题之前我们先来了解下几种定位方式 1、普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如原创 2017-04-02 22:16:33 · 70260 阅读 · 7 评论 -
CSS 绘制各种形状
说明使用 CSS 可以绘制出许多形状,比如三角形、梯形、圆形、椭圆,等 并不只是可以绘制矩形。下面来看看怎么实现这些形状的吧。为了容易理解,文章分为基本形状 和 组合形状来说,基本形状是比较容易实现的,而利用这些基本形状进行组合,就可以实现稍微复杂点的组合形状了。基本形状三角形.triangle { width: 0; height: 0; border: 50p...原创 2019-06-19 17:45:17 · 505 阅读 · 0 评论