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;
}
上面的内容和图片中的颜色稍有不同,是我更改了配色。如果你不知道如果配色更好看,可以到网络中搜索渐变配色,或者到这个网址去看一看渐变配色及其他颜色搭配。
好了,这个更好看的按钮就完成了。总结一下用到的知识:
总结
知识梳理
- animation,一个简写属性,全部属性有动画名、动画完成时间、速度曲线、延迟时间、动画次数、是否反向动画。
- 背景渐变色:background: linear-gradient(to right, #fff, #000)。颜色个数似乎没有限制。
- filter: blur(); 高斯模糊