• CSS动画:animation、transition、transform、translate傻傻分不清

    在平时开发过程中,由于都是自己捣鼓玩的项目,并没有UI设计给我的设计图,更没有什么特效要求,导致对css动画一直都不是很熟悉,但是作为即将进入实习单位的萌新程序员,要时刻准备着设计师要求的各种动画,于是有了这一篇文章。

    CSS3 2018-06-05 156 0 0
  • CSS实现宽高等比例自适应矩形

    今天遇到一个很有趣的问题:如何实现一个宽度自适应,高度为宽度的一半的矩形。经过搜索引擎的筛选和自己的反复试验,发现使用padding-bottom是最完美的解决方案。

    2018-05-25 2.88K 0 0
  • 你对CSS权重真的足够了解吗?

    css权重很多人都听过,也了解一些,但是很多人对具体的规则或者说再深如一些关于css权重的问题,可能会不那么清楚。日常开发中,或多或少都会遇到css规则不生效的问题,为了让我们能够减少调试css规则的时间,深刻理解css权重,就十分关键了。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。

    CSS3 2018-05-23 22 0 0
  • 用CSS画小猪佩奇,你就是下一个社会人!

    小猪佩奇已经火了好一阵了,其实一开始我是不屑的。纵观小朋友的历届动画,无论喜洋洋、熊出没还是小兔兵兵、小熊维尼,火过一阵便迅速陨落,回想起来也没多少沉淀的东西。所以一开始让我看小猪佩奇的时候我是拒绝的,因为你不能让我看,我就马上去看,第一我要试一下。深入了解之后发现,卧槽,世间竟有如此出尘绝艳的动画片!正如某个浙江人说过:你不喜欢小猪佩奇那是因为你不了解。

    2018-05-18 3.04K 0 0
  • CSS Grid重构Medium的文章布局

    当人们想起CSS Grid的时候,想到的通常是图片网格布局和全屏页面。然而,CSS Grid事实上也是一项很适用于文章布局的技术,它可以做一些以前很难完成的事情

    2018-05-04 1.35K 0 0
  • 利用CSS变量实现令人震惊的悬浮效果

    最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

    2018-05-01 64 0 0
  • 利用CSS变量实现令人震惊的悬浮效果

    最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

    2018-04-29 2.51K 0 0
  • CSS如何实现内凹角效果

    文章开头抛出了怎么实现内凹角的一个效果。首先从CSS的box-shadow着手,使用CSS的box-shadow可以轻易的实现内凹角的效果,但这个方案有一定的局限性,比如要多个内凹角时,需要通过增加元素标签来实现,特别是在面对渐变,或者有背景图像和半透明的情景之下,这个方案基本上无法来满足我们的需求。

    2018-04-22 2.39K 0 0
  • EM 还是 REM?这是一个问题!

    应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小。这就使得组件在不同设备上都达到最佳的显示效果成为可能。

    2018-04-21 752 0 0
  • 妙用 scale 与 transfrom-origin,精准控制动画方向

    上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。

    2018-04-20 1.02K 0 0
  • 不可思议的纯CSS导航栏下划线跟随效果

    这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

    2018-03-29 1.04K 0 0
  • 热爱 JavaScript,但是讨厌 CSS ?

    首先,我要明确一个事:如果你热爱前端中的其他所有事,除了 CSS,那么你并不是另类。我在现实 工作 中认识一些专业级别的 UI 开发者,他们要么在样式处理方面很糟糕,要么 能解决样式问题 但是讨厌这个过程并且想方设法尽快把这一环节熬过去。

    2018-03-28 758 0 2