1. 效果：

2. 代码：

刘海？

: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: "楷体";

}

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);

3. 好像没什么要说明的

一个常见下拉菜单的样式：一体化小三角(纯css手写解决)

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

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

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

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

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

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

使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创

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

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

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

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

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

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

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

纯CSS样式实现数字加减按钮的最佳方案

前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片——这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片: 2.直接使用“+”“-”——这种方法简单粗暴,最容易实现,缺点 ...

随机推荐

PHP 小数点保留两位

最近在做统计这一块内容,接触关于数字的数据比较多, 用到了三个函数来是 数字保留小数后 N 位: 接下来简单的介绍一下三个函数: 1.number_format echo number_format( ...

poj1182 带权并查集

食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 60225   Accepted: 17656 Description ...

redmine设置

接上篇. 1.redmine新版本已经比较强大了,可以定制所有字段(含标准字段和自定义字段)的读写属性.这里为了避免字段过多影响用户感受,希望增加功能将不相关的字段屏蔽,下载插件Workflow Hi ...

C#点击按钮用DataGridView动态增加行、删除行，增加按钮列

原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

【JS】Beginner2:Variables & Data

1.Variables name :name it in a way that tells what you've stored there value: 2.Create a variable =& ...

MIT scheme入门使用

在win7下可安装MIT-GUN scheme, 点开后有两个界面:一个交互式命令行界面:一个Edwin界面.    在命令行界面按Ctrl-G可以开始输入.在Edwin界面,输入完整命令后按Ctrl ...

根据抽象工厂实现的DBHelpers类

public abstract class DBHelper { public static SqlConnection conn = new SqlConnection("server=l ...

typescript简介

微软作为编译器狂魔一直有一个心病,就是改良JavaScript这种语法超级烂又很多人用的编程语言,于是TypeScript诞生了 先做个对比吧:   TS JS 语法严谨性 严谨 宽松 静态性 静态 ...

C语言的整型溢出问题 int、long、long long取值范围 最大最小值

类型名称 字节数 取值范围 signed char 1 -128-+127 short int 2 -32768-+32767 int 4 -2147483648-+2147483647 long i ...

BETA 版冲刺前准备

任务博客 组长博客 总的来讲Alpha阶段我们计划中的工作是如期完成的.不过由于这样那样的原因,前后端各个任务完成度不算非常高,距离完成一个真正好用.完美的软件还有所差距. 过去存在的问题 测试工作未 ...