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. shell 一些命令（转）

    shell 一些命令(转) https://www.cnblogs.com/amei0/p/8041989.html 参考文档 http://man.linuxde.net/ 一.awk 求和 awk ...

  2. Jedis整合单机、Sentinel和Cluster模式

    配置文件和配置类 @Data @Configuration @ConfigurationProperties("jedis-config") public class JedisC ...

  3. 2018今日头条湖北省赛【H】

    [题目链接]https://www.nowcoder.com/acm/contest/104/G 现场赛的H题,emmm...C++选手表示很伤心.高精度压四位板子WA四发. 题意很简单就是给你n个数 ...

  4. PostgreSQL 主键自动增长

    建立主键并设置自动增加的办法好好几种,这里记录我测试过的: drop table pro_process; CREATE TABLE "public"."pro_proc ...

  5. 关于Qt5（1）-- 两个窗口互相切换的例子

    <QT Creator快速入门>这本书有一章介绍model和modeless的概念时,用到了两个窗口互相切换的例子.但是原文对该例子的说明非常模糊不清,现整理如下. 1,要求:登陆界面.主 ...

  6. 计算几何——线段和直线判交点poj3304

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #i ...

  7. c语言 局部变量做返回值 问题

    一般的来说,函数是可以返回局部变量的. 局部变量的作用域只在函数内部,在函数返回后,局部变量的内存已经释放了.因此,如果函数返回的是局部变量的值,不涉及地址,程序不会出错.但是如果返回的是局部变量的地 ...

  8. 夏令营501-511NOIP训练17——蛇形矩阵

    传送门:QAQQAQ 题意:话说小X在孩提时,都会做标准的蛇形矩阵了,发现很好玩.现在的小X很想对其进行改版,变为如下类型的一个无限大蛇形数阵:令S(x)表示以1为左上角,x为右下角的矩形内所有数之和 ...

  9. python-包管理工具-pip

    目录 Python pip pip相关命令 解决pip相关问题 Python pip回到顶部 Python最让人的喜欢的就是它有丰富的类库和各种第三方的包,而对于这些包的下载.删除等管理操作,就要用到 ...

  10. Print Article /// 斜率优化DP oj26302

    题目大意: 经典题 数学分析 G(a,b)<sum[i]时 a优于b G(a,b)<G(b,c)<sum[i]时 b必不为最优 #include <bits/stdc++.h& ...