『 禁止吸烟🚭』纯 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 的禁烟作用，同时，吸烟有害健康，为了咱们自己的人身健康以及家人的健康，请不要吸烟。

最后，假如这篇文章有协助到你，❤️关注+点赞❤️鼓励一下作者，谢谢大家

往期回忆

送你一个心爱的大圆脸，速来~

这么炫酷的 3D Menu 作用，真的不来看看？

产品司理：你这个作用不行，我想要一个五彩斑斓的黑！我：。。。