满心记 我在人间混日子

创意CSS合辑二：轻松实现多种有趣效果

作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。

相信有了以下示例，很多不会css动画效果的朋友，也就会了

弹跳的圆

使用伪选择器 :before 和 :after ，并配合 animation 属性并设置 transform 变形参数，实现一个圆不停的弹跳的效果。

实现思路：

  1. 主体一个 div 标签
  2. 用伪选择器 :before 和 :after 分别画两个圆，一个作为主体弹跳圆形，一个作为其阴影部分，分别设置 animation 动画参数，注意这里设置了反向播放参数 alternate
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>弹跳的圆</title>
  </head>
  <body>
    <div class="app">
      <div class="yuan19"></div>
    </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.yuan19{
  width: 20px;
  height: 66px;
  position: relative;
}
.yuan19:before{
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #333;
  animation: yuan191 .5s ease infinite alternate;
}
@keyframes yuan191 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.5);
  }
  50% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }
  100% {
    top: 0;
  }
}
.yuan19:after{
  content: '';
  width: 20px;
  height: 4px;
  border-radius: 50%;
  position: absolute;
  top: 62px;
  animation: yuan1912 .5s ease infinite alternate;
}
@keyframes yuan1912 {
  0% {
    filter: blur(1px);
    transform: scaleX(1.5);
    background-color: rgba(0,0,0,0.9);
  }
  50% {
    transform: scaleX(1);
    background-color: rgba(0,0,0,0.6);
  }
  100% {
    filter: blur(2px);
    transform: scaleX(0.5);
    background-color: rgba(0,0,0,0.3);
  }
}

动态的波纹字

使用 linear-gradient 拉出网格渐变，然后通过 animation 参数来改变 background-size 数据，形成不停变化的纹理效果。

实现思路：

  1. 主体一个 div 标签
  2. 用 background-image: linear-gradient(...) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再设置 animation 的参数，修改 background-size 参数实现纹理不停变化
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>动态的波纹字</title>
  </head>
  <body>
    <div class="app">
      <div class="font20">不就是<br>玩嘛！</div>
    </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font20{
  color: transparent;
  font-size: 70px;
  font-weight: 900;
  background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, green 25%, green 50%, #fff 50%, #fff 75%, green 75%, green 100%);
  -webkit-background-clip: text;
  animation: font20 10s ease infinite;
}
@keyframes font20{
  0%{
    background-size: 1px 2px;
  }
  20%{
    background-size: 4px 5px;
  }
  40%{
    background-size: 3px 4px;
  }
  60%{
    background-size: 5px 6px;
  }
  80%{
    background-size: 2px 3px;
  }
  100%{
    background-size: 7px 6px;
  }
}

好看的格栅字

先绘制出渐变网格的文字效果，再利用 :before 以及搭配 content + attr(...)实现一个好看的网格阴影的文字

实现思路：

  1. 一个 div 标签，添加 data-text
  2. 用 background-image: linear-gradient(...) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再使用 content + attr(...) 并让其覆盖到网格文字上面，形成视觉阴影效果

此效果应该算是上一个的姊妹篇，可适用于内容的大标题等场景

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>好看的网格阴影文字</title>
  </head>
  <body>
    <div class="app">
      <div class="font21" data-text="不就是玩嘛">不就是<br>玩嘛</div>
    </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font21{
  color: transparent;
  font-size: 70px;
  font-weight: 900;
  letter-spacing: 10px;
  background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%);
  background-size: 4px 4px;
  -webkit-background-clip: text;
  position: relative;
}
.font21:before{
  content: attr(data-text);
  letter-spacing: 10px;
  color: green;
  position: absolute;
  top: -6px;
  left: -6px;
  text-shadow: 2px 2px #ffffff;
}

旋转的金币

通过 animation 和 transform 来实现金币的 Y 轴旋转。

实现思路：

  1. 一个 div 标签
  2. 用 box-shadow 实现金币的双层边框，设置 animation 的参数，修改 animation-timing-function 运动参数来实现旋转速度变化，修改 transform 参数让金币绕 Y 轴旋转
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>旋转的金币</title>
  </head>
  <body>
    <div class="app">
      <div class="icon22">¥</div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon22{
  width: 72px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  color: #daa500;
  font-size: 40px;
  font-weight: 900;
  background-color: #ffee00;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #ffee00,inset 0 0 0 5px #daa500,0 5px 12px rgba(0,0,0,0.2);
  animation: ani-icon22 5s ease infinite;
}
@keyframes ani-icon22{
  0%{
    transform: rotateY(0deg);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
  50%{
    transform: rotateY(900deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
  }
  100%{
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
  }
}

一个旋转的金币，适用于游戏网站，会员币等场景。

霓虹灯文字

利用 animation 动画设置关键帧参数，再设置不同的延迟时间，达到一个闪烁的效果。

实现思路：

  1. 页面搭建鸿星尔克品牌名称以及它耳熟能详的的slogan “To Be Number One”
  2. 利用 animation 动画在关键帧中设置不同的显示效果，然后不同的元素设置 animation-delay 加上不同的延迟时间，形成闪烁的视觉效果
  3. 注意：设置 animation 动画时，animation-fill-mode 要设置为 forwards，以使动画执行完后保持在最后的状态不变

此效果可适用于一些文字入口、游戏类网站文字显示效果等场景。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>闪烁的霓虹灯文字</title>
  </head>
  <body>
    <div class="app">
      <div class="light23">
        <div class="title23">
          <span>鸿</span>
          <span>星</span>
          <span>尔</span>
          <span>克</span>
        </div>
        <div class="info23">
          <span>to be number one</span>
        </div>
      </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.light23{
  cursor: default;
}
.title23{
  color: #eaeaea;
  font-size: 32px;
  font-weight: 900;
}
.info23{
  color: #eaeaea;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: capitalize;
}
.light23:hover .title23 span{
  animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){
  animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){
  animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){
  animation-delay: .78s;
}
@keyframes light{
  10%,30%,50%{
    color: #eaeaea;
    text-shadow: none;
  }
  20%,40%,60%{
    color: #318BF6;
    text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
  }
  100%{
    color: #318BF6;
    text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
  }
}
.light23:hover .info23 span{
  animation: light 0.4s ease forwards;
  animation-delay: 1s;
}

故障字体效果

通过 animation 和 transform 来实现一个故障字体效果。

实现思路：

  1. 一个 div 标签，设置 data-text 值
  2. 用 :before 和 :after 生成两个伪元素，设置 mix-blend-mode 混合模式，再分别设置 animation 的参数，让两个伪元素动起来，最后给主体 div 设置一个 transform: skew(...) 变形的 animation 实现视觉上故障的效果

适用于网页404状态等场景应用。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>故障字体效果</title>
  </head>
  <body>
    <div class="app">
      <div class="font24" data-text="404">404</div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font24 {
  width: 156px;
  height: 98px;
  position: relative;
  font-size: 70px;
  font-weight: 900;
  color: transparent;
  letter-spacing: 10px;
  z-index: 10;
  animation: text-skew 4s linear infinite;
}
.font24:before,.font24:after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
}
.font24:before {
  animation: text-light 1s alternate-reverse infinite;
  color: #ff0000;
  z-index: -5;
  text-shadow: 2px 2px 0 #00ff00;
  mix-blend-mode: darken;
}
.font24:after {
  animation: text-light2 0.5s alternate-reverse infinite;
  color: #00ff00;
  z-index: -10;
  text-shadow: 2px 2px 0 #ff0000;
}
@keyframes text-light{
  10% {
    transform: translate(-2px,4px);
  }
  50% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(-4px,4px);
  }
}
@keyframes text-light2{
  0% {
    transform: translate(0,0);
  }
  20% {
    transform: translate(-2px,2px);
  }
  40% {
    transform: translate(-2px,2px);
  }
  60% {
    transform: translate(2px, -2px);
  }
  80% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(0,0);
  }
}
@keyframes text-skew{
  29%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
  30%{
    color: #000000;
    transform: skew(10deg,40deg);
  }
  31%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
  69%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
  70%{
    color: #000000;
    transform: skew(180deg,10deg);
  }
  71%{
    color: transparent;
    transform: skew(0deg,0deg);
  }
}

乱码效果

通过 animation 配合伪元素搭配 content 属性来实现字符变换，实现一段字符不停更换。

实现思路：

  1. 一个 div 标签，div 内文字元素为英文字符最好
  2. 用 :after 配合 content 属性，设置 animation 的参数让 content 内的字符进行变化，实现视觉上一种乱码的效果。这里要注意的是 content 内的字符长度不能超过主体 div 内字符的长度，也是前面为什么说主体 div 内的文字元素最好是英文字符的原因，为的是保持视觉上的统一

适用于网页异常状态等场景应用。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>一串乱码</title>
  </head>
  <body>
    <div class="app">
      <div class="font25">The Bug!</div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font25{
  position: relative;
  font-size: 24px;
  font-weight: 900;
  color: #1630f1;
  letter-spacing: 10px;
  background-color: #ffffff;
}
.font25:after{
  content: '';
  position: absolute;
  top: 0;
  z-index: 10;
  background-color: inherit;
  animation: text-ani25 2.4s linear infinite;
  animation-delay: 2s;
}
@keyframes text-ani25{
  0%{
    content: "$-";
    left: 0;
  }
  5%{
    content: ";y";
    left: 0;
  }
  10%{
    content: "*&#H";
    left: 0;
  }
  15%{
    content: "-!);";
    left: 0;
  }
  20%{
    content: "#$_}-'";
    left: 0;
  }
  25%{
    content: ":0^!$.";
    left: 0;
  }
  30%{
    content: "#{+.-?#u";
    left: 0;
  }
  35%{
    content: "f7*%}-;#";
    left: 0;
  }
  40%{
    content: "^='?'*$!";
    left: 0;
  }
  45%{
    content: "+0^&!`^-";
    left: 0;
  }
  50%{
    content: "&-?>-=|`";
    left: 0;
  }
  55%{
    content: "u<|:#-";
    left: auto;
    right: 0;
  }
  60%{
    content: ";~0![,";
    left: auto;
    right: 0;
  }
  65%{
    content: ")+->";
    left: auto;
    right: 0;
  }
  70%{
    content: "+.=d";
    left: auto;
    right: 0;
  }
  75%{
    content: "&%";
    left: auto;
    right: 0;
  }
  80%{
    content: "`@";
    left: auto;
    right: 0;
  }
  85%{
    content: "-";
    left: auto;
    right: 0;
  }
  90%{
    content: "#";
    left: auto;
    right: 0;
  }
  95%{
    content: "";
    left: 0;
  }
  100%{
    content: "";
    left: 0;
  }
}

加载的花瓣

通过 animation 配合 transform 实现4个圆的变化运动，形成视觉动态。

实现思路：

  1. 4个 div 绘制4个圆形
  2. 每个圆形设置不同的 animation 参数，让每个圆形都渐渐变化成带一个角的；然后给4个圆的父元素 div 设置 animation 参数，在关键帧中设置 transform 属性，让整体旋转、放大、缩小

适用于各种加载、刷新等状态的场景。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>加载的圆</title>
  </head>
  <body>
    <div class="app">
      <div class="loading26">
        <span class="round26"></span>
        <span class="round26"></span>
        <span class="round26"></span>
        <span class="round26"></span>
      </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading26{
  width: 90px;
  height: 90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  animation: loading26-eff 3s linear infinite;
}
@keyframes loading26-eff{
  0%{
    transform: scale(1) rotate(0);
  }
  20%{
    transform: scale(1) rotate(72deg);
  }
  40%{
    transform: scale(0.5) rotate(144deg);
  }
  60%{
    transform: scale(0.5) rotate(216deg);
  }
  80%{
    transform: scale(1) rotate(288deg);
  }
  100%{
    transform: scale(1) rotate(360deg);
  }
}
.round26{
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 20px 20px 20px 20px;
  box-sizing: border-box;
}
.round26:nth-of-type(1){
  background-color: #50DE68;
  animation: round-eff261 3s linear infinite;
}
.round26:nth-of-type(2){
  background-color: #3DC453;
  animation: round-eff262 3s linear infinite;
}
.round26:nth-of-type(3){
  background-color: #14BE71;
  animation: round-eff263 3s linear infinite;
}
.round26:nth-of-type(4){
  background-color: #78DE35;
  animation: round-eff264 3s linear infinite;
}
@keyframes round-eff261{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 20px 0 20px;
  }
  60%{
    border-radius: 20px 20px 0 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff262{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 20px 20px 0;
  }
  60%{
    border-radius: 20px 20px 20px 0;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff263{ 
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 20px 0 20px 20px;
  }
  60%{
    border-radius: 20px 0 20px 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}
@keyframes round-eff264{
  0%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  20%{
    border-radius: 20px 20px 20px 20px;
  }
  40%{
    border-radius: 0 20px 20px 20px;
  }
  60%{
    border-radius: 0 20px 20px 20px;
  }
  80%{
    border-radius: 20px 20px 20px 20px 20px;
  }
  100%{
    border-radius: 20px 20px 20px 20px 20px;
  }
}

输入框交互效果

利用 flex 布局，然后利用 css 选择器来实现鼠标悬浮、点击等状态的交互效果。

实现思路：

  1. label 搭配 input ，然后 input 设置 required 来判断非空状态
  2. 利用 flex 布局，设置 justify-content: flex-end; 让输入框变高时，自动撑起提示文本。通过 :hover 、:foucus 、:valid 来判断鼠标状态，然后变化成不同的样式来实现交互的效果

此效果可适用于小表单、或者登录注册表单等场景。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>输入框交互</title>
  </head>
  <body>
    <div class="app">
      <label class="label28">
        <span class="span28">用户名</span>
        <input class="inp28" type="text" required>
      </label>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label28{
  width: 190px;
  height: 68px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: text;
}
.span28{
  width: 100%;
  color: #000;
  font-size: 14px;
  margin-bottom: 6px;
  padding: 0 10px;
}
.inp28{
  width: 100%;
  padding: 0 10px;
  height: 2px;
  border: 0;
  font-size: 14px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.1);
  transition: .3s;
}
.inp28:hover{
  background-color: rgba(50,133,255,0.7);
}
.inp28:focus,.inp28:valid{
  background-color: rgba(50,133,255,0.2);
  border: 2px solid rgba(50,133,255,0.7);
  border-radius: 4px;
  height: 42px;
  color: #000;
}

圆点交互

:hover 获取鼠标状态，当鼠标悬浮上方时，改变背景样式来实现鼠标的交互。

实现思路：

  1. 两个span 搭建按钮主体
  2. 当鼠标悬浮时，改变圆形 span 的参数，并且加上 transition 过渡效果，来实现圆形变成矩形背景的交互的效果

此效果适用于文字按钮，也可以用于标记文字链接的地方，可以让鼠标与文字有一个有意思的交互效果。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>圆点交互按钮</title>
  </head>
  <body>
    <div class="app">
      <div class="btn29">
        <span class="btn29-bg"></span>
        <span class="btn29-span-text">查看详情</span>
      </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn29{
  width: 100px;
  height: 42px;
  line-height: 42px;
  position: relative;
  cursor: pointer;
}
.btn29-bg{
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 15px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #97E138;
  transition: 0.24s;
}
.btn29-span-text{
  width: 100%;
  text-align: center;
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #056C00;
  position: absolute;
}
.btn29:hover .btn29-bg{
  width: 100%;
  height: 42px;
  border-radius: 21px;
}

文字上下滑动按钮

当鼠标悬浮按钮上方时，利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果。

实现思路：

  1. 一个 div 父元素，及其子元素span ，形成一个大按钮
  2. 每个 span 添加其伪元素 :after ，并通过 content 属性插入文本，然后通过定位让其每个伪元素放到其上或下的位置，通过 :hover 获取鼠标状态，当鼠标悬浮在按钮上方时，改变其伪元素的定位，利用 transition 过渡效果，来让其伪元素上下滑入滑出，实现按钮块上下滑动的的交互效果

此效果适用于较大的按钮入口，如主页banner处按钮，也可以放在当作首屏当作一个大banner作为视觉效果等场景。

  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>文字上下滑动按钮</title>
  </head>
  <body>
    <div class="app">
      <div class="btn30">
        <span class="btn-text30">探</span>
        <span class="btn-text30">索</span>
        <span class="btn-text30">未</span>
        <span class="btn-text30">知</span>
      </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn30{
  height: 42px;
  position: relative;
  cursor: pointer;
  display: flex;
  overflow: hidden;
}
.btn-text30{
  width: 36px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  display: block;
  background-color: #457356;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}
.btn-text30:after{
  width: 36px;
  height: 42px;
  position: absolute;
  background-color: #3185fa;
  color: #ffffff;
  z-index: 99;
  transition: 0.3s ease-in-out;
}
.btn-text30:nth-of-type(1):after{
  content: '学';
  top: -42px;
  left: 0;
}
.btn-text30:nth-of-type(2):after{
  content: '无';
  top: 42px;
  left: 0px;
}
.btn-text30:nth-of-type(3):after{
  content: '止';
  top: -42px;
  left: 0;
}
.btn-text30:nth-of-type(4):after{
  content: '境';
  top: 42px;
  left: 0px;
}
.btn30:hover .btn-text30:after{
  top: 0;
}

呼吸灯按钮

模拟微信发送语音按钮，在按住按钮时增加呼吸灯效果。

实现思路：

  1. 主体一个 button 标签
  2. 通过 :hover 和 :active 获取状态，分别设置不同的样式，当按钮按下时，增加 animation 动画并设置参数，让按钮阴影产生变化来实现呼吸灯效果
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>呼吸灯按钮</title>
  </head>
  <body>
    <div class="app">
      <button class="btn31">按住说话</button>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn31{
  width: 190px;
  height: 42px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #333;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: 0.3s;
}
.btn31:hover{
  background-color: #3185fa;
}
.btn31:active{
  animation: btn31-eff 3s linear infinite;
}
@keyframes btn31-eff{
  0%{
    box-shadow: 0 0 2px #3185fa;
  }
  50%{
    box-shadow: 0 0 40px #3185fa;
  }
  100%{
    box-shadow: 0 0 2px #3185fa;
  }
}

新拟态按钮

使用 box-shadow 属性模拟新拟态风格按钮，当鼠标 :hover 悬浮时，通过 transition 过渡效果实现阴影变化丝滑过渡。

实现思路：

  1. 主体 button 标签
  2. 给 button 设置 box-shadow 属性，设置外阴影和内阴影，然后 button 按钮增加 transition 属性，当鼠标悬浮在上方时，改变按钮的外阴影和内阴影参数，实现阴影的变化过渡
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>新拟态按钮</title>
  </head>
  <body>
    <div class="app">
      <button class="btn32">FUN</button>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #d1d1d1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn32{
  height: 70px;
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 10px;
  background-color: #f2fff7;
  font-size: 32px;
  font-weight: 700;
  color: #44d431;
  box-shadow: 6px 6px 16px rgba(0,0,0,0.2),-6px -6px 16px rgba(255,255,255,0.8),inset 0px 0px 0px rgba(0,0,0,0.2),inset 0px 0px 0px rgba(255,255,255,0.8);
  transition: 0.2s;
}
.btn32:hover{
  color: #3034d4;
  background-color: #f2f3ff;
  border: 1px solid rgba(255,255,255,1);
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2),0px 0px 0px rgba(255,255,255,0.8),inset 6px 6px 12px rgba(0,0,0,0.2),inset -6px -6px 12px rgba(255,255,255,0.8);
  transform: translateY(10px) scale(0.98);
}

暗黑模式切换开关

用css打造一个切换界面暗黑模式的按钮开关。

实现思路：

  1. 用 label 和 input 标签绘制开关按钮，span 标签绘制简约的月亮和太阳图标
  2. 通过 :checked 属性选择器获取开关的状态，利用 span 标签通过 box-shadow 属性来实现月亮和太阳图标，然后通过 transition 过渡属性来实现开关时月亮和太阳图标的过渡变化，给人视觉上开关的效果
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>暗黑模式切换开关</title>
  </head>
  <body>
    <div class="app">
      <label class="label34">
        <input class="inp34" type="checkbox">
        <span class="check-span34"></span>
      </label>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label34{
  width: 60px;
  height: 32px;
  position: relative;
  cursor: pointer;
}
.inp34{
  display: none;
}
.check-span34{
  width: 100%;
  height: 100%;
  display: block;
  background-color: #383838;
  border: 2px solid #383838;
  box-sizing: border-box;
  border-radius: 16px;
  transition: 0.3s linear;
}
.check-span34:after{
  content: '';
  width: 22px;
  height: 22px;
  background-color: #383838;
  box-shadow: inset -8px -4px 0 #ffffff;
  border-radius: 11px;
  position: absolute;
  top: 5px;
  left: 6px;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
  background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
  transform: translateX(26px);
  background-color: orange;
  box-shadow: none;
}

文字跳动的输入框

当输入框获取焦点准备输入时，让输入框内提示文字跳起来的交互效果。

实现思路：

  1. 主体 label 和 input 标签，span 标签是模拟输入框内提示文字内容
  2. 通过 ::focus 和 :valid 伪选择器获取输入框的状态， 给span 标签增加 transition 过渡属性，并且给单独的文字 span 标签添加 transition-delay 属性，分别设置不同的延迟参数，实现每个单独的提示文字依次跳起来的视觉效果
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>提示文字跳起来的输入框</title>
  </head>
  <body>
    <div class="app">
      <label class="label35">
        <input class="inp35" type="text" required>
        <span class="span35-box">
          <span class="span35-info">用</span>
          <span class="span35-info">户</span>
          <span class="span35-info">名</span>
        </span>
      </label>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label35{
  width: 180px;
  position: relative;
  cursor: text;
}
.inp35{
  width: 100%;
  padding: 0 10px;
  height: 42px;
  border: 0;
  border-bottom: 2px solid #414141;
  font-size: 16px;
  outline: none;
  box-sizing: border-box;
  transition: .3s;
}
.span35-box{
  width: 100%;
  padding: 0 10px;
  color: #aaa;
  font-size: 16px;
  position: absolute;
  top: 9px;
  box-sizing: border-box;
  display: flex;
}
.span35-info{
  transition: .3s cubic-bezier(0.5, -0.5, 0.5, 1.5);
}
.span35-info:nth-of-type(2){
  transition-delay: 100ms;
}
.span35-info:nth-of-type(3){
  transition-delay: 200ms;
}
.inp35:focus + .span35-box .span35-info,.inp35:valid + .span35-box .span35-info{
  color: #3034d4;
  transform: translateY(-30px);
}
.inp35:focus,.inp35:valid{
  border-bottom: 2px solid #3034d4;
}

音频小特效

使用 css3 animation 动画属性模拟实现一个音频节奏变化的小动效。

实现思路：

  1. 用7个 div 标签，绘制音频节奏谱
  2. 7个 div 基于 flex 布局，进行底部对齐，让7个 div 标签变化时从底部往上进行高度的变化，然后基于 animation 属性，再设置不同的延迟时间及动画时长，让7个 div 标签在视觉上实现不同的变化频率
  • Html部分
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>音频小动效</title>
  </head>
  <body>
    <div class="app">
      <div class="audio-box37">
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
        <div class="audio37-block"></div>
      </div>
    </div>
  </body>
</html>
  • CSS部分
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-box37{
  width: 84px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.audio37-block{
  width: 6px;
  box-sizing: border-box;
  background-color: #97E138;
  animation: audio73-eff 2s linear infinite;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138;
}
.audio37-block:nth-of-type(2){
  background-color: #FF3A85;
  animation-delay: .3s;
  animation-duration: 2.4s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85;
}
.audio37-block:nth-of-type(3){
  background-color: #A2DAF6;
  animation-delay: .38s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6;
}
.audio37-block:nth-of-type(4){
  background-color: #FFD6D0;
  animation-delay: .5s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0;
}
.audio37-block:nth-of-type(5){
  background-color: #FF472C;
  animation-duration: 2.7s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C;
}
.audio37-block:nth-of-type(6){
  background-color: #DE74CE;
  animation-delay: .6s;
  animation-duration: 1.4s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE;
}
.audio37-block:nth-of-type(7){
  background-color: #36AFCA;
  animation-delay: .8s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA;
}
@keyframes audio73-eff{
  0%{
    height: 0;
  }
  50%{
    height: 32px;
  }
  100%{
    height: 0;
  }

发表评论

提交评论