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. Rabbit MQ 客户端 API 开发

    项目开始 第一步首先需要引入对应的 jar 包 <!-- https://mvnrepository.com/artifact/com.rabbitmq/amqp-client --> & ...

  2. solr 启动报错Cannot load analyzer: org.wltea.analyzer.lucene.IKAnalyzer

    schema.xml 配置文件信息: <field name="title" type="text_ik" indexed="true" ...

  3. java执行spark查询hbase的jar包出现错误提示：ob aborted due to stage failure: Master removed our application: FAILED

    执行java调用scala 打包后的jar时候出现异常 /14 23:57:08 WARN TaskSchedulerImpl: Initial job has not accepted any re ...

  4. mysql分区partition详解

    分区管理  论坛 1. RANGE和LIST分区的管理 针对非整形字段进行RANG\LIST分区建议使用COLUMNS分区.  RANGE COLUMNS是RANGE分区的一种特殊类型,它与RANGE ...

  5. MySQL中查询所有数据库占用磁盘空间大小

    查询所有数据库占用磁盘空间大小的SQL语句: 复制代码 代码如下:select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2), ...

  6. SQLite wrapper

    SQLiteWrapper is a C++ wrapper for SQLite. There are some test programs that demonstrate how the SQL ...

  7. Linux课程---15、域名相关

    Linux课程---15.域名相关 一.总结 一句话总结: 先购买域名,再备案,再解析,域名即可使用 1.域名备案是怎么回事(比如二级域名,三级域名)? 每个二级域名需要备案一次,三级域名不需要备案, ...

  8. VS2010-MFC（对话框：文件对话框）

    转自:http://www.jizhuomi.com/software/173.html 一 文件对话框的分类       文件对话框分为打开文件对话框和保存文件对话框,相信大家在Windows系统中 ...

  9. 框架：Flutter（移动应用程序开发框架）

    ylbtech-框架:Flutter(移动应用程序开发框架) Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作. ...

  10. .NETFramework：Exception

    ylbtech-System.Exception.cs 1.返回顶部 1. #region 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, Public ...