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. sklearn算法中的顶层设计

    sklearn监督学习的各个模块 neighbors近邻算法,svm支持向量机,kernal_ridge核岭回归,discriminant_analysis判别分析,linear_model广义线性模 ...

  2. 天道神诀---DHCP服务(上篇)

    DHCP DHCP(Dynamic Host Configuration Protocol, 动态主机配置协议),被应用在局域网环境中,主要作用是集中的管理.分配IP地址,使网路环境中的主机动态的获得 ...

  3. 正版STlink的使用注意

    https://blog.csdn.net/xinghuanmeiying/article/details/78026561

  4. JS对象 数组连接 concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。 语法 arrayObject.concat(array1,array2,.arrayN)

    concat() 方法用于连接两个或多个数组.此方法返回一个新数组,不改变原来的数组. 语法 arrayObject.concat(array1,array2,...,arrayN) 参数说明: 注意 ...

  5. 关于pip安装较慢的问题解决

    在 ~/.pip/ 下创建文件 pip.conf(如果还没有的话),并填入以下内容: [global] timeout = 6000 index-url = http://pypi.douban.co ...

  6. c_数据结构_图_邻接表

    课程设计------邻接表 图的遍历实现课程设计:https://files.cnblogs.com/files/Vera-y/图的遍历_课程设计.zip #include<stdio.h> ...

  7. scala 中List的简单使用

    /** * scala 中List的使用 * */ object ListUse { def main(args: Array[String]): Unit = { def decorator(l:L ...

  8. iOS ARC下命名规则

    当我在ARC模式下写以下代码的时候,编译器报错 Semantic Issue: Property's synthesized getter follows Cocoa naming conventio ...

  9. "一个实用的却被忽略的命名空间:Microsoft.VisualBasic"：

        当你看到这个命名空间的时候,别因为是vb的东西就匆忙关掉网页,那将会是您的损失,此命名空间中的资源最初目的是为了简化vb.net开发而创建的,所以microsoft.visualbasic并不 ...

  10. VS2010-MFC（Ribbon界面开发：创建Ribbon样式的应用程序框架）

    转自:http://www.jizhuomi.com/software/251.html 上一节讲了GDI对象之画刷CBrush,至此图形图像的入门知识就讲完了.从本节开始将为大家带来Ribbon界面 ...