CSS3

分享CSS3新技术,CSS3动画,CSS3特效,CSS3代码和CSS3相关资源

自从CSS3有了Flex,从此布局是浮云,本文全面的讲解了Flex布局的属性,帮助你快速入门Flex布局,一起来看看这篇Flex布局入门教程。

30 seconds of css是跟30 seconds of code 类似的项目,翻译中文版已经很久了,今天列举几个自己觉得比较有用的片段,使用CSS3实现某些前端效果,还是挺炫酷的。

隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。

CSS3 transform里面有一个属性transform-origin,该属性可以改变元素的原点位置,之前的一篇文章:CSS揭秘之沿着环形路径运动的动画,正是巧妙的运用了原点位置,从而实现了围绕圆心运动。transform-origin里面的百分比没有详细了解是以什么为标准的。今天看看这篇文章详细了介绍了这个值跟left、right、top、bottom之间的关系。

使用flexbox,很多布局问题都可以解决,今天分享一个所有子元素居中对齐的样式。

涉及到居中的样式CSS主要是align-items:center;

需求是需要中间的某个块不要占全部,而是自适应子元素内容扩展。

本文分享几种通用的前端开发中图片垂直水平居中对齐的做法,大部分适用在高级浏览器,可以应用在移动端,有绝对定位、flexbox、table-cell和增加一个空白标签。

除了html5的新特性,CSS3的新特性也是面试中经常被问到的。本文分享了一些CSS3选择器、Transition,Transform和Animation等

vw : 1vw 等于视口宽度的1%,vh : 1vh 等于视口高度的1%。本文介绍纯CSS视口单位vw和vh来自行自适应,虽然现在的兼容性还没法完全能够接受,但不妨碍你认识这个vw和vh的强大。

由于视口单位涉及到计算,有一段时间我是抵制在工作使用视口单位。但就在上周,我克服了心中的抵制情绪,开始去了解视口单位在网页排版中的使用。在深入介绍视口单位以及其在网页排版中的工作原理时,先了解下有哪些常见的视口单位。

视口(viewport)单位,使流体排版在页面上应用变为可能。视口单位是根据浏览器的视口尺寸的百分比来定义的。举个例子,1视口宽度(vw)等于视口宽度的1%,它不同于百分比的地方是,它的宽度是依赖于视口的宽度的,而百分比是元素的祖先元素来决定的。

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响。rem 单位可以从浏览器字体设置中继承字体大小。

《CSS揭秘》里面发现一个很独特的一个动画,使用纯CSS3动画让一个元素沿着环形路径运动。听起来有点不可思议,本文将带你一起走进作者的文章中,由复杂到简单,由多个结构到简单结构解剖CSS3语句实现环形运动。

CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。本文分析了calc()的计算使用方法及兼容性

本文通过两个思路介绍了纯CSS实现多行内容超出时加省略号的代码,一种是支持webkit的浏览器,使用CSS3属性-webkit-line-clamp来限制行数,一种是通过加了一个绝对定位的伪元素来伪造一个省略号放在文字的最后面。常用第二种,兼容性较好。

这个CSS翻转卡片效果是在鼠标滑过上面的时候会有一个炫酷的旋转,显示下面的后面卡片,并且有发光的效果。下面分享一下这个代码:

这个 CSS3 类似于幻灯片旋转的效果,是一个比较有意思并且比较受欢迎的特效。之前没有去研究过,无意在博客上看到 Wenzi 写了这个东西,来看看他的代码是怎么实现的。

首页  上一页  1 2 3 4 5 6 下一页  尾页