设为首页收藏本站
乐享社区»社区板块 › 建站资源 › 网页代码 › 查看内容

九宫格广告位代码

小乐
  • 打卡等级：偶尔看看
  • 打卡总天数：8
  • 打卡月天数：0
  • 打卡总奖励：18
  • 最近打卡：2024-10-16 19:11:21

39

主题

6

回帖

163

积分

官方

积分
163
显示全部楼层
演示图:
Screenshot_2024_1001_122347.png

代码:
  1. <style>
  2.         body {
  3.             display: flex;
  4.             justify-content: center;
  5.             align-items: center;
  6.             height: 100vh;
  7.             margin: 0;
  8.             background-color: #f0f0f0;
  9.         }

  11.         .grid-container {
  12.             display: grid;
  13.             grid-template-columns: repeat(3, 1fr);
  14.             grid-gap: 10px;
  15.             width: 80%;
  16.             max-width: 600px;
  17.         }

  19.         .grid-item {
  20.             background: -webkit-linear-gradient(left,
  21.                 #ffffff,
  22.                 #ff0000 6.26%,
  23.                 #ff7d00 12.5%,
  24.                 #ffff00 18.75%,
  25.                 #00ff00 26%,
  26.                 #00ffff 31.26%,
  27.                 #0000ff 37.5%,
  28.                 #ff00ff 43.75%,
  29.                 #ffff00 50%,
  30.                 #ff0000 56.26%,
  31.                 #ff7d00 62.5%,
  32.                 #ffff00 68.75%,
  33.                 #00ff00 75%,
  34.                 #00ffff 81.26%,
  35.                 #0000ff 87.5%,
  36.                 #ff00ff 93.75%,
  37.                 #ffff00 100%);
  38.             -webkit-background-clip: text;
  39.             -webkit-text-fill-color: transparent;
  40.             background-size: 200% 100%;
  41.             animation: masked-animation 2s infinite linear;
  42.             padding: 20px;
  43.             display: flex;
  44.             justify-content: center;
  45.             align-items: center;
  46.             font-size: 12px; /* Adjusted font size */
  47.             font-weight: bold;
  48.             color: #333;
  49.             text-align: center;
  50.         }

  52.         @keyframes masked-animation {
  53.             0% {
  54.                 background-position: 0 0;
  55.             }
  56.             100% {
  57.                 background-position: -100%, 0;
  58.             }
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="grid-container">
  64.         <div class="grid-item">广告1</div>
  65.         <div class="grid-item">广告2</div>
  66.         <div class="grid-item">广告3</div>
  67.         <div class="grid-item">广告4</div>
  68.         <div class="grid-item">广告5</div>
  69.         <div class="grid-item">广告6</div>
  70.         <div class="grid-item">广告7</div>
  71.         <div class="grid-item">广告8</div>
  72.         <div class="grid-item">广告9</div>
  73.     </div>
复制代码
广告 代码 九宫格
相关帖子

上一篇: 小星星鼠标跟随特效代码

下一篇: 网站版权年份自动更新代码

发表于 2024-10-1 12:25:04 来自手机

举报 回复 使用道具

返回列表 发新帖

手机版小黑屋

Copyright © 乐享社区.