CSS 伪元素

30种CSS3动画特效按钮

不论是设计还前端开发，设计和制作个特效按钮，对于他们来说，是习以为常的事情，下面是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3transition和transform属性来制作按钮边框，文本动画以及流光动画效果，各种效果都非常有创意。演示地址：ht...

科技爱好者周刊:第 85 期

这里记录每周值得分享的科技内容，周五发布。本杂志开源（GitHub:ruanyf/weekly[1]），欢迎提交issue，投稿或推荐你的项目。由于微信不允许外部链接，你需要点击页尾左下角的“阅读原文”，才能访问文中的链接。封面图：彩色公寓楼，土耳其伊斯坦布尔，英国《卫报》[2]。刊首语最近，我...

令程序员惊叹的一些CSS3效果库

还在寻找那些CSS3的效果库吗？如果你的答案是肯定的，并且目前没有找到，那么你一定不能错过小编为大家收集的这些CSS3效果库，这是一个令你兴奋的集合！最新的CSS3都配备了新的特性，来设计创建动画和互动的网页。在本文中，可以找到一些非常优秀的CSS3效果库，来让你的Web设计看起来更加引人注目。还在...

伪元素黑魔法:一个替代onerror解决图片加载失败的方案

问题的引出是这样的，在一个项目中有大量的页面主体是table做数据展示，所以就封装了一个table的组件，提供动态渲染的方案。有个问题是数据类型中有图片，对于图片的加载失败我们需要做容错。一般我们的思路都是对img绑定error事件，替换该图片为一个默认的图片。但是error事件是不会冒泡的，我们渲...

如何使用CSS实现旋转地球动画效果

旋转地球功能实现主要借助于CSS动画效果完成，通过移动地图背景图层，云彩图层等，在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示：设计思路与核心技术旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现...

想成为前端高手，先把 CSS 学明白了再说

成为前端高手很容易吗？有人说，要成为前端高手很容易，就是先学好HTML/CSS/JavaScript基础三剑客。然后再学会使用前端框架的三座大山——Vue/React/Angular，快则三月，慢也就半年，前端的活就没有搞不定的了。会用框架就算是一名优秀的前端开发吗？这是一个认知误区，前端程序员...

妙用CSS变量，让你的CSS变得更心动

前言CSS变量又叫CSS自定义属性，为什么会突然提起这个很少人用到的东西呢？因为最近在重构个人官网，不知道为什么突然喜欢用上CSS变量，可能其自身隐藏的魅力，让笔者对它刮目相看。谈到为什么会在CSS中使用变量，下面举个例子，估计大家一看就会明白。/*不使用CSS变量*/.title{...

每天一个CSS小技巧 - 不规则投影

当我们想给一个矩形或者其他能用border-radius生成的形状加投影时，box-shadow的表现都很棒的。但是，当元素添加可一些伪元素或半透明的装饰之后，border-radius会无视这些。这是原本的图形：Titlediv{position:...

现代CSS:纯 CSS 实现路径动画

在日常开发中，Loading动画及加载进度应该是使用最广泛的。实现它们的方案很多，包括Gif图、CSS动画、APNG、Lottie等。本文将介绍一种使用CSS自定义属性@property、conic-gradient()、offset-path以及表情符号实现的路径动画。1.核心知识点介绍...

CSS十问——好奇心+刨根问底=CSSer

最近有时间，想把酝酿的几篇博客都写出来，今天前端小学生带着10个问题，跟大家分享一下学习CSS的一些体会，我觉得想学好CSS，必须保持一颗好奇心和刨根问底的劲头，而不是复制粘贴，得过且过。本人能力有限，这篇文章从构思加完成用了四五天，如果你和我一样是前端小白，不妨仔细斟酌体会，以期领悟到一些东西...