不错的CSS特效1

源码分享 · 2024-05-05 17:07

喜欢看网页上那些酷炫的效果吗？这就是CSS的功劳！我整理了一些很棒的CSS特效，让网页看起来更有趣、更生动。这些特效有的简单，有的复杂，但都用的是简单易懂的代码。比如，颜色会慢慢变化的背景，会动的小图标，还有跟着你的鼠标动来动去的效果。这篇文章里，我会和大家分享并展示这些让人看了还想看的CSS特效。快来一起看看吧！

相关文章推荐：不错的CSS特效2

索引

1.动态波纹字
2.静态格栅字
3.旋转的金币
4.霓虹灯文字
5.故障字体效果
6.乱码效果
7.输入框交互效果
8.圆点交互按钮
9.文字上下滑动按钮
10.音频特效
11.文字跳动的输入框
12.暗黑模式切换开关
13.呼吸灯按钮
14.新拟态按钮
15.网站底部徽章样式
16.网站LED灯公告
17.HTML滚动播报

1.动态波纹字

IMG_5511.gif

<!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>
<style>
.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;
  }
}
</style>
  </body>
</html>

2.静态格栅字

IMG_5512.jpeg

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>静态格栅字_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font21" data-text="刘郎阁 欢迎您">刘郎阁<br>欢迎您</div>
    </div>
    </div>
<style>

.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;
}

</style>
  </body>
</html>

3.旋转的金币

IMG_5517.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>旋转的金币_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="icon22">¥</div>
    </div>
<style>
.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);
  }
}

</style>
  </body>
</html>

4.霓虹灯文字

IMG_5521.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
        </div>
        <div class="info23">
          <span>Welcome to yjvc.cn</span>
        </div>
      </div>
    </div>
<style>

.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;
}

</style>
  </body>
</html>

5.故障字体效果

IMG_5534.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>故障字体效果_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font24" data-text="404">404</div>
    </div>
<style>.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);
  }
}
</style>
  </body>
</html>

6.乱码效果

IMG_5536.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>乱码效果_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <div class="font25">YJVC.CN</div>
    </div>
<style>

.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;
  }
}
</style>
  </body>
</html>

7.输入框交互效果

IMG_5539.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<style>

.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;
}

</style>
  </body>
</html>

8.圆点交互按钮

IMG_5542.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<style>

.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;
}

</style>
  </body>
</html>

9.文字上下滑动按钮

IMG_5544.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<style>

.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;
}

</style>
  </body>
</html>

10.音频特效

IMG_5546.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<style>

.app{
  width: 100%;
  height: 50vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-box37{
  width: 84px;
  height: 62px;
  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;
  }

</style>
  </body>
</html>

11.文字跳动的输入框

IMG_5548.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<style>
.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;
}
</style>
  </body>
</html>

12.暗黑模式切换开关

IMG_5550.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
<style>

.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;
}

</style>
  </body>
</html>

13.呼吸灯按钮

IMG_5552.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>呼吸灯按钮_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <button class="btn31">按住说话</button>
    </div>
<style>

.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;
  }
}
</style>
  </body>
</html>

14.新拟态按钮

IMG_5554.gif

<!DOCTYPE html>
<html lang="zh">
  <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>新拟态按钮_刘郎阁</title>
  </head>
  <body>
    <div class="app">
      <button class="btn32">FUN</button>
    </div>
<style>
.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);
}
</style>
  </body>
</html>

15.网站底部徽章样式

IMG_5555.jpeg

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网站底部徽章样式_刘郎阁</title>
</head>
<body>
    <style>
/*底部页脚css*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #ffa500;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-fen {
  background-color: #e76dcb
}
.github-badge .bg-red {
  background-color: #f55066
}
.github-badge .bg-green {
  background-color: #3bca6e
}
.github-badge .bg-bei {
  background-color: #32CD32
}

.github-badge .bg-cai {
    background-image: -webkit-linear-gradient(
0deg, #3ca5f6 0%, #a86af9 100%);
</style>

<div class="github-badge">
  <span class="badge-subject">名称</span>
  <a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-red">yjvc.cn</span></a>
</div>

<div class="github-badge">
  <span class="badge-subject">名称</span>
  <a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-fen">yjvc.cn</span></a>
</div> 

<div class="github-badge">
  <span class="badge-subject">黔ICP备</span>
  <a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-bei">666666号-1</span></a>
</div> 

<div class="github-badge">
  <span class="badge-subject">网站运行</span>
  <a style="color:#fff" href="#" rel="external nofollow"  target="_blank">
    <span class="badge-value bg-cai"><SPAN id=span_dt_dt style="color: #b5c4c3;"></SPAN> <SCRIPT language=javascript>function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("5/5/2023 16:34:13");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#00ffff>'+daysold+' 天</font> <font style=color:#00ffff>'+hrsold+' 时</font> <font style=color:#00ffff>'+minsold+' 分</font> <font style=color:#00ffff>'+seconds+' 秒</font>';
}
show_date_time();</script></span></a>
</div>
</body>
</html>

16.网站LED灯公告

效果预览

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站LED灯公告_刘郎阁</title>
</head>
<body>
        <div style="margin:0 auto; overflow: hidden;width: 100%;font-size:21px;font-weight:bold;border: dashed 2px #999;color: red;vertical-align: middle;line-height: 30px;background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAACJCAIAAACege6hAAAAl0lEQVRIie3PMQ7EIAwEwAXDopAmD4jy/4fxAwJSHFCuOOm6tFfZ1VbeHcQYAZAE8AsxRgcgpbTv+7quAFprpZTruoTkcRzbtjnnvPfLsqSUzvMMqppznnN+f973nXNWVY+X8yR77yIyxhhjiEjvnaTMOVtrJEMIz/PUWkspqoq3ua8d5jCHOcxhDnOYwxzmMIc5zPEvxwfkpZxZE+b6hQAAAABJRU5ErkJggg==');">
<marquee scrollamount="3" scrolldelay="1" direction="left">
公告：刘郎阁 YJVC.CN 欢迎大家光临寒舍！
</marquee></div>
</body>
</html>

17.HTML滚动播报

IMG_5722.gif

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML滚动播报 刘郎阁</title>
</head>
<body>
  <div class="textwidget custom-html-widget">
  <aside id="php_text-8" 
  class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  <div class="textwidget widget-text">
    <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;
    line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1 
    div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}
    .flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
    show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1">

<div class="container-box-1-1"> 欢迎来到刘郎阁！ </div>

<div id="flip-box-1"><div><div class="flip-box-1-1">源代码中寻快乐，</div>

</div><div><div class="flip-box-1-2">实用好玩花样多。</div></div>

<div><div class="flip-box-1-3">新鲜资源眼前过，</div></div><div>

  <div class="flip-box-1-4">技术分享共切磋。</div></div>

  <div><div class="flip-box-1-5"> 奇思妙想灵感落，</div></div>

<div><div class="flip-box-1-6">知识宝库用心掘。</div></div>

</div><div class="container-box-1-2">刘郎阁里收获多！</div>

</div></div>
<div class="clear"></div>
</aside></div>
</section>
</body>
</html>

以上方法(部分)来自满心记、六月是只猫。

完！

GIF图 特效 组件 优化 源码分享

上一篇 : 关于折腾服务器这件事

下一篇 : 图像转Base64代码


  1. null   访客
    回复
    2024-05-09 14:35 第13楼 中国福建省福州市电信Windows 10 · Google Chrome

    不错哦

  2. 肖寒武   Lv1
    回复
    2024-05-07 14:18 第12楼 中国浙江省杭州市联通Windows 10 · Google Chrome

    非常好代码，使我的博客旋转，爱来自湖的西边。

  3. 揽星   访客
    回复
    2024-05-06 18:49 第10楼 中国江苏省盐城市移动Windows 10 · Google Chrome

    好，是时候使用Ctrl CV了

    1. 刘郎   博主
      回复
      2024-05-06 18:51 第11楼 中国贵州省移动iPhone · Safari
      @揽星

      食用愉快😎

  4. 胖氪笔记   Lv1
    回复
    2024-05-06 11:10 第7楼 中国安徽省安庆市电信Windows 10 · Google Chrome

    这么高产的嘛🤣

    1. 刘郎   博主
      回复
      2024-05-06 11:11 第8楼 中国贵州省移动iPhone · Safari
      @胖氪笔记

      必须的，好东西要第一时间分享

      1. 胖氪笔记   Lv1
        回复
        2024-05-06 11:12 第9楼 中国安徽省安庆市电信Windows 10 · Google Chrome
        @刘郎

        优秀优秀👍

  5. 二次寒树   访客
    回复
    2024-05-06 00:49 第4楼 中国山西省移动Android · Google Chrome

    有趣的内容，感谢让我想到新的分区“网页源码”

    1. 刘郎   博主
      回复
      2024-05-06 05:28 第5楼 中国贵州省移动iPhone · Safari
      @二次寒树

      😎

  6. LiuShen   Lv1
    回复
    2024-05-05 23:12 第3楼 中国湖北省武汉市联通Windows 10 · Google Chrome

    哇塞，回头试试

    1. 刘郎   博主
      回复
      2024-05-06 05:28 第6楼 中国贵州省移动iPhone · Safari
      @LiuShen

      😎

  7. obaby   Lv1
    回复
    2024-05-05 17:38 第1个脚印 中国山东省青岛市联通Windows 10 · Google Chrome

    徽章这个有点意思~~

    1. 刘郎   博主
      回复
      2024-05-05 17:40 第2楼 中国移动iPhone · Safari
      @obaby

      美中不足的是和Github那玩意儿差点意思

| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 2 人在线 |
本站已加入BLOGS·CN
yjvc.cn
博友圈 星球穿梭
开往-友链接力