『 禁止吸烟🚭』纯 CSS 实现 | 禁烟也能做的这么酷炫
前言
老婆之前说，如果我抽烟，当初就不会要我，幸好我是一个对烟味极度厌恶的人，虽然曾经年少无知也玩过几根烟，但是对于烟味的排斥致使我最终没有在抽烟的道路上一去不复返，今天就给大家分享一个由纯 CSS 实现的 3D 禁烟效果，希望人人都能拒绝烟草，还我们一个清新的世界。
我们先来看一下最终的效果，具体如下图所示：
基础布局
首先还是先搭建相关的 html 代码，将基础的架子搭建起来，代码如下：
<div class="container">
<div class="cigarette">
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
</div>
</div>
基础的代码很简单，通过 span 标签和 i 标签生成烟头和烟蒂，然后我们需要添加相关的 CSS 样式，让整个效果清晰明了起来，相关的 CSS 如下：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #222;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
.cigarette {
transform-style: preserve-3d;
span {
position: absolute;
color: #fff;
font-size: 1.35em;
font-weight: 700;
text-transform: uppercase;
line-height: .76em;
text-shadow: 0 2px 5px rgba(0, 0, 0, .25);
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, .25);
transform-style: preserve-3d;
i {
font-style: normal;
color: #ec9535;
&:first-child {
&::after {
content: 'L';
color: #ccc;
text-transform: lowercase;
}
}
&:last-child {
color: red;
filter: blur(2px);
text-shadow: -4px 0 2px #000,
8px 0 20px #f00,
8px 0 24px #f00,
8px 0 0 #222,
12px 0 #555,
16px 0 #666,
20px 0 #888,
24px 0 #999;
}
}
}
}
}
通过给 span 标签和 i 标签添加相关的样式，最终实现的效果如下图所示：
这里我们看到了一个平面的禁止吸烟的效果，要实现 3D 的效果，就需要添加更多的 span 标签，因此我们的 html 代码需要进行更新，代码如下：
<div class="container">
<div class="cigarette">
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
<span><i>Nooooooo</i>Smooooooooking<i>|</i></span>
</div>
</div>
上述的基础布局完成后，接下来就需要让这个禁烟效果变成 3D 立体的，并且能够实现自动旋转。
旋转的 3D NoSmoking
布局和相关的基础样式已经完成了，但是现在这个效果还是平面的，我们需要将它转变为 3D 效果，那该如何实现呢？其实也不难，还记得前面的文章中介绍的 var 属性吗？我们可以在每个 span 的样式中添加相关的数字属性，然后再通过 CSS 的 var 属性来获取相关的数字，并添加对于的旋转角度即可，修改 html 代码如下：
<span style="--i:1"><i>Nooooooo</i>Smooooooooking<i>|</i></span>
...
<span style="--i:10"><i>Nooooooo</i>Smooooooooking<i>|</i></span>
接下来只需要再给 span 标签添加一个旋转属性，它就能变成立体 3D 效果，相关 CSS 样式如下：
span {
//...other code
transform: translate(-50%, -50%) rotateX(calc(var(--i) * 36deg)) translateZ(25px);
}
在原有的 transform 属性中，添加一个 rotateX 属性，它的值就根据前面在 span 标签中设置的 --i 来获取，最终实现的立体效果如下图所示：
到这里，还需要最后一步，就是让整个效果动起来，只需要使用 CSS3 中的 animation 属性即可，配合 @keyframes 关键词创建相关动画帧，就可以使整个效果动起来了，相关 CSS 代码如下：
// ...other code
.cigarette {
transform-style: preserve-3d;
animation: animate 15s linear infinite;
... other code
}
@keyframes animate {
0% {
transform: perspective(1000px) rotateX(0deg);
}
100% {
transform: perspective(1000px) rotateX(360deg);
}
}
在上述的动画帧中，我们设置了从 0% 到 100% 的动画效果，将整个视口设置为 1000px，并且旋转水平坐标轴，最终的实现效果可以在这里进行查看
最后
我们通过 CSS3 的 animation 属性和 transform 属性实现了一个 3D 的禁烟效果，同时，吸烟有害健康，为了我们自己的人身健康以及家人的健康，请不要吸烟🚭。
最后，如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家
往期回顾
转载自:https://juejin.cn/post/7144602974759682084