使用CSS创建定向点燃的3D按钮-css教程-PHP中文网

使用CSS创建定向点燃的3D按钮

>我不太确定我是如何偶然发现的。但是有些事情使我进入了这条推文：

>
是否有人与CSS进行了这种定向的照明光标相互作用？ pic.twitter.com/zll7sk6kw5
- 杰德·布里奇斯（@jedbridges）2020年7月1日

对我来说，这是一个挑战。

>按钮设计整洁。但是我不想直接副本。相反，我们决定制作一个“ Twitter”按钮。这个想法是，我们创建一个几乎透明的按钮，上面有一个社交图标。然后那个社交偶像在下面投射了一个阴影。将我们的鼠标移到按钮上，从而在其上闪闪发光。按下按钮将其按下表面。这是最终结果：

>定向照明3D CSS Twitter按钮？ https://t.co/qpfzewumey通过@codepen pic.twitter.com/zwfwtpaixo
- jhey？（@jh3yy）2021年1月30日
在本文中，我们将研究如何制作。很酷的事情是，您可以将图标交换为您想要的任何东西。

钥匙要点

>利用CSS和HTML创建一个具有动态照明效果的3D按钮，该效果响应光标运动，增强用户交互。

通过操纵CSS属性，例如`transform-preserve-3d;`并使用变量来控制深度和透视图。通过使用``aria-hidden''属性来增强可访问性，并确保通过屏幕读取器可感知交互元素。
>应用CSS过渡和转换来模拟物理互动，例如按下按钮，将现实主义添加到用户体验中。
>使用JavaScript进行动态效果，例如基于光标位置在按钮上移动光线，并带有用于平滑动画的GSAP。

>在这里，我们创建了一个用于渲染Twitter图标的SVG的混合蛋白。如果我们像这样调用，这将渲染Twitter图标：

这样做将为我们提供一个很大的Twitter图标。

看到笔 1。通过站点点渲染图标（@sitepoint）在Codepen上。

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登录后复制

由于社交图标集倾向于使用相同的“ 0 0 24 24”视图框，因此我们可以进行标题和路径参数：>

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登录后复制

然后我们的Twitter图标变为

<span><span>+icon()</span>
</span>

登录后复制

，但是，如果我们有许多要使用或重复的图标，我们可以将其传递给对象中的路径，然后将路径存储在对象中：

这可能是创建图标混合物重复使用的整洁方法。对于我们的例子来说，这有点过分，但值得注意。

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登录后复制

现在，我们需要对我们的按钮进行一些标记。

注意到可访问性总是很好。我们可以通过检查浏览器开发人员工具中的

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

登录后复制

可访问性

面板来检查我们的按钮发出的内容。

使用CSS创建定向点燃的3D按钮 >为我们的按钮文本介绍并以艾里亚隐藏的方式隐藏图标可能是个好主意。我们也可以隐藏跨度文本，同时使其可用于屏幕读取器：>

>我们有不同的选择来应用那些隐藏的属性。我们将使用的一个是更改混合代码以应用Aria Hinded：

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

登录后复制

>与PUG一起使用的另一种整洁的方式是将所有属性通过混合蛋白。这在我们只想通过某些属性的情况下很有用：

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

登录后复制

如果我们再次检查

可访问性

>面板，我们的按钮只会读取“ Twitter”。这就是我们想要的！

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span>span<span>.button__text</span> Twitter
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

登录后复制

样式 >这是您来的部分 - 我们如何设计东西。首先，我们将其放在：

中

>使我们能够为按钮创建所需的3D变换。尝试在最终演示中关闭它，您会看到一切都破裂了。

>让我们从眼睛隐藏跨度文本。我们可以在许多方面做到这一点。一种推荐的方法是从我们的眼中隐藏元素，而不是ScreenReader的元素是使用这些样式：

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

登录后复制

>在开始使用按钮之前，我们将倾斜场景。我们可以使用转换来做到这一点。在这里，我们将转换带入我们想要的位置。我花了一些时间在现场流上修补值，以使其接近原件：>

>您也会注意到大小变量。我们将使用CSS变量为按钮驱动某些东西。这将使修补值和效果的修补使其方便。通常，我们将它们放在需要的范围之下。但是，对于这样的演示，将它们放在：root处于我们文件顶部，使我们更容易玩。

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span><span>&attributes(attributes)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

登录后复制

这些是我们正在使用的变量，当我们构建按钮时它们会很有意义。

<span>* {
</span>  <span>transform-style: preserve-3d;
</span><span>}
</span>

登录后复制

按钮

>让我们继续使用该按钮！按钮元素将填充场景元素。我们本可以在按钮上使用尺寸并直接转换。但是，如果我们要介绍其他按钮和元素，我们就必须对其进行更改和大小。总体而言，这是CSS值得关注的事情。尝试使您的容器元素决定布局：

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登录后复制

在这里我们剥离按钮样式。这给了我们这个。

看到笔 9。按sitepoint（@sitepoint）按台式按钮样式在Codepen上。

接下来，我们需要为按钮内容和阴影创建一个常见的起点。我们可以通过给出每个元素绝对定位来做到这一点。该内容将根据我们之前定义的深度变量具有3D翻译：>

>请注意我们也如何使用-radius变量。

<span><span>+icon()</span>
</span>

登录后复制

看到笔 10。通过站点点（@SitePoint）给按钮深度在Codepen上。

>在此阶段很难区分两个图标。现在是为它们设计的好时机。我们可以应用一些基本的图标样式，并为每个SVG图标使用示波器填充：>

它到达那里！不过，目前这些图标的尺寸不一样。我们将做到这一点。

看到笔 11。按sitepoint（@SitePoint）应用示波器填充在Codepen上。

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登录后复制

>让我们按下按钮。这部分真的很快集成：

就是这样！使用范围的CSS变量，我们说删除Z轴翻译：Active。将过渡添加到转换会阻止其如此瞬间。

看到笔 12.按下：通过SitePoint（@SitePoint）活动在Codepen上。

>剩下要做的就是样式按钮层和光泽。让我们从阴影开始：

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登录后复制

>这里的另一种范围。我们说的是，当我们按下按钮时，阴影不再模糊。为了模糊阴影，我们将CSS过滤器属性与模糊过滤器一起使用 - 我们在CSS变量中定义的值。使用-blur变量播放并查看会发生什么。

看到笔 13。减少悬停在悬停点的模糊（@sitepoint）在Codepen上。

对于内容层，我们将使用背景颜色，然后应用背景过滤器。就像过滤器一样，背景过滤器是我们将视觉效果应用于元素的一种方式。当前常见的用例是将Blur用于“玻璃塑料”：>

<span><span>+icon()</span>
</span>

登录后复制

我们使用-blur的值并将过渡应用于背景过滤器。由于我们在：Active的方式上范围范围内的变量：我们几乎可以免费获得过渡。为什么溢出：隐藏？我们预计将在按钮周围移动的光泽元素。不过，我们不希望它在外面徘徊。

看到笔 14. sitepoint的样式内容层（@SitePoint）在Codepen上。

现在，拼图的最后一部分 - 光线闪耀。这就是导致图标的大小不同的原因。因为它没有样式，所以它会影响布局。让我们给它一些样式：

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登录后复制

绝对定位将整理图标尺寸。施加边框半径将使聚光灯成为聚光灯。我们再次使用过滤器给出模糊的斑点效果。您会注意到，我们在那里的末端将亮度过滤器链接在一起，以使事物变得模糊。

看到笔 15.造型划分sitepoint（@sitepoint）在Codepen上。

使用3D翻译可确保将光线坐在按钮上方，它将可以做到。这样，就没有机会与其他元素进行Z战斗。

>这就是我们目前需要的全部。现在是时候进行某些脚本了。

>脚本

>为了方便起见，我们将在这里使用Greensock。他们对我们想要的东西有一些整洁的公用事业。但是，我们可以通过Vanilla JavaScript取得相同的结果。因为我们使用的是带有“模块”类型的脚本，所以我们可以利用Skypack。

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登录后复制

>现在我们准备开始修补。我们希望我们的按钮响应指针运动。我们想要的第一件事是翻译光泽，就好像它遵循了我们的指针一样。第二个是根据我们的指针在位置移动按钮。

>让我们抓住所需的元素，并在文档上设置一些基本的事件侦听器：>

尝试在此演示中移动指针，以查看我们将返回x和y的贵重物品：

<span><span>+icon()</span>
</span>

登录后复制

看到笔 16.抓取元素并按SitePoint（@SitePoint）创建事件侦听器在Codepen上。

这是最棘手的位。我们需要一些数学才能确定光泽位置。首次重置后，我们将翻译光泽。我们需要首先更新Shine Styles以适应它。我们正在使用范围的CSS变量-X和-Y。我们给他们一个-150的后备，因此演示负载时，他们将不再射击：

然后，在我们的更新功能中，我们计算了Shine的新位置。我们将其基于按钮大小的百分比。我们可以通过从我们的指针位置减去按钮位置来计算这一点。然后，我们将其除以位置。要结束，乘以200，以获得一个百分比：

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登录后复制

例如，pos_x：

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

登录后复制

抓取指针位置x。

我们乘以200，因为光泽是按钮的一半。这个特定部分很棘手，因为我们正在尝试跟踪指针并将其映射到3D空间中。为了将其应用于按钮，我们可以使用gsap.set设置这些CSS变量。这是一种GSAP方法，可作为零秒之间的补间。这对于在元素上设置值特别有用：

>，但是，如果我们想进一步迈出一步，我们可以使用GSAP的QuickSetter，这对于在现实世界中的性能更好，我们正在进行大量更新：

>使我们的更新功能看起来像这样：

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

登录后复制

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登录后复制

遵循指针的准确性将需要更多的计算才能确切。与此演示一起玩，该演示可以看到按钮上的溢出，并且光泽更为突出。您可以看到Shine Element如何丢失其跟踪。

看到笔 17。按SitePoint（@SitePoint）翻译Shine Playground 在Codepen上。

这个演示将所有内容都放在了应该的位置。

看到笔 18。按SitePoint（@SitePoint）翻译光泽在Codepen上。

>最后一个功能。让我们移动按钮以增加触摸。在这里，我们将基于指针位置的按钮的换档。但是，我们将限制其运动。为此，我们可以使用另一个GSAP实用程序。我们将使用maprange。这使我们可以将一组值映射到另一组值。然后，我们可以传递一个值，然后将映射的值返回。

首先，我们将定义运动的限制。这将是按钮大小的百分比：

<span><span>+icon()</span>
</span>

登录后复制

现在，在我们的更新功能中，我们可以计算移位百分比。我们通过将窗口宽度映射到极限上来做到这一点。我们输入指针位置以使映射百分比返回：

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登录后复制

在此块中，我们将0范围映射到窗口。InnerWidthto -10至10。通过指针位置X将为我们提供-10至10之间的值。然后我们可以将该百分比移动应用于我们的按钮。我们对垂直偏移也这样做，这为我们提供了以下更新函数：

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

登录后复制

就是这样！

这就是您如何创建带有CSS和一些脚本的定向点亮的3D按钮。很酷的事情是我们可以相对轻松地进行更改。

对于最终演示，我添加了一些额外的详细信息并更改了图标。您可能会认识到它。

看到笔 20。站点点按sitepoint（@sitepoint）在Codepen上。

一如既往，感谢您的阅读。想看更多吗？快来在Twitter上找到我或查看现场流！

经常询问有关使用CSS

创建定向点亮的3D按钮的问题

>如何使用CSS创建一个3D按钮，该CSS单击时会更改？

创建一个3D按钮，该按钮在单击时会更改时，涉及使用：Active Pseudo-class在CSS中。当用户激活该元素时，该伪级用于设计元素。例如，单击按钮时可以更改按钮的颜色，大小或位置。这是一个简单的示例：

.button：active {
background-color：＃3e8e41;
box-shadow：0 5px＃666;
transform：translatey（translatey（4px）; }
在此示例中，单击时，按钮的背景颜色会更改为不同的绿色阴影。盒子阴影属性添加了阴影效果，转换属性将按钮稍微向下移动。
>

>如何为我的3D按钮添加悬停效果？可以使用CSS中的悬停伪级来实现3D按钮。当鼠标指针越过时，该伪级用于样式元素。您可以更改颜色，尺寸或悬停在按钮中的阴影。这是一个简单的示例：

.button：hover {

背景色：＃3e8e41; box-shadow：0 5px＃666;
}
在此示例中，悬停在悬停时，按钮的背景颜色会更改为不同的绿色阴影，并添加了阴影效果。
>
>如何使我的3D按钮能够响应？

使您的3D按钮响应能力涉及使用媒体CSS中的查询。媒体查询允许您为不同的设备或屏幕尺寸应用不同的样式。例如，您可以根据屏幕尺寸更改按钮的大小或位置。这是一个简单的示例：

@media屏幕和（最大宽度：600px）{

> .button { width：100％;
padding：20px;
}
}
在此示例中，按钮的宽度设置为100％，并且当屏幕尺寸为600px或更小时时，填充物会增加。
如何为3D按钮添加过渡效果？使用CSS中的过渡属性可以实现在3D按钮中添加过渡效果。此属性允许您指定效果的速度。例如，您可以使颜色变化或阴影逐渐出现。这是一个简单的示例：

.button {
过渡：背景色0.5s易于宽松，盒子遮盖0.5s sele; }>在此示例中，背景颜色和阴影在0.5秒的时间内逐渐更改。

>如何创建一个带有圆角的3D按钮？

创建一个带有圆角的3D按钮涉及在CSS中使用Border-Radius属性。此属性使您可以将圆形边界添加到元素中。例如，您可以使按钮的拐角圆。这是一个简单的示例：

.button {
border-radius：12px;
}
在此示例中，按钮的拐角处的拐角处的半径为12px。 >如何创建一个具有梯度背景的3D按钮？

>创建具有渐变背景的3D按钮涉及在CSS中使用线性梯度函数。此功能使您可以创建一个在两种或多个颜色之间过渡的梯度。这是一个简单的示例：

.button {
背景：线性级别（在右边，＃ff7f00，＃ff5500）; }
}
>}
在此示例中，按钮的背景从一个浅橙色至较深的橙色。

>如何创建一个具有阴影效果的3D按钮？

>

>创建带有阴影效果的3D按钮涉及使用CSS中的盒子遮阳属性。此属性使您可以向元素添加阴影。例如，您可以在按钮中添加阴影以使其看起来3D。这是一个简单的示例：

.button { boxshadow：0 5px 15px rgba（0,0,0,0,0.3）; }
在此示例中，该按钮具有一个阴影在按钮下方是5px，半径为15px。阴影的颜色是半透明的黑色。

>如何创建一个带有边框的3D按钮？

>创建带有边框的3D按钮涉及在CSS中使用边框属性。此属性使您可以向元素添加边框。例如，您可以在按钮中添加一个边框以使其脱颖而出。这是一个简单的示例：

.button {

边界：2px固体＃ff5500;
}
在此示例中，该按钮具有2px固体边框，带有橙色的颜色。 >
>如何创建一个带有文本内部文本的3D按钮？

创建一个带有文本的3D按钮涉及使用CSS中的文本属性。这些属性允许您在元素内部设计文本。例如，您可以更改按钮内文本的颜色，大小或字体。这是一个简单的示例：

.button {

颜色：#fff;

font-size：20px; font-family：arial，arial，sans-serif;
}
}
在此示例中，按钮内的文本为白色，大小为20px，并使用Arial字体。

>如何创建一个与所有浏览器兼容的3D按钮？

>创建一个与所有浏览器兼容的3D按钮涉及在CSS中使用供应商前缀。这些前缀允许您在所有浏览器中得到充分支持之前使用新的CSS功能。例如，您可以使用-webkit-前缀用于Chrome和Safari，Firefox的-moz-前缀和Internet Explorer的-MS-前缀。这是一个简单的示例：

.button {
-webkit-transition：background-color 0.5s易于易度，盒子遮盖0.5s易于;
moz-moz-transition：background-color 0.5s易于宽松。，盒子阴影0.5s易于;
-ms-transition：背景色0.5s易于宽松，盒子遮阳0.5s易于;
过渡：背景色0.5s易于宽松，盒子遮盖，盒子shadow 0.5s sele; } 在此示例中，过渡效果与Chrome，Safari，Firefox和Internet Explorer兼容。

以上是使用CSS创建定向点燃的3D按钮的详细内容。更多信息请关注PHP中文网其他相关文章！