HTML/CSS

2019-05-19cc阅读(37964)赞(218)

css动画大家都不陌生，但是你知道css动画是可暂停的吗？如果你不知道就来看看吧。 虽然用过很多次animation，但是也就前几天才知道动画是可以暂停的，可见自己对动画的了解还是不够深，一起来学习一下今天的主角—animati...

2019-05-02cc阅读(27241)赞(74)

will-change通过告知浏览器该元素会有哪些变化，使浏览器提前做好优化准备，增强页面渲染性能。 属性的取值： 1、auto:  实行标准浏览器优化。 2、scroll-position:  表示开发者希望在不久后改变滚动条的位置或者使...

2019-04-15cc阅读(27714)赞(95)

一、实现原理 clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，也可以是一个形状如circle()。 二、所需数据 1、剪切区...

2018-12-09cc阅读(119948)赞(225)

说起text-align，大家一定都不觉得陌生，我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐，当然我们也使用justify来实现文本两端对齐。 如上图，两端对齐相对于左对齐，视觉上显得整齐有序。但j...

2018-11-21cc阅读(23198)赞(115)

大多数时候，我们看到的广告都是固定在页面的某个位置，如下图的首页，一看就知道是硬广啦。     看到标题是不是很疑惑，什么样的广告，想再来一打？不废话，先来看看效果吧。 See the Pen 视觉差 by cc (@g...

2018-11-15cc阅读(18240)赞(37)

上一篇主要介绍了通过函数方法创建矩形、圆等基本图形，今天主要了解盒模型、图片计算出来的形状。 1、盒模型（包括 border-radius 的弧度） See the Pen shape-outside by cc (@glccgl) on ...

2018-11-13cc阅读(16055)赞(40)

先来看以下效果：右侧文本环圆环排版。 在未了解css shapes之前，实现这样的排版还是挺费事的，比如为每行设置不同的padding值。但是有了css shapes之后，两行css就搞定啦，一起来看看吧。   See the P...

2018-11-01cc阅读(18614)赞(35)

早前做页面时遇到为降低赞助商板块的注意力，将logo置灰显示的处理，虽觉得寡淡，但因为还有其他的工作要做也就没有想过其他的效果，最近看vue文档（汗，其实是之前没注意），发现首页赞助商logo初始置灰鼠标悬停时高亮效果挺赞的，点此查看效，所...

2018-03-30cc阅读(26365)赞(254)

    前段时间写鼠标悬停元素上移效果时，当鼠标恰好放在元素边缘时，chrome出现一直上下移动的问题，其他浏览器表现正常。原因尚不知，可能是实现方式不对吧（PS：使用top实现），虽然不知道原因，但...

2018-03-26cc阅读(63607)赞(322)

    距HTML5标准规范制定完成并公开发布已经有好些年了，面试时也少不了要问对HTML5语义化得理解。但是在实际运用时，真正使用HTML5标签来开发的似乎不是很多（ps：查看了几个巨头公司网站推论），可能一部分原因是仍有部分用户使用在使...