渐变流光按钮练习总结

最新推荐文章于 2024-09-27 10:45:57 发布

梦诺七棠

最新推荐文章于 2024-09-27 10:45:57 发布

阅读量296

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_53663696/article/details/123242317

版权

这篇博客介绍了如何使用CSS实现模块的水平和垂直居中，包括块级元素和行内元素的居中方法。同时，详细讲解了颜色渐变的创建，以及如何通过滤镜添加视觉效果。此外，还探讨了快速创建包裹元素的技巧，并利用伪类选择器实现。最后，展示了如何结合动画帧和滤镜创建动态的渐变流光按钮效果，代码示例详尽清晰，适合前端开发者学习。

摘要由CSDN通过智能技术生成

渐变流光按钮练习总结

模块居中

水平居中 + 垂直居中

/*块级元素通过margin值设置水平居中*/
div {
	width: 100px;
	margin: 0 auto;
}

/*与绝对定位配合*/
div {
	position: absolute;
	width: 100px;
	height: 50px;
	left: 50%;
	margin-left: -50px;
}

/*行内元素，在父级标签加text-aline: center;
1.left： 50%
2.margin 自己盒子走一半 负值
*/
.father {
	text-align: center;
}

通过绝对定位设置居中

/*纯绝对定位写法*/
div {
	position: absolute;
    width: 100px;
    height: 50px;
    left: calc(50% - 50px); /*calc(50% - 盒子宽度的一半)*/
    top: calc(50% - 25px); /*calc(50% - 盒子高度的一半)*/
}

颜色渐变

在写背景颜色时，可以用linear-gradient（线性渐变函数）

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变

/* 从上到下，蓝色渐变到红色 */
background: linear-gradient(blue, red);
 
/* 渐变轴为45度，从蓝色渐变到红色 */
background: linear-gradient(45deg, blue, red);
 
/* 从右下到左上、从蓝色渐变到红色 */
background: linear-gradient(to left top, blue, red);
 
/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
background: linear-gradient(0deg, blue, green 40%, red);

可通过检查(F12)进行调试
渐变角度滚轮

快速创建包裹元素

利用伪类选择器（before 或者 after）

<div id="warp">我要包裹它</div>

	#warp {
      position: relative;
      width: 100px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background-color: pink;
    }
	
	/*利用伪类选择器*/
    #warp::before {
      position: absolute;
      content: "";
      top: -5px;
      right: -5px;
      bottom: -5px;
      left: -5px;
      border: 1px solid red;
    }

在这里插入图片描述

滤镜

滤光器好比戴上眼镜，通过滤镜看世界会更加精彩，会使颜色变模糊，此属性需要考虑兼容性问题。跨浏览器图像灰度(grayscale)解决方案。IE浏览器不太支持。

函数方法的描述

/*常用高斯模糊如果没有设定值，则默认是0；
这个参数可设置css长度值，但不接受百分比值。*/
filter: blur(20px);

动画帧

有时候通过改变背景图片或者渐变色的位置即可发生流动的效果

/*定义关键帧*/
@keyframes sun {
	100% {
		background-position: -400%;
	}
}

/*如何使用*/
animation: sun 8s infinite;
/*从左边到右边 帧名称 
持续时间 何时开始 播放次数 
是否反方向 动画起始和结束状态*/

渐变流光按钮总代码

结果样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渐变按钮</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #000;
    }

    a {
      text-decoration: none;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3d, #03a9f4);
      background-size: 400%;
      width: 400px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      text-transform: uppercase;
      color: #fff;
      border-radius: 50px;
      z-index: 1;
    }

    a::before {
      content: "";
      position: absolute;
      left: -5px;
      right: -5px;
      top: -5px;
      bottom: -5px;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3d, #03a9f4);
      background-size: 400%;
      border-radius: 50px;
      filter: blur(20px);
      z-index: -1;
    }

    a:hover::before {
      animation: sun 8s infinite;
    }

    a:hover {
      animation: sun 8s infinite;
    }

    @keyframes sun {
      100% {
        background-position: -400%;
      }
    }
  </style>
</head>

<body>
  <a href="javascript:;">sunbutton</a>
</body>

</html>