Shinkai005

V1

2022/05/07阅读:19主题:红绯

css实现荧光按钮

css实现荧光按钮.md

很久没写css了,这次脚把脚教学

特色

1.缩写

2.用到的知识都放在附录,小笨蛋都能懂系列

3.每个可能不知道的玩意的注释

4.用了不同的居中方式~

pre知识:

grid布局

flex 布局

place-items

步骤:

1.先实现button

这块有个快捷方法,vscode和webstorm亲测都可行

image-20220507152530181
image-20220507152530181

显示结果如下:

image-20220507152626140
image-20220507152626140

2.准备部分

<div class="center">
      <div class="outer button">
        <button>Hover me</button>
        <span></span>
        <span></span>
      </div>
      <div class="outer circle">
        <button>Hover me</button>
        <span></span>
        <span></span>
      </div>
    </div>
image-20220507153349959
image-20220507153349959

上面代码好好看~ 主要是类名.

两个按钮共有的类名是outer, 分开的是button和circle

都包含两个span标签

3.去默认样式

* {
  margin0;
  padding0;
  box-sizing: border-box;
}

4.位置居中

* {
  margin0;
  padding0;
  box-sizing: border-box;
}
html,
body {
  /* dg */
  display: grid;
  /* h100% */
  height100%;
  /* pi: center */
  /* 居中 */
  place-items: center;
  /* bg */
  background#000;
}
image-20220507191012913
image-20220507191012913

4.1把两个按钮水平放置

* {
  margin0;
  padding0;
  box-sizing: border-box;
}
html,
body {
  /* dg */
  display: grid;
  /* h100% */
  height100%;
  /* pi: center */
  /* 居中 */
  place-items: center;
  /* bg */
  background#000;
}
.center {
  /* df */
  display: flex;
  /* tac */
  text-align: center;
  /* aic */
  align-items: center;
  /* jcc */
  justify-content: center;
}
image-20220507190859284
image-20220507190859284

目前body高度100%宽度是两个div撑开的.

4.2上样式和颜色

.outer {
  /* por */
  position: relative;
  margin0 50px;
  background#111;
}
.button {
  height70px;
  width220px;
  /* brs50 */
  border-radius50px;
}
.circle {
  height200px;
  width200px;
  /* brs50 */
  border-radius50%;
}
image-20220507191216661
image-20220507191216661

.outer设置的是两个公有的

分开设置是单个.

5.span居中

.outer button,
.outer span {
  /* poa */
  position: absolute;
  /* t50% */
  top50%;
  left50%;
  transformtranslate(-50%, -50%);
}

用了3种不同的居中方式了

image-20220507164432570
image-20220507164432570

6.最终字体样式设置

/* 字体样式 */
.outer button {
  /* bgc */
  background-color#111;
  /* c#f2f2f2f2 */
  color#f2f2f2;
  /* oln */
  outline: none;
  border: none;
  font-size20px;
  z-index9;
  letter-spacing1px;
  /* 大写 */
  text-transform: uppercase;
  cursor: pointer;
}
image-20220507165116856
image-20220507165116856

6.1button样式

6.2circle样式

/* button样式 */
.button button {
  height60px;
  width210px;
  /* brs */
  border-radius50px;
}
.circle button {
  height180px;
  width180px;
  /* brs */
  border-radius50%;
}
image-20220507165438663
image-20220507165438663

7.span样式

.outer span {
  height100%;
  width100%;
  background: inherit;

.button span {
  border-radius50px;
}
.circle span {
  border-radius50%;
}

就是把div上盖了一层span 类似一层蒙版

image-20220507170049994
image-20220507170049994
/* 去除默认样式 */
* {
  margin0;
  padding0;
  box-sizing: border-box;
}
/* 水平垂直居中 */
html,
body {
  /* dg */
  display: grid;
  /* h100% */
  height100%;
  /* pi: center */
  /* 居中 */
  place-items: center;
  /* bg */
  background#000;
}
/* 内部用flex布局 */
.center {
  /* df */
  display: flex;
  /* tac */
  text-align: center;
  /* aic */
  align-items: center;
  /* jcc */
  justify-content: center;
}
/* 样式和颜色 */
.outer {
  /* por */
  position: relative;
  margin0 50px;
  background#111;
}
.button {
  height70px;
  width220px;
  /* brs50 */
  border-radius50px;
}
.circle {
  height200px;
  width200px;
  /* brs50 */
  border-radius50%;
}
/* span居中 */
.outer button,
.outer span {
  /* poa */
  position: absolute;
  /* t50% */
  top50%;
  left50%;
  transformtranslate(-50%, -50%);
}
/* 字体样式 */
.outer button {
  /* bgc */
  background-color#111;
  /* c#f2f2f2f2 */
  color#f2f2f2;
  /* oln */
  outline: none;
  border: none;
  font-size20px;
  z-index9;
  letter-spacing1px;
  /* 大写 */
  text-transform: uppercase;
  cursor: pointer;
}
/* button样式 */
.button button {
  height60px;
  width210px;
  /* brs */
  border-radius50px;
}
.circle button {
  height180px;
  width180px;
  /* brs */
  border-radius50%;
}
/* span类似一个蒙版盖在div上 */
.outer span {
  height100%;
  width100%;
  background: inherit;

.button span {
  border-radius50px;
}
.circle span {
  border-radius50%;
}

代码到这里基本完成,现在会改之前的代码了,

注意

给字体设公共样式z-index,然后给每个span设置filter 滤镜

.outer button {
  /* bgc */
  background-color#111;
  /* c#f2f2f2f2 */
  color#f2f2f2;
  /* oln */
  outline: none;
  border: none;
  font-size20px;
  z-index9;
  letter-spacing1px;
  /* 大写 */
  text-transform: uppercase;
  cursor: pointer;
}

其实就是让button悬浮到span上.

(我试了加哪里都无所谓)

/* 第一个span */
.outer:hover span:nth-child(1) {
  filterblur(7px);
}
.outer:hover span:nth-child(2) {
  filterblur(14px);
}

双span的意义就出来了, 叠加的位置更亮,远的地方会暗

image-20220507170928886
image-20220507170928886

动画

/* 加动画 */
.outer:hover {
  background-imagelinear-gradient(#14ffe9, #ffeb3b, #ff00e0);
  animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
  0% {
    filterhue-rotate(0deg);
  }
  100% {
    filterhue-rotate(360deg);
  }
}
image-20220507171427544
image-20220507171427544

hover以后才展示动画

因为展示动画才叫亮灯...so 光晕也要设置hover

初始背景改黑,也就是渐变色改成黑色

Background 设置渐变色,内部是在background-image上设置的不是background-color.

附录

grid布局

参考:菜鸟教程runoob.com

标签定义及使用说明

grid 是一个 CSS 所有网格容器的简写属性,可以用来设置以下属性:

  • 显式网格属性: grid-template-rows、grid-template-columns 和 grid-template-areas。
  • 隐式网格属性: grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
  • 间距属性: grid-column-gap 和 grid-row-gap。

vscode 文件对比

image-20220507163819437
image-20220507163819437
image-20220507163842872
image-20220507163842872
image-20220507163850152
image-20220507163850152

css选择器

image-20220507193704962
image-20220507193704962
image-20220507193723467
image-20220507193723467

KeyFrame

使用@keyframes规则,你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。

指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

分类:

前端

标签:

CSS

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai