邓占勇的博客

动画在前端开发中是经常遇到的场景之一，加入动画后页面可以极大的提升用户体验。

如果让你实现下面的这种动画效果你会怎么做？​ 可能很多人第一想法就是使用绝对定位进行布局，当顺序发生变化后，计算出变化后的位置，然后通过动画过渡到指定位置。这是一种很常见的实现方式，但存在几个问题：需要维护每个节点的位置信息顺序变化后，需要计算每个DOM的目标位置使用绝对定位的方式，每行显示的小方块个数是固定的，不能自适应容器的变化。过程分析无论多么复杂的动画，都可以拆解成多个动画的组合。对于上面的效果，就可以看成是每个小方块的变化，这里只涉及到了位置的变化，当然还可能存在大小、颜色等变

在开发中图标跟我们是形影不离的，在开始之前先聊一些题外话，图标有什么作用？通用图标可以代替文字说明，能更简洁地表达某个设计的意图，让用户看到图标就知道它代表什么？有什么用途？LOGO类图标可以起到品牌宣传，同时因图标更醒目，占据更大的位置，用户更容易点击。看图片更符合人的视觉需求，简洁的图片能降低人的信息焦虑。试想我们如果看到一个满满的文字的页面，是不是常常有信息恐惧，可能就会选择退出。但是大多数情况下只有图标是不行的，还需要配上文字说明，如果用户看到一个图标，花很多时间都不能理解它

身为一个前端开发者，背景是开发中的常客。大到整个网站的主题背景，小到一个按钮的背景。CSS 的 background 属性基本上每天开发都会遇到，绝大多数情况下我们都只会使用到了纯色背景或者图片背景。如果你想让你开发的内容看起来更加生动有趣，通过本文让你用纯CSS也可以开发出炫酷的背景。开始之前在开始之前，先请你回答下面的问题，如果你能全部回答正确，说明你对 background 属性掌握的还不错哦！1.径向渐变默认形状是什么？A：原型 B：椭圆形2. background 属性的值为多个时

什么是故障艺术顾名思义，Glitch art 就是“故障艺术”。这个词的意思就是“失灵；短时脉冲波干扰”，可以理解成一种自动或人为的bug。但是Glitch art不一定是只限制于数码环境中的，在analog art里出现的机械、或人为干扰产生的故障都可以被归为“故障艺术”；但重要的一点是，这不止是一种故障的呈现和表现，还应该是一种基于“故障”的审美创作，所以Glitch art也可以是看做是“美化故障”，或者通过“故障”完成审美活动的创作手段。身边的故障艺术–抖音LOGO抖音的logo就是一种

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。它有以下属性值：normal：正常multiply：正片叠底screen：滤色overlay：叠加darken：变暗lighten：变亮color-dodge：颜色减淡color-burn：颜色加深hard-light：强光soft-light：柔光difference：差值exclusion：排除hue：色相saturation：饱和度color：颜色luminos

​有一道高频的面试题经常会出现，请你讲一下em和rem的区别。1. em与rem的区别这个题目其实很简单，基本上都能说出来，他们的本质区别就是参照的对象不同。 em是相对父元素的字体大小，如果父元素的字体大小是14px，那么它子元素的2em就是28px，不同父元素的子元素的2em的实际大小是可能不同的。 rem是相对于根元素，即html元素，如果html的字体大小是1...

个人网站：www.dzyong.top微信公众号：《前端筱园》本期讲解两个系列的加载效果，先看效果这两种效果在网站中都会经常遇到，我会分别以一个例子来进行详细的剖析。CSS加载动画万变不离其宗，那就是animation，可以把它看做AE中的导轨，我们只需要在合适的点位让它展现本应该展现的状态即可。本期的加载动画与上期的有所不同，本期要用到animation的延迟时间...

个人网站：www.dzyong.top微信公众号： 《前端筱园》先看一下本期CSS动画效果这个动画是如何用CSS做出来的呢，有两个重点动画内容的形状如何用CSS呈现出来 如何实现非线性旋转下面我们一步一步的对这个动画进行剖析目录搭建HTML架构CSS穿上新装搭建HTML架构通过效果可以看出包含一大一小两个元素，那么这里只需要使用一个div包含两个字d...

我一直都是一个很喜欢很炫的东西，但是目前还比较缺乏设计思维，只能到处去学习寻找灵感。今天我为大家带来了75个超炫的CSS加载动画，后面我会对其中的一些效果进行深入的讲解。1.5款生动的加载动画演示地址：http://www.dzyong.top/resources/loading/loading12.彩色波纹进度条演示地址：http://www.dzyong.top/res...

CSS中也有函数，我们也会经常用到，今天我就来罗列一下CSS中所有的函数先从CSS2说起在CSS2中有两个函数，这两个函数有一个使我们经常用到的rgb()rgb() 使用红(R)、绿(G)、蓝(B)三个颜色的叠加来生成各式各样的颜色。 attr()attr() 返回选择元素的属性值。 它有一个必须值，这个值必须是HTML元素的属性名，我们来看个例子...

由于内容较多，直接预览看不清，可将图片下载到本地后查看。本图片为个人总结，如需转载请标明出处。欢迎访问本人个人网站：https://www.dzyong.com（V1.0版本） http://39.108.168.243(V2.0版本临时网址)...

单词sticky的中文意思是“粘性的”，当然他的特性也很符合他的名字。我们一般常用的position属性无非就是relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。relative：生成相对定位的元素，相对于其正常位置进行定位。 absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 fixed：生成绝对定位的元素，相对...

在网页用我们经常需要用到爱心❤，比如说给文章点赞，或者给你喜欢的人比心心~~。在网页中显示一个爱心，有3中方式：    1.图片： 使用图片的方式有两个缺点，一是要请求资源并且图片放大后如果像素不够会显示的很模糊，第二点不可以任意改变颜色，当需要使用多种不同颜色的爱心的，需要不用的图片。    2.Canvas：Canvas可以绘制出个性的形状，但是实现起来相当的繁琐，每一个形状都需要...

一、CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(ani...

使用Flex设置父盒子：display:flex;content:center;align-item:center;display:flex;content:center;align-item:center;使用CSS3 transform设置父盒子：display:relative;设置要居中的DIV：transform: translate( -50%, -50...

HTML部分要为header部分设置一个模糊的背景图片作为背景，HTML部分如下，把内容部分与背景部分都作为header的一级子元素<div class="header"> <div class="text"> 这里写要显示的内容 </div> <div class="background"&g