无限中抓

 找回密码
 注册中抓

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
查看: 347|回复: 1

[技术交流] 古风GL剧《慕尔如星》代码及CSS开源

[复制链接]
发表于 2018-4-14 22:04:38 | 显示全部楼层 |阅读模式
晋江原帖链接 http://bbs.jjwxc.net/showmsg.php?board=52&id=80007本篇重点是摩天轮链接样式
HTML代码部分
  1. <link rel="STYLEsheet" href="http://www.chinadra.com/ziqi/Gbj_css/Merx.css" type="text/css" media="all" />
  2. <center>
  3.   <img src="http://www.chinadra.com/ziqi/Gbj_photo/Merx/background.jpg" id="gbj_background"/><br>
  4.   <br>
  5.   <br>
  6.   <font id="shm">——声明——<br>
  7.   本作品中所采用的配乐、音效等素材均来自于互联网,著权归原作者所有。<br>
  8.   本作品仅供配音爱好者个人学习、交流,禁止进行二次修改或用于任何商业用途。<br>
  9.   禁止非本剧组成员进行二次上传,转载请注明所有成员名单及原始地址,谢谢合作!</font>
  10. </center>
  11. <table id="gbj_href_left">
  12.   <tr>
  13.     <td class="missevan"><a href="http://www.missevan.com/sound/925947" target="_blank">missevan</a></td>
  14.   </tr>
  15.   <tr>
  16.     <td class="bilibili"><a href="https://www.bilibili.com/video/av22019824/" target="_blank">BiliBili</a></td>
  17.   </tr>
  18.   <tr>
  19.     <td class="chinadra"><a href="http://www.chinadra.com/guangboju/gbj_13354.html" target="_blank">无限中抓</a></td>
  20.   </tr>
  21.   <tr>
  22.     <td class="lizhi"><a href="http://www.chinadra.com/guangboju/gbj_13354.html" target="_blank">荔枝</a></td>
  23.   </tr>
  24.   <tr>
  25.     <td class="ximalaya"><a href="http://www.ximalaya.com/5720129/sound/80356274/" target="_blank">喜马拉雅</a></td>
  26.   </tr>
  27.   <tr>
  28.     <td class="sing"><a href="http://5sing.kugou.com/fc/16462690.html" target="_blank">5sing</a>
  29.     <td>
  30.   </tr>
  31. </table>
  32. <table id="gbj_href_right">
  33.   <tr>
  34.     <td class="missevan_right"><a href="http://www.missevan.com/sound/925947" target="_blank">missevan</a></td>
  35.   </tr>
  36.   <tr>
  37.     <td class="bilibili_right"><a href="https://www.bilibili.com/video/av22019824/" target="_blank">BiliBili</a></td>
  38.   </tr>
  39.   <tr>
  40.     <td class="chinadra_right"><a href="http://www.chinadra.com/guangboju/gbj_13354.html" target="_blank">无限中抓</a></td>
  41.   </tr>
  42.   <tr>
  43.     <td class="lizhi_right"><a href="http://www.chinadra.com/guangboju/gbj_13354.html" target="_blank">荔枝</a></td>
  44.   </tr>
  45.   <tr>
  46.     <td class="ximalaya_right"><a href="http://www.ximalaya.com/5720129/sound/80356274/" target="_blank">喜马拉雅</a></td>
  47.   </tr>
  48.   <tr>
  49.     <td class="sing_right"><a href="http://5sing.kugou.com/fc/16462690.html" target="_blank">5sing</a>
  50.     <td>
  51.   </tr>
  52. </table>
  53. <li class="meteor3 meteoranimation3"></li>
  54. <li class="meteor1 meteoranimation1"></li>
  55. <li class="meteor2 meteoranimation2"></li>
  56. <li class="meteor4 meteoranimation4"></li>
复制代码

CSS样式表部分
  1. body {
  2.         background: rgb(3, 22, 54);
  3.         background: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(3, 22, 54)), to(rgba(156, 83, 172, 0.79))) fixed;
  4.         overflow-x: hidden;
  5. }
  6. #gbj_background{
  7.         position:relative;
  8.         left:-90px;
  9.         margin-top: 20px;
  10. }
  11. .reply_4502155{
  12.         display:none;
  13. }
  14. .comment_80007 div ,.authorname{
  15.         color:#FFF;
  16. }
  17. .gbj_background{
  18.         position:relative;
  19.         left:-90px;
  20.         margin-top: 20px;
  21. }
  22. .sanlou{
  23.         color:#FFF;
  24. }
  25. .ed_sc{
  26.         width:760px;
  27.         animation: linkcolor 8s linear 0s infinite alternate forwards;
  28.         -moz-animation: linkcolor 8s linear 0s infinite alternate forwards;        /* Firefox */
  29.         -webkit-animation: linkcolor 8s linear 0s infinite alternate forwards;        /* Safari 和 Chrome */
  30.         -o-animation: linkcolor 8s linear 0s infinite alternate forwards;        /* Opera */
  31. }
  32. .ed_sc td{
  33.     width: 50%;
  34.     text-align: center;
  35.     line-height: 27px;
  36. }
  37. .gbj_ed_photo{
  38.     height: 400px;
  39.     background-image: url(http://www.chinadra.com/ziqi/Gbj_photo/Merx/ed.jpg);
  40.     background-size: 280px auto;
  41.     background-repeat: no-repeat;
  42.     position: relative;
  43.     left: 50px;
  44. }
  45. .gbj_ed_geci{
  46.         
  47. }
  48. .ed_sc marquee{
  49.             padding: 10px 20px 10px 0;
  50.     height: auto;
  51.     font-size: 19px;
  52.     text-align: center;
  53.         marquee-direction:up;
  54.         marquee-speed:10;
  55. }
  56. #shm{
  57.         margin-top:10px;
  58.         color:#0F0;
  59.         text-shadow: 0 0 3px #FFF;
  60.         animation: linkcolor 8s linear 0s infinite alternate forwards;
  61.         -moz-animation: linkcolor 8s linear 0s infinite alternate forwards;        /* Firefox */
  62.         -webkit-animation: linkcolor 8s linear 0s infinite alternate forwards;        /* Safari 和 Chrome */
  63.         -o-animation: linkcolor 8s linear 0s infinite alternate forwards;        /* Opera */
  64. }
  65. /*----------------------------------------以下为旋转链接位*/
  66. #gbj_href_left, #gbj_href_right{
  67.         position: absolute;
  68.         top: 35%;/*300px*/
  69.         z-index:60;
  70. }
  71. #gbj_href_left a:hover, #gbj_href_left a:link, #gbj_href_left a:active, #gbj_href_left a:visited, #gbj_href_right a:hover, #gbj_href_right a:link, #gbj_href_right a:active, #gbj_href_right a:visited{
  72.         text-decoration:none;
  73.         color:#FFF;
  74.         z-index:60;}
  75. #gbj_href_left {
  76.         left: 47px;/*50px*/
  77.         transform-origin: -55px 93px;/*左x轴右y轴95(数字越小越往下)*/
  78. }
  79. #gbj_href_right {
  80.         right: -150px;/*50px*/
  81.         transform-origin: -60px 101px;/*左x轴右y轴95(数字越小越往下)*/
  82. }
  83. .sing, .missevan, .bilibili, .chinadra, .lizhi, .ximalaya,.sing_right, .missevan_right, .bilibili_right, .chinadra_right, .lizhi_right, .ximalaya_right {
  84.         height: 32px;
  85.         background-color: rgba(255,255,255,0.3);
  86.         box-shadow: 0px 0px 13px 2px #fff;
  87.         padding: 5px;
  88.         position: relative;
  89.         width: 76px;
  90.         text-align: center;
  91.         color: #FFF;
  92.         cursor:pointer;
  93.         z-index:60;
  94.         animation-play-state: paused;
  95. }
  96. /*定义左侧*/
  97. .missevan {
  98.         bottom: 10px;
  99.         right: 160px;
  100.         transform: rotate(-120deg);
  101. }
  102. .bilibili {
  103.         bottom: 53px;
  104.         right: 53px;
  105.         transform: rotate(-60deg);
  106. }
  107. .chinadra {
  108. }
  109. .lizhi {
  110.         right: 50px;
  111.         bottom: -50px;
  112.         transform: rotate(60deg);
  113. }
  114. .ximalaya {
  115.         right: 155px;
  116.         bottom: -10px;
  117.         transform: rotate(120deg);
  118. }
  119. .sing {
  120.         right: 210px;
  121.         bottom: 129px;
  122.         transform: rotate(180deg);
  123. }
  124. /*定义右侧*/
  125. .missevan_right {
  126.         bottom: 10px;
  127.         right: 160px;
  128.         transform: rotate(60deg);
  129. }
  130. .bilibili_right {
  131.         bottom: 53px;
  132.         right: 53px;
  133.         transform: rotate(120deg);
  134. }
  135. .chinadra_right {
  136.         transform: rotate(180deg);
  137. }
  138. .lizhi_right {
  139.         right: 50px;
  140.         bottom: -50px;
  141.         transform: rotate(-120deg);
  142. }
  143. .ximalaya_right {
  144.         right: 155px;
  145.         bottom: -10px;
  146.         transform: rotate(-60deg);
  147. }
  148. .sing_right {
  149.         right: 210px;
  150.         bottom: 129px;
  151.         transform: rotate(0deg);
  152. }
  153. /*绑定动画阶段css*/
  154. #gbj_href_left, #gbj_href_right {
  155.         animation: gbjhref 30s linear 0s 10;
  156.         -moz-animation: gbjhref 30s linear 0s 10;        /* Firefox */
  157.         -webkit-animation: gbjhref 30s linear 0s 10;        /* Safari 和 Chrome */
  158.         -o-animation: gbjhref 30s linear 0s 10;        /* Opera */
  159.         animation-fill-mode: forwards;/*动画播放完毕时停止,不回到初始状态*/
  160.         -webkit-animation-fill-mode: forwards;
  161. }
  162. #gbj_href_left:hover, #gbj_href_right:hover{
  163.                 animation-play-state: paused;
  164. }

  165. /*执行动画阶段css*/
  166. @keyframes gbjhref {
  167. from {
  168. transform:rotate(0deg);
  169. }
  170. to {
  171.         transform: rotate(360deg);
  172. }
  173. }
  174. @-moz-keyframes gbjhref {
  175. from {
  176. transform:rotate(0deg);
  177. }
  178. to {
  179.         transform: rotate(360deg);
  180. }
  181. }
  182. @-o-keyframes gbjhref {
  183. from {
  184. transform:rotate(0deg);
  185. }
  186. to {
  187.         transform: rotate(360deg);
  188. }
  189. }
  190. @-webkit-keyframes gbjhref {
  191. from {
  192. transform:rotate(0deg);
  193. }
  194. to {
  195.         transform: rotate(360deg);
  196. }
  197. }
  198. /*----------------------------------以上为旋转链接位*/
  199. /*-----------------------------------以下为声明渐变色*/
  200. /*linkcolor链接*/
  201. @keyframes linkcolor {0% {color:#00fff5;}50% {color:#edff00;} 100% {color:#ff0000;}}
  202. @-moz-keyframes linkcolor /* Firefox */ {0% {color:#00fff5;}50% {color:#edff00;} 100% {color:#ff0000;}}
  203. @-webkit-keyframes linkcolor /* Safari 和 Chrome */{0% {color:#00fff5;}50% {color:#edff00;} 100% {color:#ff0000;}}
  204. @-o-keyframes linkcolor /* Opera */ {0% {color:#00fff5;}50% {color:#edff00;} 100% {color:#ff0000;}}
  205. /*-----------------------------------以上为声明渐变色*/
  206. /*====================================以下流星*/
  207. .meteor1,.meteor2,.meteor3,.meteor4,.meteor5,.meteor6{
  208.         width:562px;
  209.         height:264px;
  210.         list-style:none;
  211.         position:absolute;
  212.         background-repeat: no-repeat;
  213.         }
  214. .meteor1{
  215.         top:35%;
  216.         left:10%;
  217.         background-size:100%;
  218.         z-index:20;}
  219. .meteor2{
  220.         top:20%;
  221.         left:80%;
  222.         background-size:100%;
  223.         z-index:20;}
  224. .meteor3{
  225.         top:30%;
  226.         left:9%;
  227.         background-size:100%;
  228.         z-index:20;}
  229. .meteor4{
  230.         top:30%;
  231.         left:40%;
  232.         background-size:100%;
  233.         z-index:20;}
  234. .meteoranimation1:after, .meteoranimation2:after, .meteoranimation3:after, .meteoranimation4:after{
  235.         display:block;
  236.         content:" ";
  237.         width:562px;
  238.         height:264px;
  239.         background-image:url(http://www.chinadra.com/ziqi/Gbj_photo/Merx/meteor.png);
  240.         position:relative;
  241.         z-index:30;
  242.         opacity:0;
  243. }
  244. /*---------以下绑定动画*/
  245. .meteoranimation1:after{
  246.         animation: meteoranimation 9s linear 0s infinite;
  247.         -moz-animation: meteoranimation 9s linear 0s infinite;        /* Firefox */
  248.         -webkit-animation: meteoranimation 9s linear 0s infinite;        /* Safari 和 Chrome */
  249.         -o-animation:meteoranimation 9s linear 0s infinite;/* Opera */
  250.         animation-fill-mode: forwards;/*动画播放完毕时停止,不回到初始状态*/
  251.         -webkit-animation-fill-mode: forwards;
  252. }
  253. .meteoranimation2:after{
  254.         animation: meteoranimation 9s linear 1.6s infinite;        
  255.         -moz-animation: meteoranimation 9s linear 1.6s infinite;        /* Firefox */
  256.         -webkit-animation: meteoranimation 9s linear 1.6s infinite;        /* Safari 和 Chrome */
  257.         -o-animation: meteoranimation 9s linear 1.6s infinite;                /* Opera */
  258.         animation-fill-mode: forwards;/*动画播放完毕时停止,不回到初始状态*/
  259.         -webkit-animation-fill-mode: forwards;
  260. }
  261. .meteoranimation3:after{
  262.         animation: meteoranimation 9s linear 2.3s infinite;
  263.         -moz-animation: meteoranimation 9s linear 2.3s infinite;        /* Firefox */
  264.         -webkit-animation: meteoranimation 9s linear 2.3s infinite;        /* Safari 和 Chrome */
  265.         -o-animation: meteoranimation 9s linear 2.3s infinite;/* Opera */
  266.         animation-fill-mode: forwards;/*动画播放完毕时停止,不回到初始状态*/
  267.         -webkit-animation-fill-mode: forwards;
  268. }
  269. .meteoranimation4:after{
  270.         animation: meteoranimation 9s linear 4s infinite;
  271.         -moz-animation: meteoranimation 9s linear 4s infinite;/* Firefox */
  272.         -webkit-animation: meteoranimation 9s linear 4s infinite;        /* Safari 和 Chrome */
  273.         -o-animation: meteoranimation 9s linear 4s infinite;        /* Opera */
  274.         animation-fill-mode: forwards;/*动画播放完毕时停止,不回到初始状态*/
  275.         -webkit-animation-fill-mode: forwards;
  276. }

  277. /*---------以上绑定动画*/
  278. /*---------以下制作动画*/
  279. @keyframes meteoranimation{
  280.         0%{
  281.                 top:-300%;
  282.                 left:80%;
  283.                 opacity:0;
  284.         }
  285.         35%{
  286.                 top:-230%;
  287.                 left:70%;
  288.                 opacity:0.6;
  289.         }
  290.         90%{top:130%;
  291.                 left:-70%;
  292.                 opacity:0.6;}
  293.                 92%{top:131%;
  294.                 left:-71%;
  295.                 opacity:0;}
  296.         100%{
  297.                 top:150%;
  298.                 left:-110%;
  299.                 opacity:0;
  300.         }
  301. }
  302. @-moz-keyframes meteoranimation{
  303.         0%{
  304.                 top:-300%;
  305.                 left:80%;
  306.                 opacity:0;
  307.         }
  308.         35%{
  309.                 top:-230%;
  310.                 left:70%;
  311.                 opacity:0.6;
  312.         }
  313.         90%{top:130%;
  314.                 left:-70%;
  315.                 opacity:0.6;}
  316.                 92%{top:131%;
  317.                 left:-71%;
  318.                 opacity:0;}
  319.         100%{
  320.                 top:150%;
  321.                 left:-110%;
  322.                 opacity:0;
  323.         }
  324. }
  325. @-webkit-keyframes meteoranimation{
  326.         0%{
  327.                 top:-300%;
  328.                 left:80%;
  329.                 opacity:0;
  330.         }
  331.         35%{
  332.                 top:-230%;
  333.                 left:70%;
  334.                 opacity:0.6;
  335.         }
  336.         90%{top:130%;
  337.                 left:-70%;
  338.                 opacity:0.6;}
  339.                 92%{top:131%;
  340.                 left:-71%;
  341.                 opacity:0;}
  342.         100%{
  343.                 top:150%;
  344.                 left:-110%;
  345.                 opacity:0;
  346.         }
  347. }
  348. @-o-keyframes meteoranimation{
  349.         0%{
  350.                 top:-300%;
  351.                 left:80%;
  352.                 opacity:0;
  353.         }
  354.         35%{
  355.                 top:-230%;
  356.                 left:70%;
  357.                 opacity:0.6;
  358.         }
  359.         90%{top:130%;
  360.                 left:-70%;
  361.                 opacity:0.6;}
  362.                 92%{top:131%;
  363.                 left:-71%;
  364.                 opacity:0;}
  365.         100%{
  366.                 top:150%;
  367.                 left:-110%;
  368.                 opacity:0;
  369.         }
  370. }

  371. /*---------以上制作动画*/
  372. /*====================================以上流星*/
复制代码




您需要登录后才可以回帖 登录 | 注册中抓

本版积分规则



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

GMT+8, 2018-8-18 08:39 , Processed in 0.186895 second(s), 26 queries .

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

© 2001-2013 Comsenz Inc.

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