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