css3

最新文章

CSS3:Flex布局

Flex是一种弹性布局,要分为两部分理解Flex:作用于容器(flex-container)的属性作用于容器里项目(flex-item)的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后,我们就可以确定了Flex分布的主轴(main axis)以及交叉轴(cross axis)。主

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

如何使用CSS变量让响应式变得超级简单

本文是关于如何在2018年创建响应式网站的快速教程。如果你之前没有听说过CSS变量,它就是CSS的新增功能,它让你可以在样式里使用变量的功能,而无需进行任何设置。实质上,CSS变量允许你跳过设置样式的旧方式:h1 {   font-size: 30px; } navbar > a {   font-si

[译]CSS变量实现酷炫的悬停效果

我最近受Grover网站上有趣悬停动画的启发。 将鼠标移动到订阅按钮上可以显示光标移动后的彩色渐变。 这个想法很简单,但效果是按钮会脱颖而出,并得到点击。我们怎样才能达到类似的效果,让我们的网站脱颖而出呢? 其实,它不像你想象的那么难!跟踪位置我们首先要获取鼠标的位置。document.querySelector('.button').onmousemove 

解决IE11 Flex布局文本不换行的问题

在页面上使用了flex来布局,代码如下:CSS:.container{     display: flex;     flex-direction: column;     border: 1px solid red;     align-items: center;   }   .item {     border: 

CSS3使用transition属性实现过渡效果

属性详解transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现。它是一个合并属性,是由以下四个属性组合而成:transition-property:设置应用过渡的CSS属性,如background。transition-duration:设置过渡效果花费的时间。默认是 0。transition-timing-function:设置过渡效果的时间曲线。默认是

重新触发CSS3 animation和@keyframes定义的动画

结合CSS3的animation和@keyframes可以给元素定义动画,定义一个标题进入的动画如下:只运行一次动画scss@keyframes my-animation { from { opacity : 0; left : -500px; } to { opacity : 1; left : 0; } } .run-

Bubble Point Tooltip

最近学习了一些设计知识,就是想让自己用一个例子来检验一下自己的学习有啥进步。因此想到了用一个简单的小功能来检验。需求如下,我们知道基本上很多html元素都有一个title属性,一旦鼠标移动到这个元素上,就会显示一个黄色的小框,然后将title的值显示出来;当鼠标移开以后,这个黄色的框就会消失。这个基本的功能总的说来能达到一定的目的,但是UI体验上不是那么优秀。因此,我尝试用另外一种方式来实现。尽可