【CSS练习】如何用纯 CSS 创作一个金属光泽 3D 按钮特效
2019-04-01 本文已影响0人
奔跑的程序媛A
image.png
知识点
element {
--main-bg-color: brown;
}
声明一个 全局 CSS 变量：
:root {
--global-color: #666;
--pane-padding: 5px 42px;
}
使用一个局部/全局变量：
element {
background-color: var(--main-bg-color);
color: var(--global-color);
}
-
:root
CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root表示<html>元素，除了优先级更高之外，与html选择器相同。
在声明全局 CSS 变量时:root会很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
3.calc()
可以用在任何一个需要<length>、<frequency>、<angle>、<time>、<number>或<integer>的地方。有了calc()，`你就可以通过计算来决定一个CSS属性的值了。
/* property: calc(expression) */
width: calc(100% - 80px);
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
-
perspective
指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
/* Keyword value */
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
/* Global values */
perspective: inherit;
perspective: initial;
perspective: unset;
5.text-shadow
为文字添加阴影。可以为文字与 text-decorations添加多个阴影，阴影值之间逗号相隔。
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
- <offset-x> <offset-y>
必选。这些长度值指定阴影相对文字的偏移量。<offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。 <offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。如果两者均为0，则阴影位于文字正后方 - <blur-radius>
可选。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。</dd> - <color>
可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）自行选择的颜色。
-
box-shadow
由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置了border-radius，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;
- 单位
- 绝对单位
像素 (px)、mm毫米（Millimeters）、cm厘米（centimeters）、in英寸（inches）、pt点（Points (1/72 of an inch)）、pc十二点活字（ picas (12 points.)） - 相对单位
em：1em与当前元素的字体大小相同
ex,ch: 分别是小写x的高度和数字0的宽度
rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸 - 无单位的值：0、无单位的行高
- 百分比
- 颜色：
#ff0000、rgb(255,0,0)、red、rgba(255,0,0,0.5)
--指定透明度，通过CSS——opacity属性 orrgba() - 动画：
degtransform: rotate(0deg);
代码
<style type="text/css">
html, body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: skyblue;
}
#button {
background: linear-gradient(to right, gold, darkorange);
color: white;
--width: 250px;
--height: calc(var(--width) / 3);
width: var(--width);
height: var(--height);
text-align: center;
line-height: var(--height);
font-size: calc(var(--height) / 2.5);
font-family: sans-serif;
letter-spacing: 0.2em;
border: 1px solid darkgoldenrod;
border-radius: 2em;
transform: perspective(500px) rotateY(-15deg);
text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
transition: 0.5s;
position: relative;
}
#button:hover {
transform: perspective(500px) rotateY(15deg);
text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}
#button::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, transparent, white, transparent);
left: -100%;
transition: 0.5s;
}
#button:hover::before {
left:100%;
}
</style>
