极客笔记如何使用CSS创建有方向光照的3D按钮
您网站的每个部分都非常重要。您的网站按钮不仅仅是装饰品；它们是关键的设计元素，可以帮助您讲述与您的业务相关的故事，引导人们访问您的产品或服务。虽然基本按钮是功能性的，但您可以更进一步，添加有趣的效果，例如悬停时改变颜色的按钮、带阴影的按钮、禁用按钮或按钮组。按钮可以带我们到其他页面，或执行诸如提交表单或进行购买等操作。
您构建按钮的最佳选择是使用CSS（层叠样式表）进行按钮创建。CSS是一种定义和描述HTML元素呈现方式的技术。使用CSS编辑器，您可以更改网页的每个组件，包括标题、页脚、侧边栏和按钮。在本文中，我们将讨论如何使用CSS创建具有方向光照的3D按钮。
首先，让我们来看一些我们将需要的CSS属性。
Font Awesome图标
Font Awesome Free 5 是使用在字体系列中，以在下载链接旁添加文件格式类型的图标。它与CSS中的内联元素一起使用。Font Awesome是一个包含为各种事物指定的数千个图标的库。每个图标都有一个唯一的Unicode值。以下是一些图标示例以及它们的代码。
| fa fa-file-excel-o | Excel 图标 |
|---|---|
| fa fa-file-powerpoint-o | Powerpoint 图标 |
| fa fa-file-word-o | MS Word 图标 |
盒子阴影属性
使开发者能够为元素应用一个或多个阴影。可以通过逗号将多个效果分开进行赋值。
语法
box-shadow: value;
此属性的值如下：
- None - 元素上不显示阴影。这是默认值。
-
Offset-X - 阴影沿水平方向离元素的距离。正值会在元素的右侧产生阴影，负值会将阴影移到元素的左侧。
-
Offset-Y - 阴影在垂直方向离元素的距离。正值会在元素上方产生阴影，负值会在元素下方产生阴影。
-
Blur-radius - 指定阴影的清晰度。数值越大，阴影越模糊，也就是阴影会更大且更轻。
-
Spread - 指定阴影的大小。如果值为正数，阴影会增大；如果为负数，阴影会减小。
-
Color - 指定阴影的颜色。
:before 伪选择器
:before CSS 选择器用于在元素内容之前插入一些内容。
:after 伪选择器
::after CSS 选择器用于在元素内容之后插入一些内容。content 属性指定要在所选元素之前或之后写入的内容。
CSS Transform 属性
可以使用 CSS 中的 transform 属性更改视觉格式模型的坐标空间。它用于给元素添加倾斜、缩放、旋转和平移等效果。
语法
transform: none| transform-functions| initial| inherit;
数值
- translate(x, y) - 此函数定义X和Y坐标上的平移。
-
translate3d(x, y, z) - 此函数定义X、Y和Z坐标上的平移。
-
rotate(angle) - 用于定义旋转轴的角度。
-
scale(x, y) - 此函数定义沿X和Y轴的比例变换。
-
scale3d(x, y, z) - 此函数定义沿X、Y和Z轴的比例变换。
-
skew(angle, angle) - 此函数定义X、Y和Z轴上的倾斜变换。倾斜变换定义了沿X和Y轴的倾斜角。
-
initial - 元素的默认值。
-
inherit - 继承其父元素的值。
步骤
-
为创建按钮创建三个
<a>元素，并给它们添加不同的id。 -
使用嵌套方法和伪元素如:before和:after给按钮添加3D效果。
-
使用CSS Font awesome图标添加图标。
-
使用CSS transform属性为按钮提供适当的对齐方式。使用box shadow属性为按钮元素添加阴影。
示例
下面的示例演示了如何创建具有方向性照明的3D按钮。
<!DOCTYPE html>
<html>
<head>
<title> Directionally Lit 3D Buttons </title>
<link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
<style>
*{
margin: 0;
padding: 0;
}
div {
display: flex;
align-items: center;
justify-content: center;
background: #E1C16E;
margin: 0;
padding: 10px;
width: 99vw;
height: 98vh;
font-family: 'Times New Roman', Calibri,
Georgia, Verdana, serif;
position: relative;
}
ul {
position: absolute;
display: flex;
margin: 5px 5px;
padding: 2px 2px;
}
i {
padding: 11px;
}
a {
text-decoration: none;
color: white;
letter-spacing: 1px;
font-family: cursive;
}
ul li {
list-style: none;
margin: 15px;
display: block;
}
ul li a {
width: 150px;
height: 100px;
margin: 40px;
background: cyan;
display: flex;
font-size: 20px;
align-items: center;
border-radius: 10%;
justify-content: center;
transform: rotate(-25deg) skewX(30deg);
box-shadow: -35px 30px 20px white;
}
ul li a:before {
content: '';
position: absolute;
top: 15px;
left: -20px;
background: cyan;
border-radius: 10%;
height: 100%;
width: 25px;
transform: rotate(10deg) skewY(-55deg);
}
ul li a:after {
content: '';
position: absolute;
bottom: -20px;
left: -10px;
background: cyan;
border-radius: 10%;
height: 30px;
width: 98%;
transform: rotate(10deg) skewX(-60deg);
}
li a:hover {
transform: rotate(-25deg) skew(35deg) translate(18px, -19px);
}
</style>
</head>
<body>
<div>
<h1> 3D Buttons </h1>
<ul>
<li id= "excel">
<a href= "#"> <i class= "fa fa-file-excel-o" style= "color:green"> </i> MS Excel </a>
</li>
<li id= "powerpoint">
<a href= "#"> <i class= "fa fa-file-powerpoint-o" style= "color:red"> </i> Powerpoint</a>
</li>
<li id= "word"> <a href= "#"> <i class= "fa fa-file-word-o" style= "color:blue"> </i> MS Word </a></li>
</ul>
</div>
</body>
</html>
结论
在本文中，我们讨论了如何使用CSS属性（如transform、伪选择器、box-shadow属性和font awesome图标）创建方向光照的3D按钮。