凌吾资源网

当前位置:首页 > 网站源码 > 详情
网站块状渐变文字广告美化版代码分享
分类:网站源码 时间:2020-9-15 围观:6
 

鹏仔广告代码,块状渐变文字广告美化版代码分享。

Hello,大家好,我是小编鹏仔,实在闲的没事干,用了十来分钟,简单写了这个文字广告代码分享给大家,列数为5列,行数不限制,反正五个五个加,你想放多少行都行。


 
  1. <style>
  2.  
  3. .text-block{
  4.  
  5. width: 100%;
  6.  
  7. overflow: hidden;
  8.  
  9. background: rgba(255,255,255,.6);
  10.  
  11. display: flex;
  12.  
  13. justify-content: space-between;
  14.  
  15. flex-wrap: wrap;
  16.  
  17. }
  18.  
  19. .text-block a{
  20.  
  21. color: rgba(0,0,0,.6);
  22.  
  23. font-size: 14px;
  24.  
  25. font-weight: bold;
  26.  
  27. line-height: 30px;
  28.  
  29. text-align: center;
  30.  
  31. text-decoration: none;
  32.  
  33. display: block;
  34.  
  35. width: 19.5%;
  36.  
  37. height: 30px;
  38.  
  39. overflow: hidden;
  40.  
  41. position: relative;
  42.  
  43. margin: 1px 0;
  44.  
  45. }
  46.  
  47. .text-block a div{
  48.  
  49. width: 100%;
  50.  
  51. height: 60px;
  52.  
  53. padding: 0 5px;
  54.  
  55. box-sizing: border-box;
  56.  
  57. position: absolute;
  58.  
  59. top: 0;
  60.  
  61. left: 0;
  62.  
  63. transition: all .3s;
  64.  
  65. }
  66.  
  67. .text-block a:hover div{
  68.  
  69. transition: all .3s;
  70.  
  71. color: #fff;
  72.  
  73. top: -30px;
  74.  
  75. text-shadow: 0 2px 3px rgba(0,0,0,.6);
  76.  
  77. }
  78.  
  79. .text-block p{
  80.  
  81. width: 100%;
  82.  
  83. white-space: nowrap;
  84.  
  85. overflow: hidden;
  86.  
  87. text-overflow: ellipsis;
  88.  
  89. }
  90.  
  91. .text-block a div :nth-child(1){
  92.  
  93. background: linear-gradient(to right,#b4b4ff, #aedefc);
  94.  
  95. }
  96.  
  97. .text-block a div :nth-child(2){
  98.  
  99. background: linear-gradient(to right,#aedefc,#b4b4ff);
  100.  
  101. }
  102.  
  103.  
  104. </style>
  105.  
  106.  
  107.  
  108. <div class="text-block">
  109.  
  110. <a target="_blank" href="javascript:;">
  111.  
  112. <div>
  113.  
  114. <p>小高教程网</p>
  115.  
  116. <p>点击访问</p>
  117.  
  118. </div>
  119.  
  120. </a>
  121.  
  122. <a target="_blank" href="javascript:;">
  123.  
  124. <div>
  125.  
  126. <p>百变鹏仔</p>
  127.  
  128. <p>点击访问</p>
  129.  
  130. </div>
  131.  
  132. </a>
  133.  
  134. <a target="_blank" href="javascript:;">
  135.  
  136. <div>
  137.  
  138. <p>百变鹏仔</p>
  139.  
  140. <p>点击访问</p>
  141.  
  142. </div>
  143.  
  144. </a>
  145.  
  146. <a target="_blank" href="javascript:;">
  147.  
  148. <div>
  149.  
  150. <p>百变鹏仔</p>
  151.  
  152. <p>点击访问</p>
  153.  
  154. </div>
  155.  
  156. </a>
  157.  
  158. <a target="_blank" href="javascript:;">
  159.  
  160. <div>
  161.  
  162. <p>百变鹏仔</p>
  163.  
  164. <p>点击访问</p>
  165.  
  166. </div>
  167.  
  168. </a>
  169.  
  170. <a target="_blank" href="javascript:;">
  171.  
  172. <div>
  173.  
  174. <p>广告招租</p>
  175.  
  176. <p>点击咨询</p>
  177.  
  178. </div>
  179.  
  180. </a>
  181.  
  182. <a target="_blank" href="javascript:;">
  183.  
  184. <div>
  185.  
  186. <p>广告招租</p>
  187.  
  188. <p>点击咨询</p>
  189.  
  190. </div>
  191.  
  192. </a>
  193.  
  194. <a target="_blank" href="javascript:;">
  195.  
  196. <div>
  197.  
  198. <p>广告招租</p>
  199.  
  200. <p>点击咨询</p>
  201.  
  202. </div>
  203.  
  204. </a>
  205.  
  206. <a target="_blank" href="javascript:;">
  207.  
  208. <div>
  209.  
  210. <p>广告招租</p>
  211.  
  212. <p>点击咨询</p>
  213.  
  214. </div>
  215.  
  216. </a>
  217.  
  218. <a target="_blank" href="javascript:;">
  219.  
  220. <div>
  221.  
  222. <p>广告招租</p>
  223.  
  224. <p>点击咨询</p>
  225.  
  226. </div>
  227.  
  228. </a>
  229.  
  230. </div>
THE END
免责声明:本文由本站撰写发布,但不代表本站的观点和立场。

评论:

站点留言:

凌吾资源网专注资源共享!
本站从2019年开始至今始终坚持免费搜集分享各种网络资源,现如今本站已发展形成网站源码、主题模板、经验教程、影视资源等各个领域的资源!
  • 文章3229
  • 评论42
  • 微语3

最新微语:

  • 人都有以第一印象定好坏的习惯,认为一个人好时,就会爱屋及乌,认...
    2020-05-19 12:29 更多
  • 人生多一份挫折,就多一份人生的感悟;人生多一次跌打,就多一条抗...
    2020-04-20 06:17 更多
  • 凌吾资源网用心打造最好的资源平台
    2020-04-20 02:41 更多