css的发掘之路（持续更新中......）

天往
1,096 阅读7分钟

因为一些学习路线的原因，css一直是我比较欠缺的部分，这种欠缺体现在，给一个需求给我，可以调，但是可能就是需要我一点一点的去通过搜索看如何实现，而不是自己一拿到就有一个解决的思路，因此最近在工作之余，也发现了一些css的魅力。

前言

本篇主要介绍一些我在学习或者工作中发现或者使用到的一些css样式 （主要是我觉得好看的）。然后会讲一下实现的思路以及实现的结果。

一、elementui首页的滚动图片颜色变化

我在非常多的地方看到过有大佬们去实现Element Plus首页顶部的样式效果，如下图：

image.png 有兴趣的朋友可以去官网看一下，我自觉目前css还没有到这种地步，因此这次就先不挑战这个了。

因为之前一直都是使用Vue2，所以都是使用ElementUi比较多，这次主要也是实现ElementUi首页的一个样式，效果图如下：

image.png

当滚动条向下滚动时，红色的会慢慢覆盖蓝色，然后向上滚动时，蓝色会覆盖红色。

刚开始我看到这个样式的时候，单纯的以为他是改变了一张图片的颜色 (因为确实css很差劲)。

因此我打开了控制台，才发现原来是两张图片，红色的图片覆盖在蓝色的图片上面，但因为初始高度是0，所以没有显示出来，但是随着滚动条的移动，红色那张图片的高度也会发生变化，就会慢慢覆盖掉蓝色的图片。

是我没见过世面，一看这个思路，心想，还能这么玩，那我一定要实现一下。

1.1、实现

打开控制台，得到他们的HTML结构主要就是两个div和两个img，结构如下

image.png

那有了这个结构，我们就可以新建一个html文件写一下这个结构

    <div style="height: 300px;"></div>
    <div class="jumbotron">
        <img src="https://element.eleme.cn/static/theme-index-blue.c38b733.png" alt="">
        <div class="jumbotron-red" id="red">
            <img src="https://element.eleme.cn/static/theme-index-red.c8e136e.png" alt="" srcset="">
        </div>
    </div>

这里我们就直接copy他们的图片过来，需要注意的是，为了出现滚动条，我在最上面加了一个空的div给了它300px的高度，用来模拟官网上面的其他块。

如果这时候直接打开我们就会发现图片非常大，很难看清这个效果，所以我们稍微设置一下高度宽度以及让图片居中的样式

    <style>
        .jumbotron {
            width: 890px;
            margin: 30px auto;
            position: relative;
        }
        img {
            width: 100%;
        }
        .jumbotron-red {
            height: 0px;
            transition: height 0.1s ease 0s;
            background-color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }
    </style>

这里用的定位方法就是比较典型的子绝父相 （好吧，其实我也不太懂），在完成这些之后，我们就能看到页面出现了一张蓝色的图片以及滚动条

image.png

那么接下来就是最核心的部分了，根据滚动条的滚动，来给红色那张图片设置高度，因为我是直接在html中实现的，所以使用了DOM来进行操作。

首先，我们需要监听到滚动条的高度的变化，这里我们通过window.onscroll来进行监听，为了防止body和window都有滚动条，我们主要获取到3个值的变化，分别是document.documentElement.scrollTop、document.body.scrollTop和window.screenY，然后通过对比着三者将高度赋值给红色的图片，代码如下

    <script>
        window.onscroll = function() {
            if(document.documentElement) {
                var y1 = document.documentElement.scrollTop || 0
            } 
            if(document.body) {
                var y2 = document.body.scrollTop || 0
            }
            let y3 = window.screenY || 0
            let y = Math.max(y1, Math.max(y2,y3))
            changeHeight(y)
        }
        function changeHeight(y) {
            let redDom = document.getElementById('red')
            y = y > 589 ? 589 : y
            redDom.style.height = y + 'px'
        }
    </script>

到这里，这一个通过滚动进行图片覆盖的页面效果就完成了。

二、通过css的动画效果实现图片的切换

最近打工人遇到了一个需求，大概就是通过背景图片的快速切换，达到一个闪烁的效果。

作为一个懒惰的切图仔，我遇到这个需求的时候想的是，这个系统也是为了让你工作，闪烁会让你更有动力工作吗？（反正我不会）

但是没办法，需求是不会因为切图仔的意志而改变的，所以只能开始分析需求。

UI给了40张非常相似的图片，要达到闪烁的效果，那只能是在非常短的时间内完成图片的切换。有了这个思路，那么就要开始去实现了。

因为我自己找不到那么多相似的图片，所以下面我们就用相似的颜色来实现看一下效果吧。

2.1、实现

接下来我们需要使用animation属性来进行动画的实现

首先我们需要了解一下animation属性：

animation: name duration timing-function delay iteration-count direction;

值介绍值介绍
name你定义的动画名称duration切换一轮花费的时间
timing-function动画的速度曲线，从快到慢，从慢到快之类的delay动画开始之前的延迟
iteration-count动画播放次数direction播放顺序

因为我们就只是简单实现一个闪烁，所以我们定义的就是快速重复轮流播放。

找到需要使用动画的标签，在样式上加上animation: changColor 2s linear infinite; 这里就是定义了一个名叫changColro的动画，2s播放一轮，重复播放。

然后我们需要去写我们的动画：

    @keyframes changColor {
      0% {
        background-color: #d0dd19;
      }

      10% {
        background-color: #c6d128;
      }

      20% {
        background-color: #b0bb19;
      }

      30% {
        background-color: #a9b40d;
      }

      40% {
        background-color: #a3ad14;
      }

      50% {
        background-color: #8b940a;
      }

      60% {
        background-color: #8b940e;
      }

      70% {
        background-color: #8d960e;
      }

      80% {
        background-color: #8e970b;
      }

      90% {
        background-color: #778007;
      }

      100% {
        background-color: #e2f106;
      }
    }

通过@keyframes来定义我们的动画，然后0%-100%具体怎么区分则需要根据实际的需求来确定你的动画一轮需要切换多少次，在每个环节加上我们需要切换的东西即可。

到这里，闪烁的效果就基本实现了。（需要注意的是，如果是切换图片的话，每张图片的大小（宽高）就要保持一致，要不然会出现一些有趣的切换效果）

三、弹窗中转圈加载效果

用css画圆一定会吧，让div绕中心旋转会一定会吧，那我们就可以开始用css写一个转圈加载效果了。

3.1、实现

这个效果我们经常用，简单的转圈圈就是一个div，但是看了一下一些组件库中的实现方法，都是用SVG，不过本质上还是用transform属性，对需要加载的SVG或者div，让其进行旋转就能实现效果了。

  <div class="popup">
    <div class="spinner"></div>
  </div>

html结构就比较简单，就是一个大的div，里面包裹着需要转圈的div，首先我们将spinner的div变成一个圆，给个边框加上颜色，然后将这个div设置为能绕中心旋转，最后用二中讲到的动画属性循环这个旋转样式即可。

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }

  .spinner {
    margin: 70px auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* border: 3px solid #ccc; */
    border-left: 1px solid #3498db;
    border-right: 1px solid #3498db;
    border-top: 1px solid #3498db;
    /* border-top-color: #3498db; */
    animation: spin 2s infinite linear;
  }


  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>

四、向下动画效果

4.1、实现

首先需要具备一个乡下的图标，这里直接使用边框来实现，然后是若隐若现的动画，给人一直持续向下的错觉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .icon {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 2px;
            border-left: 1px solid rgb(117, 110, 110);
            border-bottom: 1px solid rgb(117, 110, 110);
            transform: rotate(-45deg);
            animation: an_opacity 2s linear infinite;
        }
        .icon1 {
            margin-top: 2px;
            animation-delay: .5s;
        }
        .icon2 {
            margin-top: 6px;
            animation-delay: 1s;
        }
        .icon3 {
            margin-top: 10px;
            animation-delay: 1.5s;
        }
        .icon4 {
            margin-top: 14px;
            animation-delay: 2s;
        }

        @keyframes an_opacity {
            0% {
                opacity: 0
            }
            60% {
                opacity: 1
            }
            80% {
                opacity: 1
            }
            100% {
                opacity: 0
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <i class="icon icon1"></i>
        <i class="icon icon2"></i>
        <i class="icon icon3"></i>
        <i class="icon icon4"></i>
    </div>
</body>
</html>

参考资料

Element - 网站快速成型工具

(81条消息) CSS 3 动画 实现图片动态切换_css图片切换动画_椿☽的博客-CSDN博客

CSS animation 属性 (w3school.com.cn)

(84条消息) CSS的2D旋转效果_css围绕中心旋转_金牛座的琛的博客-CSDN博客

avatar
文章
阅读
粉丝