Flex 布局,可以实现各种页面布局。目前,它已经得到了所有浏览器的支持。Webkit 内核的浏览器,必须加上-webkit前缀。Flex 是 Flexible Box 的缩写,意为”弹性布局”。…
标签:css3
css自定义属性和聚光灯效果
出场曲 神秘巨星来了吗?快,打追光,快,快给她镜头。 ——《神秘巨星》 神秘巨星是谁?它就是CSS Variables。 简介 CSS Variables,一个并不是那么新的东西,但对css来说绝…
css实战#用css画一个中国结
大家好!今天跟大家分享一个用 css 画中国结的教程。最终效果如下: 大家如果感兴趣可以参考我的源码:gitHub地址 首先,我们定义好画中国结需要的结构: <div class="knot"> <sp…
vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。 循环列表,html: <template> <div class="newslist"> <ul&…
花样形状 -- CSS
只使用一个html元素绘制图形,部分图形需要浏览器支持 正方形 Square #square { width: 100px; height: 100px; background: dodgerblue; } 长方形 Re…
画三角形
在商品展示中,画三角形的出现的也挺多的,左上角的三角标签,又或者对话形式的三角形,带阴影效果等,在此记录下 1、直接添加三角形 <div class="triangleContainer"> <div …
培训机构让Github的含金量降低了?
所有人都想成功,都想有高薪的工作,但是太多的人想一步登天,只有少数人愿意脚踏实地。 1.前言 这篇文章完全是有感而发,看了掘金的沸点了,又看到了知乎的一篇文章,就打算写下,说下自己的个人看法。 Github ,在程序员这…
视口相关单位的应用 —— 别说你懂CSS相对单位
前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完…
css3 动画(三)animation 简介
前言 上一篇中,总结了一下 transition 以及 cubic-bezier()。本篇中,将介绍 css3 动画中的更为灵活的动画属性:animation。 animation css3 中的 animation 属…
CSS世界(文档)
整理完了《高性能JavaScript》这本书,往下就需要快速处理《CSS世界》,这本讲解CSS特性的书非常值得一读,内容完整,重点突出,实战性强,就是语言啰嗦。由于全书内容太多,而且需要一点一点的整理,所以放到了站点上,…
前端每日实战 2018 年 6 月份项目汇总(共 27 个项目)
过往项目 2018 年 5 月份项目汇总(共 30 个项目) 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 6 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的…
CSS3渐变效果工具
推荐一个css3渐变效果工具,觉得有帮助的可以收藏下。 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变(gradients): 线性渐变(L…