css创意特效

效果（完整代码在底部）： 实现并不难，都是重复的代码比较多。 实现（可跟着一步一步写）： 1. 先定义基本标签： 2. 定义左右眼的基本css样式： border-bottom: 5px solid

这是我参与更文挑战的第26天 效果： 前言： 这个效果几行 css 代码就能搞定，但是其有个缺点是图顺序是从上到下排列再从左到右。没能实现从左到右再从上到下顺序排列。这样不利于最新图片优先显示的原则。

这是我参与更文挑战的第23天 话不多，先看效果： 这样，有抖动的： 无抖动的： 实现： 1.先定义一个底层盒子： 2.基本样式，长宽背景图等等~ cursor: pointer;鼠标经过盒子样式为小手

这是我参与更文挑战的第22天 效果： 大家好，今天分享一个百叶窗css效果，其实实现很简单，打开vscode，一起冲冲冲~ 实现： 1.定义父盒子，放入5张图片： 2.给父亲元素宽，高： cursor

这是我参与更文挑战的第21天 效果： 有些细节没处理好 (“▔□▔) 实现： 定义标签，shu是书本，feng是封面，wen是文字内容。 定义书本的基本属性，宽高，阴影等，伪类是下面和右面那两条阴影。

这是我参与更文挑战的第20天 先不说啥，上效果： 前提： 这个特效要用到一个clip-path属性，可以创建一个只有元素的部分区域可以显示的剪切区域。但是，这属性 兼容性不太好 ，还没有得到所有主流浏

这是我参与更文挑战的第19天 先看效果： clip-path描好效果会更好~ 原理： 就是两段文本重叠一起，底层的没颜色，上面层的有颜色，然后通过动画再通过clip-path属性截取上层的部分显示~

这是我参与更文挑战的第11天 话不多，先上效果： 简介： 用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。 具体步骤： 1.先定义一个盒子当做按钮，如我就用a标签： 2.先给a标签写

这是我参与更文挑战的第9天 效果： 实现： 1. 首先讲css的var()函数 * ； 定义： 随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass

这是我参与更文挑战的第7天 先看效果： 更长看视频 实现： 添加标签底层盒子，再直接暴力添加10个气泡标签： 添加底层盒子样式，宽高等： position: fixed; 相对于浏览器窗口进行定位。

这是我参与更文挑战的第5天 效果： 实现： 定义标签, .result是显示计算结果框，.anniu里放数字和运算符按钮，.zero是清除按钮，它们都在表单域 form里： 可以看到，每个按钮都绑定了

这是我参与更文挑战的第4天 先看效果： 前言： 这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。 实现： 1. 首先定义一个

这是我参与更文挑战的第2天 话不多，看效果先： 卡片悬停，响应式卡片，简约效果。 实现： 1. 定义标签，.kapian为最底层盒子，然后两个子盒子一个放图片，一个放文本： 2.先定义底层盒子的css

这是我参与更文挑战的第1天 先看效果： 前言： 这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css） 实现： 定义标签，有三个水滴盒子，一个圆圈盒子显示数字，一个最

效果（源码在最后）： 这个效果跟水波加载动画 html+css是异曲同工之妙的。效果不难实现，但是这个‘偷天换日’的用法是值得学习的。 实现： 1. 定义标签，.container是底层盒子也就是电池

话不多，先看效果：  回归老本行，继续分享简单有趣的CSS创意特效，放松放松心情~ 实现过程（完整源码在最后）： 1 老样子，定义基本样式： font-family: 'fangsong'; 仿宋字体

先看效果： 原理： 这个效果在网上挺常见的，所以我也写篇文章记录记录。 原理是比较简单的，大致上就是有一个背景色为蓝色的圆形；然后圆形上面有一个或两个有弧度的白色方形盒子在旋转，通过白色遮住蓝色形成像