无限中抓

 找回密码
 注册中抓

QQ登录

只需一步,快速开始

扫一扫,访问微社区

点击进入授权页面

只需一步,快速开始

只需一步,快速开始

搜索
查看: 180|回复: 5

[技术交流] 古风bg广播剧《惊鸿》代码及css开源

[复制链接]
发表于 2018-3-27 19:02:20 | 显示全部楼层 |阅读模式
晋江原帖链接 http://bbs.jjwxc.net/showmsg.php?board=44&boardpagemsg=1&id=17658
HTML代码部分
  1. <link rel="stylesheet" href="http://www.chinadra.com/ziqi/Gbj_css/honghu.css" type="text/css" media="all" />
  2. <table id="gbj_table1" width="100%" border="0">
  3.   <tr>
  4.     <td class="gbj_title_td" colspan="5"><a href="http://www.chinadra.com/ziqi/Gbj_photo/honghu/title5.png" target="_blank"><img src='http://www.chinadra.com/ziqi/Gbj_photo/honghu/title5.png' alt='改编全一期简午原著古风bg广播剧《惊鸿》'></a></td>
  5.   </tr>
  6. </table>
  7. <center>
  8.   <table id="gbj_table2"border="0">
  9.     <tr id="gbj_main">
  10.       <td class="gbj_post1" colspan="2"> </td>
  11.       <td rowspan="4" id="gbj_sc"><h2>STAFF</h2>
  12.         <li>策编:喃药【这个工作室】@喃药不嗑药</li>
  13.         <li> 导演:洵洵【懒人窝配音社】@-Paii</li>
  14.         <li> 后期:衿悠 @衿悠-踪迹</li>
  15.         <li> 美工:夙敛【曲辞未归】@夙敛sara</li>
  16.         <li> 宣传:子祁【这个工作室】@Corta_子祁</li>
  17.         <h2>CAST</h2>
  18.         <li>徐海棠:郁望梦始【弦回声叶工作室】@郁望梦始_我是梦少</li>
  19.         <li> 肖铭:山海  @山海啦啦啦</li>
  20.         <li> 徐青书:方小明【翼之声】@方小明-叔音未来</li>
  21.         <li> 小晚:徐行【S.N.工作室】@徐行-不是航</li>
  22.         <li> 掌柜/路人:老魇儿【极乐世界工作室】@老魇儿</li>
  23.         <li> 小二:银兮【魔芋冻】</li>
  24.         <li> 家丁:郁望梦始【弦回声叶工作室】@郁望梦始_我是梦少</li>
  25.         <li> 报幕:释白雪【恶人谷配音组】@释白雪</li></td>
  26.     </tr>
  27.     <tr>
  28.       <td class="gbj_placehold1" colspan="2"></td>
  29.     </tr>
  30.     <tr>
  31.       <td class="logo_chinadra"><a href="http://www.chinadra.com/guangboju/gbj_13322.html" target="_blank"></a></td>
  32.       <td class="logo_missevan"><a href="http://www.missevan.com/sound/901636" target="_blank"></a></td>
  33.     </tr>
  34.     <tr>
  35.       <td class="logo_ximalaya"><a href="http://m.ximalaya.com/share/sound/78186396" target="_blank"></a></td>
  36.       <td class="logo_lizhi"><a href="https://www.lizhi.fm/15418616/2659775512606618630?u=2615997284405287980" target="_blank"></a></td>
  37.     </tr>
  38.     <tr>
  39.       <td colspan="2" id="gbj_ed_sc"><h2>ED曲 《鸿鹄》</h2>
  40.         <li>原曲:竹林间</li>
  41.         <li> 策划:喃药【这个工作室】@喃药不嗑药</li>
  42.         <li> 填词:凤皇【这个工作室】@loli佳小佳</li>
  43.         <li> 念白/翻唱:千极【自由人】@千极ChanGeZ</li>
  44.         <li> 题字:初栖【尘音未寂】@_初栖</li>
  45.         <li> 后期:林凡【中华中配社团】@林凡_Naven</li>
  46.         <li> 画师/美工:鱼京【琉璃广播剧社】@茯苓解旋</li>
  47.         <li> 宣传:子祁【这个工作室】@Corta_子祁</li></td>
  48.       <td><a href="http://www.chinadra.com/ziqi/Gbj_photo/honghu/ED.jpg" target="_blank"><img id="ed_img" src='http://www.chinadra.com/ziqi/Gbj_photo/honghu/ED.jpg' alt='ED曲 《鸿鹄》海报'></a></td>
  49.     </tr>
  50.   </table>
  51. </center>
  52. <br style="clear:both;">
复制代码

CSS部分
  1. @charset "utf-8";
  2. /* CSS Document */

  3. #boardname{
  4.         color:white;
  5. }
  6. #boardname a:link ,#boardname a:visited ,#boardname a:hover ,#boardname a:active {
  7.         color:white;
  8. }

  9. td {
  10.     background: none;
  11. }
  12. .gbj_title {
  13.         color: #CF0;
  14.         font-size: 36px;
  15.         background: -webkit-linear-gradient(80deg, #10ff00, #00f3ff 50%, #06d6b9 51%, #077df7);
  16.         -webkit-background-clip: text;
  17.         -webkit-text-fill-color: transparent;
  18. }
  19. #gbj_table1 {
  20.         margin-bottom: 60px;
  21.         position: relative;
  22.     left: -55px;
  23. }
  24. .gbj_title_td {
  25.         text-align: center;
  26.         vertical-align: top;
  27.         height: 45px;
  28. }
  29. .placeholder {
  30.         width: 50px;
  31. }
  32. body {
  33.         background-color: rgba(84, 31, 31, 0.92);
  34. }
  35. .gbj_post1 {
  36.         background: url(http://www.chinadra.com/ziqi/Gbj_photo/honghu/post.jpg) no-repeat;
  37.         width: 300px;
  38.         height: 545px;
  39.         background-size: 100%;
  40.         border-width: 5px;
  41.         border-style: outset;
  42.         border-color: white;
  43.         box-shadow: 5px 4px 20px 1px #333333;
  44. }
  45. #gbj_sc {
  46.         width: 490px;
  47.     color: rgb(239,228,224);
  48.     list-style: circle;
  49.     line-height: 40px;
  50.     /* padding-left: 105px; */
  51.     position: relative;
  52.     top: -50px;
  53.     left: 95px;
  54. }
  55. #gbj_table2 {
  56. /*width: 320px;*/

  57. }
  58. #gbj_table3 {
  59.         width: 470px;
  60.         margin-left: 14%;
  61.         float: left;
  62.         color: rgb(239,228,224);
  63.         list-style: circle;
  64.         line-height: 40px;
  65.         margin-top: -55px;
  66. }
  67. #gbj_ed_sc {
  68.         color: rgb(239,228,224);
  69.         list-style: circle;
  70.         line-height: 30px;
  71. }
  72. .gbj_placehold1 {
  73.         height: 10px;
  74. }
  75. .logo_chinadra {
  76.         height: 70px;
  77.         background: url(http://www.chinadra.com/ziqi/logo/chinadra.png) no-repeat center center;
  78.         background-size: 120px;
  79. }
  80. .logo_missevan {
  81.         height: 70px;
  82.         background: url(http://www.chinadra.com/ziqi/logo/missevan.png) no-repeat center center;
  83.         background-size: 120px;
  84. }
  85. .logo_lizhi {
  86.         height: 70px;
  87.         background: url(http://www.chinadra.com/ziqi/logo/lizhi_white.png) no-repeat center center;
  88.         background-size: 120px;
  89. }
  90. .logo_ximalaya {
  91.         height: 70px;
  92.         background: url(http://www.chinadra.com/ziqi/logo/ximalaya.png) no-repeat center center;
  93.         background-size: 120px;
  94. }
  95. /*http://www.chinadra.com/ziqi/Gbj_photo/honghu/title2.png*/
  96. .logo_chinadra a, .logo_ximalaya a, .logo_lizhi a, .logo_missevan a {
  97.         display: block; /* 把行内元素 变成 块级元素 */
  98.         width: 157px; /* 盒子 宽度 */
  99.         height: 70px; /* 盒子 高度 */
  100. }
  101. #ed_img {
  102.         margin-left: 135px;
  103.         width: 350px;
  104.         height: 350px;
  105.         border-radius: 50%;
  106.         transform-origin: 50% 50%;
  107.         -webkit-transform-origin: 50% 50%;
  108.         animation: 20s linear 0s myrotate infinite;
  109.         -webkit-animation: 20s linear 0s myrotate infinite;/* Safari and Chrome */
  110.         animation-fill-mode: forwards;/*动画播放完毕时停止,不回到初始状态*/
  111.         -webkit-animation-fill-mode: forwards;
  112. }
  113. @keyframes myrotate {
  114. form {
  115. transform:rotate(0deg);
  116. }
  117. to {
  118.         transform: rotate(360deg);
  119. }
  120. }
  121. @-webkit-keyframes myrotate {/* Safari and Chrome */
  122. form {
  123. transform:rotate(0deg);
  124. }
  125. to {
  126.         transform: rotate(360deg);
  127. }
  128. }
  129. #ed_img:hover {
  130.     animation-play-state: paused;
  131. }
  132. @media screen and (max-width: 1080px) {
  133.     .gbj_post1 {
  134.         height: 480px;
  135. }
  136. }
复制代码



发表于 2018-3-28 12:51:14 | 显示全部楼层
一如既往看得头疼系列
发表于 2018-4-10 14:52:19 | 显示全部楼层
举手提问o(*^▽^*)┛:为啥不用div呢(ノ゚▽゚)ノ

点评

晋江拒绝Div标签  详情 回复 发表于 2018-4-10 15:19
 楼主| 发表于 2018-4-10 15:19:37 | 显示全部楼层
winky_sugar 发表于 2018-4-10 14:52
举手提问o(*^▽^*)┛:为啥不用div呢(ノ゚▽゚)ノ

晋江拒绝Div标签

点评

这个样子啊(⊙o⊙)… @keyframes myrotate 子祁哥哥这个是啥? 还有还有,那个标题的边框咋做到的!  详情 回复 发表于 2018-4-10 15:40
发表于 2018-4-10 15:40:32 | 显示全部楼层

这个样子啊(⊙o⊙)… @keyframes myrotate 子祁哥哥这个是啥?  还有还有,那个标题的边框咋做到的!

点评

@keyframes myrotate这是定义了ed海报唱片旋转的动画效果;边框是border-style: outset  详情 回复 发表于 2018-4-11 12:25
 楼主| 发表于 2018-4-11 12:25:00 | 显示全部楼层
winky_sugar 发表于 2018-4-10 15:40
这个样子啊(⊙o⊙)… @keyframes myrotate 子祁哥哥这个是啥?  还有还有,那个标题的边框咋做到的! ...

@keyframes myrotate这是定义了ed海报唱片旋转的动画效果;边框是border-style: outset
您需要登录后才可以回帖 登录 | 注册中抓   

本版积分规则



点击这里给我发消息  论坛报错|小黑屋|手机版|Archiver| 无限中抓 ( 京ICP备14047185号-1

GMT+8, 2018-4-27 10:51 , Processed in 0.249151 second(s), 27 queries .

Powered by 无限中抓技术组 X3.2

© 2001-2013 Comsenz Inc.

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