设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 4个高颜值的HTML+CSS效果
返回列表 发新帖
查看: 171|回复: 0

4个高颜值的HTML+CSS效果

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-11-23 16:55:10 | 显示全部楼层 |阅读模式
第一个背景颜色流动效果

预览效果

111.gif
源码

  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>流动效果</title>
  9.     <style>
  10.         .bg {
  11.             margin: 60px;
  12.             width: 32%;
  13.             height: 48vh;
  14.             background: linear-gradient(-45deg, #fad0c4, #fad0c4, #eff0fa, #ff9569, #e92758);
  15.             background-size: 200% 200%;
  16.             animation: gradient 8s ease infinite;
  17.         }

  19.         @keyframes gradient {

  21.             0%,
  22.             100% {
  23.                 background-position: 0 0;
  24.             }

  26.             25% {
  27.                 background-position: 100% 0;
  28.             }

  30.             50% {
  31.                 background-position: 100% 100%;
  32.             }

  34.             75% {
  35.                 background-position: 0 100%;
  36.             }
  37.         }
  38.     </style>
  39. </head>

  41. <body>
  42.     <div class="bg"></div>
  43. </body>

  45. </html>
复制代码
第二个文字颜色跑马灯：

预览效果

111.gif


源码

  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>渐变流光效果</title>
  7.     <style>
  8.         h1 {
  9.             background: -webkit-linear-gradient(135deg, #69EACB, #EACCF8 25%, #6654F1 50%, #EACCF8 55%, #69EACB 60%, #6654F1 80%, #EACCF8 95%, #69EACB);
  10.             /* 文字颜色填充设置为透明 */
  11.             -webkit-text-fill-color: transparent;
  12.             /* 背景裁剪，即让文字使用背景色 */
  13.             -webkit-background-clip: text;
  14.             /* 背景图放大一下，看着柔和一些 */
  15.             -webkit-background-size: 200% 100%;
  16.             /* 应用动画flowCss 12秒速度 无限循环 线性匀速动画*/
  17.             -webkit-animation: flowCss 12s infinite linear;
  18.         }

  20.         @-webkit-keyframes flowCss {
  21.             0% {
  22.                 /* 移动背景位置 */
  23.                 background-position: 0 0;
  24.             }

  26.             100% {
  27.                 background-position: -400% 0;
  28.             }
  29.         }

  31.         h1:hover {
  32.             -webkit-animation: flowCss 4s infinite linear;
  33.         }
  34.     </style>
  35. </head>

  37. <body>
  38.     <h1>文字颜色渐变流光效果</h1>
  39. </body>

  41. </html>
复制代码
第三个文字消散效果：

预览效果

111.gif


源码
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .wrap {
  11.             width: 600px;
  12.             height: 480px;
  13.             box-sizing: border-box;
  14.             padding: 120px;
  15.             background-color: #000;
  16.             color: transparent;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             flex-wrap: wrap;
  21.         }

  23.         h3 {
  24.             text-shadow: 0 0 0 #fff;
  25.             animation: smoky 6s infinite;
  26.             margin: 10px;
  27.         }

  29.         @keyframes smoky {
  30.             60% {
  31.                 text-shadow: 0 0 40px #fff;
  32.             }

  34.             100% {
  35.                 text-shadow: 0 0 20px #fff;
  36.                 transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skew(70deg) scale(1.5);
  37.                 opacity: 0;
  38.             }
  39.         }

  41.         h3:nth-child(1) {
  42.             animation-delay: 2s;
  43.         }

  45.         h3:nth-child(2) {
  46.             animation-delay: 2.4s;
  47.         }

  49.         h3:nth-child(3) {
  50.             animation-delay: 2.8s;
  51.         }

  53.         h3:nth-child(4) {
  54.             animation-delay: 3.2s;
  55.         }

  57.         h3:nth-child(5) {
  58.             animation-delay: 3.6s;
  59.         }
  60.     </style>
  61. </head>

  63. <body>
  64.     <div class="wrap">
  65.         <h3>前端</h3>
  66.         <h3>修仙</h3>
  67.         <h3>牛马</h3>
  68.         <h3>之路</h3>
  69.         <h3>加油!!!!</h3>
  70.     </div>
  71. </body>

  73. </html>
复制代码
第四个动态发光文字效果

预览效果

111.gif


源码

  1. <!DOCTYPE html>
  2. <html lang="zh">

  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>动态发光文字效果</title>
  7.     <style>
  8.         .app {
  9.             width: 100%;
  10.             height: 100vh;
  11.             background-color: #000;
  12.             position: relative;
  13.             display: flex;
  14.             justify-content: center;
  15.             align-items: center;
  16.         }

  18.         .dynamic-text {
  19.             width: 166px;
  20.             height: 40px;
  21.             position: relative;
  22.             display: flex;
  23.             cursor: default;
  24.         }

  26.         .default-text,
  27.         .hover-text {
  28.             font-size: 2em;
  29.             font-family: Arial, Helvetica, sans-serif;
  30.             font-weight: 600;
  31.             color: #ffffff;
  32.             letter-spacing: 3px;
  33.             position: absolute;
  34.         }

  36.         .hover-text {
  37.             width: 0;
  38.             border-right: 4px solid pink;
  39.             overflow: hidden;
  40.             transition: all 0.3s linear;
  41.         }

  43.         .dynamic-text:hover .hover-text {
  44.             width: 100%;
  45.             color: pink;
  46.             box-shadow: 0 0 60px pink;
  47.             text-shadow: 0 0 24px pink;
  48.             animation: text-eff-87 1.8s linear infinite;
  49.             animation-delay: 0.3s;
  50.         }

  52.         @keyframes text-eff-87 {
  53.             0% {
  54.                 box-shadow: 0 0 60px pink;
  55.                 text-shadow: 0 0 24px pink;
  56.             }

  58.             50% {
  59.                 box-shadow: 0 0 30px pink;
  60.                 text-shadow: 0 0 12px pink;
  61.             }

  63.             100% {
  64.                 box-shadow: 0 0 60px pink;
  65.                 text-shadow: 0 0 24px pink;
  66.             }
  67.         }
  68.     </style>
  69. </head>

  71. <body>
  72.     <div class="app">
  73.         <div class="dynamic-text">
  74.             <span class="default-text">&nbsp;SCIENCE &nbsp;</span>
  75.             <span class="hover-text">&nbsp;SCIENCE&nbsp;</span>
  76.         </div>
  77.     </div>
  78. </body>

  80. </html>
复制代码


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表