CSS秘密花园 相关的文章

  • CSS秘密花园: 沿着路径的动画

    几年前,当CSS动画刚出来的时候是多么的令人兴奋,那时Chris Coyier问我,有没有什么方式使用CSS让元素绕一个圆形的路径运动。当时,它只是一个有趣的想法,但我在无意中发现有很多这方面的用例。例如,Google+添加新成员就使用了这样一个动画。如下图所示:

    2018-01-11 434 0 0
  • CSS秘密花园: 动画状态

    动画并不总是页面加载的时候就开始。往往,我们都想通过用户的操作来触发动画,比如鼠标的悬浮(:hover)或者鼠标按下时(:active)。在这种情况之下,我们可能没办法控制动画播放的实妹次数,用户可能会迫使动画停止。例如,用户有通过悬浮(:hover)触发动画:鼠标移出元素之前动画结束。在这样的例子中会发生什么呢?

    2018-01-10 1016 0 0
  • CSS秘密花园: 文本动画

    有时候我们想要模拟文本输入的动画效果,就是文本一个一个的出现。这种动画效果特别在科技网站上流行。使用的正确,让你的网站效果直接提到另一个档次上。要实现这样的效果都需要复杂的JavaScript脚本。尽管这只是纯粹的演示,使用CSS实现这样的效果那简直就是白日做梦。怎么可能呢?

    2018-01-09 766 0 0
  • CSS秘密花园: 闪烁动画

    您还记得标签吗?当然,你可能做过这样的事情。它在我们行业已成为一个历史,也成为一种方化的符号。但全世界的人都鄙视他,因为它违反了样式和结构的分离原则,但最主要的是原因是国灰在90年代末网页是过度的使用它,使用大家感到很痛苦(那时候的网页都有大量的制作的闪烁效果,闪得让你头晕)。甚至发明这个标签的人Montulli也给示:”发明标签是为互联网做过最糟糕的一件事情”。

    2018-01-08 694 0 0
  • CSS秘密花园: 灵活的过渡

    灵活的过渡和动画效果(如bounce的过渡效果)一直是一个流行的效果,给人有一个更好的感觉——在现实生活中,物体从A位置移动到B位置,很少是不灵活的移动。

    2018-01-07 468 0 0
  • CSS秘密花园: Sticky footers

    在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。

    2018-01-06 759 0 0
  • CSS秘密花园: 垂直居中

    让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:center;;如果是一个块元素,我们可以使用margin:auto;。然而,只要一想到让一个元素垂直居中,让人死的心都有了。

    2018-01-05 657 0 0
  • CSS秘密花园: 流体背景,固定内容

    在过去的几年中,有种网页设计趋热是越来越受欢迎:这就是我所说的“自适应的背景,固定宽度的内容”。这种模型常用于以下几种场景中:1、多个内容部分

    ,每个内容都占据整个视窗宽度而且都有不同的背景。2、宽度的内容,即使宽度会根据不同的媒体查询修改。在某些情况之下,不同的区域

    会有不同的内容宽度

    2018-01-04 687 0 0
  • CSS秘密花园: 相邻元素样式

    在很多情况下,我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。下面是一些使用场景:邮件列表或类似基于文的列表展示。如果我们只有为数不多的列表项,我们可以单独展示。随着列表项的增加,我们可以减少列表的预览项。当列表的高度大于视窗高时,我们可能会选择隐藏一些列表项,或者在尾添加一个查看更多的按钮,让用户在不滚动滚动条也能浏览列表。

    2018-01-03 760 0 0
  • CSS秘密花园: 驾驭列表宽度

    虽然我们很久以前就停止使用表格来布局,但在网页中还是占有一席之地,比如表格数据统计、电子邮件,列表清单等等。同时,我们使用display属性,可以让元素渲染的形式和表格相似。然而,有时候看起来很方便,但有很多内容是动态的,这让布局非常难以预测。由于有这样的事实存在,列表的宽度是根据内容或者明确指定width的值,如下图所示:

    2018-01-02 718 0 0