CSS被软件工程师、图形设计师以及UI和UX专业人员广泛使用，它提供了通过创建独特、醒目的视觉效果来定制项目设计的能力。虽然有些视觉效果是比较简单的，但有些则比较复杂，需要详细的变通方法来获得所需的输出。
在这篇文章中，我们将学习如何只用CSS来实现闪耀效果。首先，我们将建立一个简单的注册表单，然后将闪亮效果应用于表单上的一个按钮。在本教程结束时，你将能够使用这种方法对你的应用程序中的任何元素应用类似的闪亮效果。
前提条件
要继续学习本教程，你需要具备以下条件。
- CSS和HTML的基本知识
- 在你的机器上安装一个文本编辑器，如VS Code或Sublime Text。
要查看本教程中使用的全部代码，你可以通过我的GitHub克隆这个项目。让我们开始吧!
什么是层叠样式表？
顾名思义，层叠样式表（CSS）是一种语言，它可以帮助开发者通过以层叠的方式对HTML元素进行造型来为网页添加视觉元素。层叠表示从上到下进行造型，这意味着归属于一个HTML元素的最后一个造型效果将覆盖该元素之前的所有其他效果。
用CSS对元素进行造型
让我们来看看下面这个HTML代码片段的例子。
<h1>Hello World!<h1>
想象一下，我们想把HTML元素的颜色样式化为红色。要做到这一点，请选择你想要样式的HTML元素。你可以通过引用该元素的名称、ID或类来实现。在我们下面的例子中，我们使用标题名称h1 来引用要样式化的HTML元素。
接下来，我们将打开大括号，包括我们打算应用于选定的HTML元素的效果。我们唯一的重点是把HTML元素的颜色改为红色，所以我们把red 赋给color ，如下所示。
h1 {
color: red
}
让我们考虑用firstName 作为其唯一的ID参考的HTML元素的样式。通过用id 来引用一个HTML元素，我们可以从一个较大的HTML元素组中，以类似于容器的形式，针对单个或较小的元素组，集体地应用效果。
我们可以使用div ，以节省为单个元素做造型的时间。请记住，id name 不能以数字开头，并且希望它与其他HTML元素是唯一的。
<div id = "firstName">
</div>
为了选择HTML元素，我们将使用# 散列字符，然后是id 。
#firstName{
color: blue;
font: 50%;
text-align: center;
}
我们还可以给上面的HTML元素添加额外的样式效果，如字体大小、文本对齐等等。另一种方法是使用class ，为我们的HTML元素设置样式，就像下面的代码片断。
<div class ="lastName">
</div>
如果要用CSS添加一个class 的样式效果，我们必须使用句号. 字符，然后是classname 。在这种情况下，我们的classname 是lastName 。
.lastName{
color: black;
font: 50%;
}
CSS分组
另外，我们还可以使用CSS分组来为我们的HTML元素统一样式。在对每个元素应用样式之前，我们先将我们的HTML元素分组，将每个元素用逗号隔开，使我们可以写更少的代码。
h1, h2, p{
color: green;
text-align: center;
font: 100px;
border-radius: none;
}
CSS通用选择器
星号* ，选择页面上所有的HTML元素，这样CSS样式就会被应用到所有的元素上。
* {
color: blue;
text-align: center;
}
从上面的例子中，我们观察到，CSS的作用可以比喻为画家的工作。让我们把HTML元素称为建筑物的结构，把CSS效果称为建筑物上的油漆。从本质上讲，对于一个前端开发项目或网页布局来说，HTML和CSS总是携手并进的。
CSS样式效果的类型
有三种方法可以为我们的HTML元素添加效果。其一，我们可以使用外部CSS样式，即把我们的CSS放在一个单独的文件夹中，然后用一个超链接来链接CSS页面，通常在<head> 。
内联CSS样式设计涉及到用一个独特的样式来设计一个单一的元素。只需将style 属性放在你想要样式的元素前面。内联造型通常发生在HTML元素中。内部CSS样式设计与内联CSS样式设计类似，这些术语通常可以互换使用。通常情况下，内部CSS是在<head> 。
回顾一下，CSS的样式是以层叠的形式出现的，样式是按照这种实现方式创建的。然而，内联CSS为这个规则提供了一个例外。相对于其他类型的效果，内联CSS样式具有最高的优先级，因为它总是覆盖外部或内部CSS样式。
用CSS设计表单的样式
在本节中，我们将对一个CSS表单进行样式设计，然后使用过渡效果为我们的表单添加一个闪亮的效果。下面的代码显示了一个普通的HTML页面，我们把它命名为index.html 。
<!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>Shine Effect of Pure CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h3>Registration</h3></form>
</div>
</body>
</html>
现在，我们将在HTML页面上创建一个输入表单，将email 和password 输入类型添加到我们的表单中。
<!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>Shine Effect of Pure CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h3 class="form-head">Registeration</h3>
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<div class="button-action">
<button>Sign Up</button>
</div>
</form>
</div>
</body>
</html>
接下来，我们将在我们的文本编辑器中创建第二个文件，并将其命名为style.css 。在这个文件中，我们将从Google Fonts导入一个字体。之后，我们将通过在我们的style.css 文件夹上使用* 星号字符来应用我们的通用CSS选择器，为我们所有的HTML元素提供一个基本样式。
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,500&display=swap');
*{
margin: 0%;
padding: 0%;
font-family: 'Arial', 'sans-serif';
box-sizing: border-box;
}
接下来，我们将在我们的样式效果中加入一个:root 伪类选择器，我们将对我们的body 和form 元素进行如下样式。
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,500&display=swap');
*{
margin: 0%;
padding: 0%;
font-family: 'Arial', 'sans-serif';
box-sizing: border-box;
}
:root {
--first: purple;
}
body{
background: radial-gradient(circle at center,
cyan, rgb(77, 136, 212), blue),100% ;
display: flex;
align-items: center;
justify-content: center;
height: 70vh;
}
form{
width: 400px;
margin: 0 auto;
padding: 30px;
box-shadow: 1px, 2px, 3px rgba(50, 50, 50,0.87);
background-color: white;
}
在这一点上，你的表格应该看起来像下面的图片。
现在，我们将样式化我们的form-head 类，并为我们的input 元素添加更多的效果，如border 和border-bottom ，如下图所示。
.form-head{
font-size: 25px;
text-align: center;
}
input{
border: none;
border-bottom: 2px solid var(--first);
}
上面的代码片断导致了下面的图片。
为了总结我们的表单的基本内容，让我们给我们的input 元素添加一些额外的属性。
input{
border: none;
border-bottom: 2px solid var(--first);
padding: 10px;
outline: none;
display: block;
width: 100%;
margin: 20px auto;
}
现在，我们的表单将看起来像下面的图片。
为我们的表单按钮添加闪亮效果
现在，我们将为我们的注册button 元素添加一个闪亮的效果。我们将首先改变我们的按钮的位置到表单的中心，然后我们将添加hover,linear-gradient, 和transition 效果。
.button-action{
text-align: center;
}
button{
border-radius: 8px;
border: none;
padding: 8px 12px;
color: whitesmoke;
background-color: purple;
font-weight: 800;
cursor: pointer;
outline: none;
}
通过上面的代码片段，我们可以用某些属性定制我们的按钮，如color,font-weight,padding, 和border-radius 。你可以在下面的图片中看到这个结果。
最后，我们将为我们的Sign Up 按钮添加一个闪亮的效果，如下面的代码片断所示。
.button-action{
text-align: center;
}
button{
border-radius: 8px;
border: none;
padding: 8px 12px;
color: whitesmoke;
background-color: purple;
font-weight: 800;
cursor: pointer;
outline: none;
background-repeat: no-repeat;
background-position: -120px -120px, 0 0;
background: linear-gradient(45deg, yellow, purple, red, blue);
background-size: 250% 250%, 100% 100%;
transition: background-position 1s ease;
}
button:hover{
background:linear-gradient(35deg, brown, pink, green);
background-position: 0 0;
transition: 0.5s;
}
我把linear-gradient ，作为background 属性的一个额外的功能，button ，造成所选默认颜色的混合，黄色、紫色、红色和蓝色。我表示我想让这些颜色沿着一个45deg 角度的对角线。
其次，我添加了一个transition 属性，它将决定在用户执行动作后所选颜色显示的快慢。我选择了1s 作为颜色过渡的ease 时间。
然后，我添加了一个button:hover 效果属性，它就像一个事件监听器，在这里我们将包括创造出类似闪亮效果的颜色。现在，每当按钮被悬停或点击时，所选的颜色就会变成棕色、粉色和绿色的混合色，沿着35deg 的角度。过渡时间被设置为0.5秒，这是在按钮上应用效果之前的时间。background-position 保持不变，因为我们把0% 分配到了右边和左边的位置。
你也可以在YouTube上查看这个效果。
总结
在这篇文章中，我们介绍了如何只用CSS为HTML元素添加视觉闪耀效果。首先，我们介绍了一些关于CSS的重要背景信息。然后，我们建立了一个简单的注册表单，最后，我们为表单上的一个按钮添加了一个闪亮的效果。
你可以按照本教程中的步骤，在任何类型的项目或网页上添加类似的效果。在你的应用程序中添加醒目的视觉效果可以帮助吸引用户，或者将他们的注意力引向你希望他们去的地方。
我希望你喜欢这篇文章，如果你有任何问题，请务必留下评论。编码愉快!
The postCreate a shine effect using only CSSappeared first onLogRocket Blog.
