从一个发光按钮开始学CSS动画

最新推荐文章于 2025-06-04 08:46:11 发布

原创最新推荐文章于 2025-06-04 08:46:11 发布 · 793 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html5

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用CSS动画属性创建动态按钮效果，包括渐变背景移动及按钮发光效果的实现，详细讲解animation属性的各部分及其应用。

CSS一直都在用，但是一直以来，都只会使用最简单的:hover、:active这些最简单、最基础的动画触发一些最简单的，例如边框、颜色这样简单的变化。最近开始学习一些CSS中高级的东西。动画，自然是必不可少的了。

animation属性

首先：animation属性

animation是一个简写属性，其总共有六个属性可以设置

animation-name //绑定的动画名(使用@keyframes定义的动画名)
animation-duration //动画完成的时间 s/ms
animation-timing-function //动画的速度曲线 linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)
animation-delay //动画开始前的延迟时间 s/ms
animation-iteration-count //动画的播放次数数字/infinite(无限重复)
animation-direction //是否反向播放动画 normal(默认)/alternate(反向播放，在播放次数仅为一次时不生效)

这里我就直接使用animation简写了。

首先看看动画名吧，基本算是最核心的属性。我们在使用前需要先定义动画就像下面这样。

@keyframes active { /* active 就是动画名 有点类似函数名，调用时会用到 */
    50% {background-color: #fff} /*在时间到50%的时候background-color属性会变为规定的样式*/
}

动画已经定义完，再下面就是使用动画，让动画“动起来”。

btn:hover{
    animation: active/*上面定义的动画名*/ 1s/*动画完成的时间*/ linear/*动画的速度曲线*/ infinite/*无限重复*/ alternate/*在完成一次动画后，反向播放动画*/;
}

效果图：
基本效果

更好看的按钮

好，下面开始今天的主题——按钮。同样的，先看效果
完成效果

效果就是，在鼠标移入时，渐变的背景会进行移动，其实就是使用动画把背景的定位移动了一下。

基础页面

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000;
		}
		button {
			/*按钮大小*/
			width: 150px;
			height: 50px;
			/*定位*/
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			/*文字*/
			font-size: 14px;
			font-weight: bold;
			text-transform: uppercase;
			/*边框*/
			border: 0;
			outline: 0;
			border-radius: 25px;
		}
	</style>
</head>
<body>
	<button>Button</button>
</body>
</html>

到这里，基本的样式已经有了。那么，渐变的背景怎么实现？

button{
	background: linear-gradient(45deg/*背景旋转角度，也可以是to right、left、bottom、top*/, #03a9f4, #f441a5, #ffeb3b, #03a9f4/*背景颜色，多个颜色之前用‘，’分隔开*/);
}

但是如果单单是这样的话，背景的分布是渐变的，但是并不好看，所以，这个时候，我们把背景的size设置的大一些。

button{
    background: linear-gradient(45deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 300%; /*背景大小设置为原来的300% 这样背景看着不会太刻板 */
}

接下来，就是动画的定义了，

button:hover {/*在鼠标移入时，启动动画*/
    animation: hoverBtn 2s infinite;
}
@keyframes hoverBtn {
    100% {
       background-position: 300%;   /*在时间到总时间的100%时，background-position变为300%（这是一个渐变过程）*/
    }
}

好，到此，你就会发现，你的按钮比起以前，会好看许多。

按钮的优化 —— 按钮发光

效果：
在这里插入图片描述

我们可以看到鼠标移入时，不止是背景在变，按钮似乎也在发光。怎么做到的呢？

这里倒是和按钮的处理方式有些类似，不过，我们需要用伪元素的方法来做（当然，如果用另外一个div、span来做也不是不可以）。

/*在前面的基础上，我们加入下面的伪元素*/
button::before{
    content: '',
	position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-radius: 25px;
    
	/*让伪元素也有同样的背景和背景的大小*/
    background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 300%;
    
    /*把伪元素置于底层*/
    z-index: -1;
}
button:hover::before {
    /*设置高斯模糊 “发光”的关键 可以调整数值来调节光团大小*/
	filter: blur(10px); /*这个放在这里，只有在鼠标移入时，才会有效果，如果想要一直有效果，则可以把这个属性放到button::before中去。*/
    
    /*和按钮同样的动画效果*/
    animation: hoverBtn 2s infinite;
}