闲言碎语不多讲，咱们说说css3的transform属性：先上效果：效果说明：当鼠标移到a标签的时候，从右上角滑出二维码。实现方法：HTML 代码如下：需要说明的一点是，a链接的跳转需要用javascript拦截，就这一句。2、需要注意的几个点：二维码是HTML上没有，需要用css的伪类和css背景实现。隐藏使用css属性：透明度为0和scale为0；当鼠标 …
css背景色透明度
垂直条纹水平条纹是最容易用代码写出来的，但用户在网页上看到的条纹图案很多都不是水平的。有些条纹是垂直的（如图1-1），而且某些形态的斜条纹或许更受欢迎，看起来更有趣。幸运的是，CSS 渐变同样也能帮助我们创建出这些效果，只是难度稍有不同。垂直条纹的代码跟水平条纹几乎一样的，主要区别在于：我们需要在开头加上一个额外的参数来指定渐变的方向。在水平条纹的代码中，我 …
今天小胖在coding的时候，遇到一个问题，就是要使用一个动态的文本作为div的背景，想着使用绝对定位堆叠来实现，或者伪元素实现，终归不够优雅，直到看到张鑫旭大佬的这篇文章，只能说，很当优雅！在实际开发中，有时候希望文字内容可以作为背景图片显示，一方面是希望利用背景图片的优势，例如可以平铺，另外一方面是常见的替换元素不能使用伪元素创建文字，此时只能寄希望与背 …
今天的这篇是以一个app改版案例，深入浅出的告诉大家如何适配深色模式，同时给出了正确和错误的示范，相信对于目前流行的深色设计趋势来说，是非常的实用了！Google在2019年度IO开发者大会上宣布，安卓将会从系统底层支持深色模式。同时，我们也会看到更多支持深色UI的应用正在推出。深色UI很快将成为一种常见的模式，其他应用也很快会遵循这一模式。在这篇文章中，我 …
介绍一个比较常见的动画效果。在日常开发中，为了强调凸显某些文本或者元素，会加一些扫光动效，起到吸引眼球的效果，比如文本的或者是一个卡片容器，里面可能是图片或者文本或者任意元素除此之外，还有那种不规则的图片，比如一张奖品图片，只会在图片本身出现扫光，透明度地方则不会这些是如何实现的呢？一起看看吧一、CSS 扫光的原理CSS扫光动画的原理很简单，就是一个普通的、 …
渐变色--线性渐变人类对美的追求是无止境的，色彩的搭配是对美的最基本要求，而其中的渐变，就能给人一种舒缓的感觉，它不那么的突兀，给人一种不逼迫、缓缓地和高逼格感觉。Css3引入了渐变的功能，有线性渐变和径向渐变两种，今天介绍线性渐变。要注意的是，这里的渐变并不是颜色，而是一种特殊的图像。所以只会在background-image里起作用。语法设置渐变色bac …
#头条创作挑战赛#颜色对于 css 来说是非常重要的，网站之所以会呈现出五彩斑斓的样式，就是这些颜色样式起的作用。在 css 中，对于颜色样式有很多种表达方式，今天我们就来盘点下 css 中颜色的格式。名字颜色在 css 中，默认定义了很多名字颜色，比较常见的比如 yellow，blue，red，pink 等，实际上，css 中一共定义了 140 个颜色名字 …
本文翻译自 Color Formats in CSS，作者：Joshwcomeau。 略有删改CSS 中的颜色格式可以采用不同的表示方式，包括常用的十六进制、RGB、RGBA、HSL 和 HSLA 等格式。十六进制是最常用的格式，使用 6 个十六进制数字来表示颜色，例如 #FF0000 表示红色；RGB 格式使用红、绿、蓝三个颜色通道的数值来表示颜色，例如 …
例：background: rgba(255,255,255,0.2);兼容ie8filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);#后面的8个数字被拆分为两个部分 33 ffffff他们对应 AA(IEfilter …
透明度在网页是一个很重要的属性，非常多的特效都需要控制透明度来完成。控制透明度一共有两种方法。元素透明度opacity属性指定了一个元素的透明度，这个透明度不仅会影响本元素，也会影响里面的子元素的透明度。opacity:数值;opacity属性取值范围为0.0~1.0，0.0表示完全透明，1.0表示完全不透明（默认值）。opacity属性取值不可以为负数。要 …