最近看到一个网站挺有意思,叫 code my ui, 其中一个部分介绍四百多个纯css效果的例子,每一个例子都有codepen,对学习css大有帮助。但仅仅看是没用的,我之前看过不少coco的css文章和codingStartup起码课的b站视频,最后结果是:
看的时候,觉得都懂,真的灵活运用就傻了。所以我打算做一个系列,叫Dummy CSS, 讲解里面的例子,要做到连css菜鸟都能看懂的,(当然,读者也得要懂基本的css知识),表示自己真的把知识学透了。正如物理学家费曼所说的:“如果你不能向其他人简单地解释一件事,那麽你就是还没有真正弄懂它。”
这是这系列的第一篇文章,我先用一个简单的例子小试牛刀。
静态效果
首先把元素和静态时的样式实现出来,很简单,一个flex布局就搞定了:
html:
<div class="wrapper">
<h1 class="hover-text">Hover Me</h1>
</div>
复制代码
css:
.wrapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center
}
.hover-text {
font-size: 5rem;
}
复制代码
现在把文字垂直居中,还要把背景弄出来,因为之后我们要操控背景移动,所以不要直接用background,而是用一个伪元素来完成,把它舖满文字,居于文字后面就可以了。
要把它舖满,可以给它宽高百分百,也可以用绝对定位,然后给它的top, bottom, left, right为0, 这样就舖满,为什么这四个属性为0就舖满?你想想,你要一个元素相对于某元素最顶又要最低,而且最左又要最右,自然是舖满它才有可能的。
居于文字后面就简单啦,用z-index: -1
就可以了:
.hover-text {
position: relative;
}
.hover-text:before {
content: " ";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: hsl(200 100% 80%);
z-index: -1;
}
复制代码
结果如下:
动态背景
现在要去实现动态背景,当我们把鼠标放到文字时,背景过渡显示出来,否则就消失。要做动态效果,首先想到的是transition
和animation
这两个属性,简单的动画用transition
足够了。
因为我们要为背景做动态效果,所以把transition
放在伪元素里,而且一般情况下要把背景隐藏,可以用transform: scale(0)
来实现,当鼠标在文字上,transform: scale(1)
用背景就显示出来,结果如下:
现在的问题是背景从中心向四周展现出来,消失时则向中心收缩,而不是向左边开始水平展现,消失时则从右边消失。如果希望背景水平展现,可以用scaleX
来替代scale
,表示只向x轴,即水平方向拉伸。而要改变transform的开始位置,可以用 transform-origin 来调整。我们希望鼠标在文字时,背景从左出现,所以在.hover-text:hover::before
添加transform-origin: left;
,然后从右消失就是在.hover-text::before
添加transform-origin: right;
。
最后结果可以看codepen示例。