【总结】1958- 登录页面一些有趣的 css 效果,太好看了!
共 4500字,需浏览 9分钟
· 2024-04-10
前言作者:刘圣凯
https://juejin.cn/post/7294908459002331171
今天无意看到一个登录页,input
框focus
时placeholder
上移变成label
的效果,无聊没事干就想着自己来实现一下,登录页面能做文章的,普遍的就是按钮动画,title
的动画,以及input
的动画,这是最终的效果图(如下), 同时附上预览页以及实现源码。
title 的动画实现
首先描述一下大概的实现效果, 我们需要一个镂空的一段白底文字,在鼠标移入时给一个逐步点亮的效果。文字镂空我们可以使用text-stroke
, 逐步点亮只需要使用filter
即可
text-stroke
text-stroke
属性用于在文本的边缘周围添加描边效果,即文本字符的外部轮廓。这可以用于创建具有描边的文本效果。text-stroke
属性通常与-webkit-text-stroke
前缀一起使用,因为它目前主要在WebKit浏览器(如Chrome和Safari)中支持。
text-stroke
属性有两个主要值:
- 宽度(width) :指定描边的宽度,可以是像素值、百分比值或其他长度单位。
- 颜色(color) :指定描边的颜色,可以使用颜色名称、十六进制值、RGB值等。
filter
filter
是CSS属性,用于将图像或元素的视觉效果进行处理,例如模糊、对比度调整、饱和度调整等。它可以应用于元素的背景图像、文本或任何具有视觉内容的元素。
filter
属性的值是一个或多个滤镜函数,这些函数以空格分隔。以下是一些常见的滤镜函数和示例:
- 模糊(blur) : 通过
blur
函数可以实现模糊效果。模糊的值可以是像素值或其他长度单位。
.blurred-image {
filter: blur(5px);
}
- 对比度(contrast) : 通过
contrast
函数可以调整对比度。值为百分比,1表示原始对比度。
.high-contrast-text {
filter: contrast(150%);
}
- 饱和度(saturate) : 通过
saturate
函数可以调整饱和度。值为百分比,1表示原始饱和度。
.desaturated-image {
filter: saturate(50%);
}
- 反色(invert) : 通过
invert
函数可以实现反色效果。值为百分比,1表示完全反色。
.inverted-text {
filter: invert(100%);
}
- 灰度(grayscale) : 通过
grayscale
函数可以将图像或元素转换为灰度图像。值为百分比,1表示完全灰度。
.gray-text {
filter: grayscale(70%);
}
- 透明度(opacity) : 通过
opacity
函数可以调整元素的透明度。值为0到1之间的数字,0表示完全透明,1表示完全不透明。
.semi-transparent-box {
filter: opacity(0.7);
}
- 阴影(drop-shadow) :用于在图像、文本或其他元素周围添加阴影效果。这个属性在 CSS3 中引入,通常用于创建阴影效果,使元素看起来浮在页面上或增加深度感
drop-shadow(<offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?)
各个值的含义如下:
-
<offset-x>
: 阴影在 X 轴上的偏移距离。 -
<offset-y>
: 阴影在 Y 轴上的偏移距离。 -
<blur-radius>
(可选): 阴影的模糊半径。默认值为 0。 -
<spread-radius>
(可选): 阴影的扩散半径。默认值为 0。 -
<color>
(可选): 阴影的颜色。默认值为当前文本颜色。
filter
属性的支持程度因浏览器而异,因此在使用时应谨慎考虑浏览器兼容性。
实现移入标题点亮的效果
想实现移入标题点亮的效果我们首先需要两个通过定位重叠的span
元素,一个做镂空用于展示,另一个作为 hover
时覆盖掉镂空元素,并通过filter: drop-shadow
实现光影效果,需要注意的是这里需要使用inline
元素实现效果。
title-animation.gifinput 的动画实现
input
的效果比较简单,只需要在focus
时span(placeholder)
上移变成span(label)
同时给input
的border-bottom
做一个底色的延伸,效果确定了接着就看看实现思路。
input placeholder 作为 label
使用div
作为容器包裹input
和span
, span
首先绝对定位到框内,伪装为placeholder
, 当input
状态为focus
提高span
的top
值,即可伪装成label
, 这里有两个问题是:
-
当用户输入了值的时候,
span
并不需要恢复为之前的top
值, 这里我们使用css
或者js
去判断都可以,js
就是拿到输入框的值,这里不多做赘述,css
有个比较巧妙的做法, 给input required
属性值设置为required
, 这样可以使用css:valid
伪类去判断input
是否有值。 -
由于span层级高于input,当点击span时无法触发input的聚焦,这个问题我们可以使用
pointer-events: none;
来解决。pointer-events
是一个CSS属性,用于控制元素是否响应用户的指针事件(例如鼠标点击、悬停、触摸等)。这个属性对于控制元素的可交互性和可点击性非常有用。pointer-events
具有以下几个可能的值:- auto(默认值):元素会按照其正常行为响应用户指针事件。这是默认行为。
- none:元素不会响应用户的指针事件,就好像它不存在一样。用户无法与它交互。
- visiblePainted:元素在绘制区域上响应指针事件,但不在其透明区域上响应。这使得元素的透明部分不会响应事件,而其他部分会。
- visibleFill:元素在其填充区域上响应指针事件,但不在边框区域上响应。
- visibleStroke:元素在其边框区域上响应指针事件,但不在填充区域上响应。
- painted:元素会在其绘制区域上响应指针事件,包括填充、边框和透明区域。
- fill:元素在其填充区域上响应指针事件,但不在边框区域上响应。
- stroke:元素在其边框区域上响应指针事件,但不在填充区域上响应。
pointer-events
属性非常有用,特别是在创建交互性复杂的用户界面时,可以通过它来控制元素的响应区域。例如,你可以使用它来创建自定义的点击区域,而不仅仅是元素的边界。它还可以与其他CSS属性和JavaScript事件处理程序结合使用,以创建特定的交互效果。
input border bottom 延伸展开效果
效果比较简单,input被聚焦的时候,一个紫色的边从中间延伸覆盖白色的底边即可。在使用一个span
作为底部的边, 初始不可见, focus
时从中间向两边延伸直至充满, 唯一头痛的就是怎么从中间向两边延伸,这里可以使用transform
变形,首先使用transform: scaleX(0);
达到不可见的效果, 然后设置变形原点为中间transform-origin: center;
,这样效果就可以实现了
input 的动画实现效果
input-animation.gif按钮的动画实现关于按钮的动画很多,我们这里就实现一个移入的散花效果,移入时发散出一些星星,这里需要使用到动画去实现了,首先通过伪类创建一些周边元素,这里需要用到 background-image(radial-gradient)
background-image(radial-gradient)
background-image
属性用于设置元素的背景图像,而 radial-gradient
是一种 CSS 渐变类型,可用于创建径向渐变背景。这种径向渐变背景通常以一个中心点为基础,然后颜色渐变向外扩展,形成一种放射状的效果。
radial-gradient
的语法如下:
background-image: radial-gradient([shape] [size] at [position], color-stop1, color-stop2, ...);
-
[shape]
: 可选,指定渐变的形状。常用的值包括 "ellipse"(椭圆)和 "circle"(圆形)。 -
[size]
: 可选,指定渐变的大小。可以是长度值或百分比值。 -
at [position]
: 可选,指定渐变的中心点位置。 -
color-stopX
: 渐变的颜色停止点,可以是颜色值、百分比值或长度值。
按钮移入动画效果实现
btn-animation.gif结尾css 能实现的效果越来越多了,遇到有趣的效果,可以自己想想实现方式以及动手实现一下,思路毕竟是思路,具体实现起来说不定会遇到什么坑,逐步解决问题带来的成就感满足感还是很强的。