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. MySQL基础管理

    1.用户管理 1.用户的作用: 登录:管理相对应的库表 2.定义 定义用户名和白名单 all@'10.0.0.%' 命名用户名时,最好不要太长,要和业务相关 白名单类型: user@'10.0.0.5 ...

  2. Zookeeper怎么实现分布式锁？

    对访问资源 R1 的过程加锁,在操作 O1 结束对资源 R1 访问前,其他操作不允许访问资源 R1.以上算是对独占锁的简单定义了,那么这段定义在 Zookeeper 的"类 Unix/Lin ...

  3. USACO2007 Protecting the Flowers /// 比值 前缀和 oj21161

    题目大意: 有N (2 ≤ N ≤ 100,000) 头牛偷吃花 将牛赶回牛棚需Ti minutes (1 ≤ Ti ≤ 2,000,000) 每头牛每分钟能吃Di (1 ≤ Di ≤ 100) 朵花 ...

  4. TCP/IP协议,，OSI的七层参考模型，HTTP请求响应机制

    一.TCP/IP协议 TCP/IP是Transmission Control Protocol/Internet Protocol的简写,中译名为传输控制协议/因特网互联协议,又名网络通讯协议,是In ...

  5. Go, JS和Websocket

    JS中建立Websocket连接 var ws = new WebSocket("ws://hostname/path", ["protocol1", &quo ...

  6. element-ui 框架中使用 NavMenu 导航菜单组件时，点击一个子菜单会出现多个子菜单同时展开或折叠？

    我在使用 elment-ui 框架的导航组件时,直接粘贴复制了官网上 (http://element-ui.cn/#/zh-CN/component/menu)的例子不会出错,但是当我将他们转化为动态 ...

  7. 廖雪峰Java16函数式编程-2Stream-6reduce

    1. 聚合方法 Stream.reduce()是一个Stream的聚合方法:把一个Stream的所有元素聚合成一个结果 例如: Stream.of(1, 2, 3, 4, 5).count(); // ...

  8. 登录操作（方法一：设置flag标志位）

    登录操作(方法一:设置flag标志位) user_name="star"passwoed='123'passed_authentication=Falsecount=0for i ...

  9. jQuery ajax - post() 方法

    实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("i ...

  10. 单独编译和使用webrtc音频降噪模块(附完整源码+测试音频文件)

    单独编译和使用webrtc音频增益模块(附完整源码+测试音频文件) 单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件) webrtc的音频处理模块分为降噪ns,回音消除aec,回声 ...