1. 效果：

2. 代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>刘海？</title>

    <style>

      :root {

        --bg--color: #ed4014;

      }

      body {

        background: var(--bg--color);

      }

      .top_bar_div {

        position: fixed;

        left: 0;

        top: 0;

        width: 100%;

        height: 50px;

        background: -webkit-linear-gradient(rgba(62, 231, 232,0.1),rgba(62, 231, 232,0.6));

      }

      .top_bar_title {

        position: absolute;

        left: 50%;

        top: 100%;

        transform: translate(-50%,0);

        height: 30px;

        padding: 0 30px;

      }

      .top_bar_title::before {

        content: "";

        display: block;

        width: 100%;

        height: 0px;

        transform: translate(-50%,0);

        background: transparent;

        border-left: 30px solid transparent;

        border-top: 30px solid rgba(62, 231, 232, 0.6);

        border-right: 30px solid transparent;

        border-bottom: 30px solid transparent;

        position: absolute;

        left: 50%;

        top: 0

      }

      .top_bar_title span {

        position: relative;

        top: -20px;

        left: 0;

        font-weight: bold;

        font-size: 26px;

        background-image:-webkit-linear-gradient(top ,#46fdfe,#ccf1ee);

        -webkit-background-clip:text;

        -webkit-text-fill-color:transparent;

        font-family: "楷体";

      }

    </style>

  </head>

  <body>

    <div class="top_bar_div">

      <div class="top_bar_title"><span>智慧校区数字孪生平台</span></div>

    </div>

    <script>

      let colorArr = ["#2db7f5","#19be6b","#ff9900","#ed4014","#515a6e"];

      let num = 0;

      setInterval(() => {

        document.querySelector("body").style.background = colorArr[num];

        num++;

        if(num === colorArr.length) {

          num = 0

        }

      }, 1000);

    </script>

  </body>

</html>

3. 好像没什么要说明的

纯CSS样式写刘海屏效果的更多相关文章

  1. 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）

    类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...

  2. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  3. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  4. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

  5. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  7. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  8. 正确分析结构使用正确的HTML标签。CSS样式写一起。

    在内容中 一行内容包括三张图片,每张图片下面有标题和具体介绍,那么可以使用: 分析和解决如下步骤: 1,一行三块,先向左浮动成为一行float:left. 2,把他们的宽度平分三份,33.3%.三份都 ...

  9. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

随机推荐

  1. Linux queue.h之TAILQ队列分析

    转自 这两天想看看memcached的实现,所以先学习了libevent,使用起来还是比较简单的,其实是对select/poll/kqueue等的封装,学习libevent过程中又遇到了linux下队 ...

  2. vba取局域网电脑共享文件夹下的Excel文件

    Private Sub CommandButton1_Click()    Dim xlapp1 As Excel.Application    Dim xlbook1 As Excel.Workbo ...

  3. Python｜读、写Excel文件（三种模块三种方式）

    python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...

  4. 【数论】[SDOI2010]古代猪文

    大概就是求这个: $$G^\sum_{k|N} C_{n}^{k}$$ 显然只要把后面的$\sum_{k|N}C_{n}^{k}$求出来就好了 几个要用的定理: 欧拉定理的推论:(a和n互质) $$a ...

  5. splice用法

    splice()方法给数组添加内容,返回新的数组 splice()方法替换数组一项内容,返回新的数组 如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变. 比如:从第 2 位开 ...

  6. ld.so和ld-linux.so* ：动态链接器/加载器(转)

    概述 动态链接器可以被正在运行的动态链接程序或者动态对象(没有对动态链接器指定命令选项,动态链接器被存储在程序的.interp区域)间接调用,也可以直接运行程序, 例如:/lib/ld-linux.s ...

  7. Java 基础 - public、private、protected区别

    ref: https://www.cnblogs.com/pengfeiliu/p/3745934.html 类中的数据成员和成员函数据具有的访问权限包括:public.private.protect ...

  8. iOS中消息的传递机制

    本文中,会经常提及接收者[recipient]和发送者[sender].在消息传递机制中具体是什么意思,我们可以通过一个示例来解释:一个table view是发送者,而它的delegate就是接收者. ...

  9. c# 中Linq Lambda 的ToLookup方法的使用

    同样直接上代码: List<Student> ss = new List<Student>(); Student ss1 = , Age = , Name = " } ...

  10. Java笔记 – JDBC编程

    JDBC通过分层技术实现了跨数据库编程.为不同的数据库开发了统一的编程接口,为不同的数据库提供了不同的JAR类库. 一.JDBC基础 1.开发环境 (1)下载对应的Jar包 Oracle的本地Jar包 ...