纯css实现：理发店门口的转灯效果

南极一块修炼千年的大冰块
2,117 阅读7分钟

这是我参与更文挑战的第27天，活动详情查看： 更文挑战

前言

哈喽，艾瑞巴蒂，周末的时光总是特别的快，周末的床也总是格外的有吸引力，像一块吸铁石，在周末的早上，我不是大冰块，而是一个小铁块。

又拖到了晚上开始更文大业，今天晚上去遛旺旺，路过一家理发店，旺旺望着理发店门口的旋转灯，看起来很有兴趣的样子。我就想之前写过一个css实现的理发店门口的转灯效果来着，不过时代久远忘得差不多了，今天要再写一遍，温故知新，所以今天的更文主题就是纯css实现理发店门口的转灯效果。

理发店转灯的由来

先来段题外话，说说理发店门口为啥统一的都有转灯，以下解释摘自百度：

说法1：法国大革命时期，有一家理发店是革命党人活动据点。一次，在理发师的掩护下，一个革命党主要领导人在追捕中得以脱险。革命胜利后，为了表彰其功绩，特许他们以红、白、蓝三色国旗作为标志，这种标志逐渐演变成为后来的转花筒灯，各国纷纷仿效，成为国际性的理发店标志。

说法2：走在街上，你会看到奇特的理发店标志。那红、白、蓝三色，扭糖棒儿似的标志在日本各地到处可见。但是，它到底象征着什么，你知道么?一提到红、白、蓝，人们立刻会联想起法国国旗。但是，这标志并不像三色旗那样象征自由、平等、博爱的理想，而是红色代表动脉、蓝色代表静脉，白色代表绷带。据说这个国际通用的标志是法国人梅亚那克尔于1540年设计的。 那么，理发店为什么要用动脉、静脉和绷带来做标志呢?那是因为在近代医学发展之前，理发师往往兼职外科医生，他们能够治一些骨折、脱臼、跌打损伤之类的外科病，所以才用它做标志的。

说法3：由蓝红白三色带组成，欧洲中世纪没有专业的医生，一般疾病由放血疗法治疗，而理发师就充当放血师，红色代表动脉，蓝色代表静脉，白色代表绷带。作标牌用，相当于饭店门口挂一个酒幡。后世一直沿袭下来，只是内容有所不同。

之前初高中时总喜欢看些奇奇怪怪的知识书，有本书里也有这样的解释。

好了，步入正题，考虑一下转灯的思路吧！

思路

首先使用一个div元素作为灯箱，然后需要红、白、蓝三色填充为灯箱转灯的颜色，即背景填充为红、白、蓝三色，对css背景色感兴趣的可以看一下我之前的这篇文章：《如何把css渐变背景玩出花样来》。

值得注意的是，虽然填充的是红、白、蓝三色，但是红蓝两色并不会接触，也就是说应该是红—白—蓝—白—红—白—蓝—白...这样说起来，代码实现的时候应该是填充了四次颜色。

按着这个思路，我写出了如下代码：

    <style>
        .box{
            width: 50px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            background: repeating-linear-gradient(45deg, #fff 0 5%,#f00 0 10%,#fff 0 15%,#00f 0 20%);
        }
    </style>

    <div class="box"></div>

实现效果如下图：

image.png

可以看出，背景的图像已经完成了，那么旋转的效果是怎么来的呢？很简单，只要我们把背景图案向上动画平移，即会有一个看起来持续旋转的效果。

背景图案的平移怎么做呢？总不能加个伪元素使用margin、transform之类的解决吧，那就太麻烦了。其实我们还可以用background-position设置背景图像的基准点，也就是起始位置来解决。代码如下：

    <style>
        .box{
            width: 50px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            background: repeating-linear-gradient(45deg, #fff 0 5%,#f00 0 10%,#fff 0 15%,#00f 0 20%);
            animation: up 5s infinite linear;
        }

        @keyframes up {
            from{
                background-position: 0 600px;
            }
            to{
                background-position: 0 0;
            }
        }
    </style>



    <div class="box"></div>

实现效果如下图：

GIF 2021-6-27 22-35-55.gif

我们可以发现，旋转灯的连接处是有问题的，最上面的蓝色应该和蓝色对齐，而现在在连接处出现了断层的现象：

image.png

造成这个问题的原因就是我们没有设置背景图像的大小，然后会平铺满整个空间，但背景图像的最上面和最下面不是可以无缝连接的，所以看起来就会有断层。

解决方式也很简单，只要给背景图像设置宽高即可，原先的宽高相当于background-size: 50px 600px;，只要改成背景图像的最上面和最下面可以无缝连接即可。代码如下：

    <style>
        .box{
            width: 50px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            background: repeating-linear-gradient(45deg, #fff 0 5%,#f00 0 10%,#fff 0 15%,#00f 0 20%);
            animation: up 5s infinite linear;
            background-size: 300px 200px;
        }

        @keyframes up {
            from{
                background-position: 0 600px;
            }
            to{
                background-position: 0 0;
            }
        }
    </style>



    <div class="box"></div>

实现效果如下图：

GIF 2021-6-27 22-44-12.gif

完美实现！！！如果想有一个控制暂停的效果，比如鼠标移入暂停，可以加一个animation-play-state: paused;，表示暂停动画效果。

比如添加如下代码：

    .box:hover{
        animation-play-state: paused;
    }

实现效果如下图：

GIF 2021-6-27 22-47-28.gif

顺利实现~

后记

希望大冰块今天分享的内容能对你有所帮助，说实话，css制作理发店门口灯箱效果其实蛮简单的，不过写起来还是要花时间想好大一会儿，有时候，简单的代码往往被忘的最快，比如暂停动画的animation-play-state属性我已经不记得怎么写的，只记得有这个属性，又重新去翻了文档~

今天是我坚持日更的第二十七天，每天输出一点点，进步一点点。日拱一卒，功不唐捐。大家一起加油呀~

如果本文对你有帮助，别再是悄悄收藏啦！比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧~

d2a3b6f182407290c859b16b1d4715a3.gif

更文挑战的文章目录如下：

avatar
文章
阅读
粉丝