设为首页收藏本站
开启辅助访问 切换到宽版

无限中抓

 找回密码
 注册中抓

QQ登录

只需一步，快速开始

扫一扫，访问微社区

只需一步，快速开始

搜索
无限中抓»中抓论坛 › 中抓交流区 › 代码宣传交流专区 › 耽美苍明广播剧《你是我情缘》代码开源 ...
返回列表 发新帖
查看: 691|回复: 1

[技术交流] 耽美苍明广播剧《你是我情缘》代码开源

[复制链接]
发表于 2018-4-6 19:44:03 | 显示全部楼层 |阅读模式
晋江原帖链接 http://bbs.jjwxc.net/showmsg.php?board=52&id=79971
HTML代码部分
  1. <center>
  2. <link rel="stylesheet" href="http://www.chinadra.com/ziqi/Gbj_css/nswqy.css" type="text/css" media="all" />
  3. <table id="gbj_table1">
  4. <tr>
  5. <td id="gbj_background">
  6. <ul id="gbj_staff">
  7. <h3>Staff：</h3>
  8. <li>策划&美工：蛋花【天禄客栈】/</li><li>
  9. 编剧：慕杉【深夜工作室】/</li><li>
  10. 导演：砚痕【无期之约】/</li><li>
  11. 后期：半夏尘鞅【醉美倾晴阁】/</li><li>
  12. 宣传：Corta_子祁【这个工作室】/</li>
  13. </ul><ul id="gbj_cast">
  14. <h3>Cast：</h3>
  15. <li>/陆遥：疯子【流连声色】</li><li>
  16. /薛皑：未眠【天禄客栈】</li><li>
  17. /燕苍离：王严肃【未来之声】</li><li>
  18. /陆月明：道长【魅素漪工作室】</li><li>
  19. /师弟&幼年陆遥&少年路月明：龙咩【语翼配音组】</li><li>
  20. /师姐&师妹：泠酒花萝：郁望梦始【第二人格工作室】</li><li>
  21. /卡卢比：洛木</li>
  22. </ul>
  23. </td>
  24. </tr>
  25. </table>
  26. <li id="href_chinadra"><a href="https://www.bilibili.com/video/av21365755?from=search&seid=15375262520225154555"  target="_blank"><font class="link_color">Chinadra</font></a></li>
  27. <li id="href_missevan"><a href="http://www.missevan.com/sound/player?id=906530"  target="_blank"><font class="link_color">Missevan</font></a></li>
  28. <li id="href_bilibili"><a href="https://www.bilibili.com/video/av21365755?from=search&seid=15375262520225154555"  target="_blank"><font class="link_color">BiliBili</font></a></li>
  29. <li id="href_baidudisk"><a href="https://pan.baidu.com/s/1hWvIZukz80HhN0IDfRz0cQ"  target="_blank"><font class="link_color">剧包下载</font></a></li>
  30. </table>
  31. </center>
  32. <img src="http://www.chinadra.com/ziqi/Gbj_photo/MyLove/cangyun.png" id="img_cy"/>
  33. <img src="http://www.chinadra.com/ziqi/Gbj_photo/MyLove/mingjiao.png" id="img_mj"/>
  34. <center><font class="gbj_sh">-----声明-----<br>
  35. 本作品中采用的音乐、音效等素材均来自于互联网，著作权归原作者或发行公司所有。<br>
  36. 本作品仅供配音爱好者个人学习、交流，请勿进行二次修改或者用于任何商业用途。<br>
  37. 本作品开放转载，转载时请注明出处。</font></center>
复制代码

CSS部分
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body {
  4.         background-color: #e8f3ffe0;
  5. }
  6. #gbj_background {
  7.         background-image: url(http://www.chinadra.com/ziqi/Gbj_photo/MyLove/background.png);
  8. }
  9. #gbj_staff, #gbj_cast {
  10.         list-style: none;
  11.         position: relative;
  12.         z-index: 12;
  13.         color: #FFF;
  14.         width: 300px;
  15.         opacity: 0;
  16. }
  17. #gbj_cast {
  18.         top: -210px;
  19.         text-align: left;
  20.         left: 540px;
  21. }
  22. #gbj_staff {
  23.         top: 260px;
  24.         text-align: right;
  25.         left: 560px;
  26. }
  27. #gbj_table1 {
  28.         width: 1008px;
  29.         height: 634px;
  30.         opacity: 0;
  31.         position: relative;
  32.         z-index: 10;
  33.         left: -120px;
  34.         border: groove;
  35. }
  36. #img_cy, #img_mj {
  37.         position: absolute;
  38.         top: 300px;
  39.         left: 35%;
  40.         z-index: 8;
  41.         opacity: 0;
  42. }
  43. #href_bilibili, #href_missevan, #href_baidudisk, #href_chinadra {
  44.         list-style: none;
  45.         border-radius: 50%;
  46.         background-color: rgba(255,255,255,0.6);
  47.         position: relative;
  48.         top: -330px;
  49.         z-index: 12;
  50.         margin-bottom: -35px;
  51.         opacity: 0;
  52. }
  53. #href_chinadra {
  54.         right: 300px;
  55.         width: 100px;
  56.         height: 100px;
  57.         line-height: 100px;
  58.         font-size: 17px;
  59.         border-style: inset;
  60. }
  61. #href_missevan {
  62.         right: 110px;
  63.         width: 90px;
  64.         height: 90px;
  65.         line-height: 90px;
  66.         font-size: 15px;
  67.         border-style: outset;
  68. }
  69. #href_bilibili {
  70.         right: 410px;
  71.         width: 80px;
  72.         height: 80px;
  73.         line-height: 80px;
  74.         font-size: 15px;
  75.         border-style: outset;
  76. }
  77. #href_baidudisk {
  78.         right: 220px;
  79.         width: 130px;
  80.         height: 130px;
  81.         line-height: 130px;
  82.         font-size: 22px;
  83.         border-style: inset;
  84. }
  85. li a:hover, li a:link, li a:active, li a:visited {
  86.         text-decoration: none;
  87. }
  88. .link_color {
  89.         color: #F00;
  90. }
  91. .gbj_sh {
  92.         position: relative;
  93.         top: -100px;
  94. }
  95. @media screen and (min-width: 1200px) {
  96. #img_cy, #img_mj {
  97.         left: 40%;
  98. }
  99. }
  100. /*绑定动画阶段css*/
  101. #img_cy {
  102.         animation: cangyun 3s linear 0s 1;
  103.         -moz-animation: cangyun 3s linear 0s 1;        /* Firefox */
  104.         -webkit-animation: cangyun 3s linear 0s 1;        /* Safari 和 Chrome */
  105.         -o-animation: cangyun 3s linear 0s 1;        /* Opera */
  106. }
  107. #img_mj {
  108.         animation: mingjiao 3.5s linear 2.9s 1;
  109.         -moz-animation: mingjiao 3.5s linear 2.9s 1;        /* Firefox */
  110.         -webkit-animation: mingjiao 3.5s linear 2.9s 1;        /* Safari 和 Chrome */
  111.         -o-animation: mingjiao 3.5s linear 2.9s 1;        /* Opera */
  112. }
  113. #gbj_table1 {
  114.         animation: table1 3s linear 6.5s 1 forwards;
  115.         -moz-animation: table1 3s linear 6.5s 1 forwards;        /* Firefox */
  116.         -webkit-animation: table1 3s linear 6.5s 1 forwards;        /* Safari 和 Chrome */
  117.         -o-animation: table1 3s linear 6.5s 1 forwards;        /* Opera */
  118. }
  119. #gbj_staff {
  120.         animation: staff 2s linear 8.5s 1 forwards;
  121.         -moz-animation: staff 2s linear 8.5s 1 forwards;        /* Firefox */
  122.         -webkit-animation: staff 2s linear 8.5s 1 forwards;        /* Safari 和 Chrome */
  123.         -o-animation: staff 2s linear 8.5s 1 forwards;        /* Opera */
  124. }
  125. #gbj_cast {
  126.         animation: cast 2s linear 8.5s 1 forwards;
  127.         -moz-animation: cast 2s linear 8.5s 1 forwards;        /* Firefox */
  128.         -webkit-animation: cast 2s linear 8.5s 1 forwards;        /* Safari 和 Chrome */
  129.         -o-animation: cast 2s linear 8.5s 1 forwards;        /* Opera */
  130. }
  131. #href_chinadra {
  132.         animation: chinadra 2s linear 9s 1 forwards;
  133.         -moz-animation: chinadra 2s linear 9s 1 forwards;        /* Firefox */
  134.         -webkit-animation: chinadra 2s linear 9s 1 forwards;        /* Safari 和 Chrome */
  135.         -o-animation: chinadra 2s linear 9s 1 forwards;        /* Opera */
  136. }
  137. #href_missevan {
  138.         animation: missevan 2s linear 9.4s 1 forwards;
  139.         -moz-animation: missevan 2s linear 9.4s 1 forwards;        /* Firefox */
  140.         -webkit-animation: missevan 2s linear 9.4s 1 forwards;        /* Safari 和 Chrome */
  141.         -o-animation: missevan 2s linear 9.4s 1 forwards;        /* Opera */
  142. }
  143. #href_bilibili {
  144.         animation: bilibili 2s linear 9.9s 1 forwards;
  145.         -moz-animation: bilibili 2s linear 9.9s 1 forwards;        /* Firefox */
  146.         -webkit-animation: bilibili 2s linear 9.9s 1 forwards;        /* Safari 和 Chrome */
  147.         -o-animation: bilibili 2s linear 9.9s 1 forwards;        /* Opera */
  148. }
  149. #href_baidudisk {
  150.         animation: baidudisk 2s linear 10.2s 1 forwards;
  151.         -moz-animation: baidudisk 2s linear 10.2s 1 forwards;        /* Firefox */
  152.         -webkit-animation: baidudisk 2s linear 10.2s 1 forwards;        /* Safari 和 Chrome */
  153.         -o-animation: baidudisk 2s linear 10.2s 1 forwards;        /* Opera */
  154. }
  155. .link_color {
  156.         animation: linkcolor 8s linear 9.2s infinite alternate forwards;
  157.         -moz-animation: linkcolor 8s linear 9.2s infinite alternate forwards;        /* Firefox */
  158.         -webkit-animation: linkcolor 8s linear 9.2s infinite alternate forwards;        /* Safari 和 Chrome */
  159.         -o-animation: linkcolor 8s linear 9.2s infinite alternate forwards;        /* Opera */
  160. }
  161. .gbj_sm {
  162.         position: relative;
  163.         top: -150px;
  164. }
  165. /*动画执行阶段*/
  166. /*苍云logo*/
  167. @keyframes cangyun {
  168. 0% {
  169. transform:rotateY(0deg);
  170. opacity:0;
  171. }
  172. 25% {
  173. transform:rotateY(45deg);
  174. opacity:1;
  175. }
  176. 50% {
  177. transform:rotateY(90deg);
  178. opacity:1;
  179. }
  180. 75% {
  181. transform:rotateY(135deg);
  182. opacity:1;
  183. }
  184. 95% {
  185. transform:rotateY(180deg);
  186. opacity:0.2;
  187. }
  188. 100% {
  189. transform:rotateY(195deg);
  190. opacity:0;
  191. }
  192. }
  193. @-moz-keyframes cangyun /* Firefox */ {
  194. 0% {
  195. transform:rotateY(0deg);
  196. opacity:0;
  197. }
  198. 25% {
  199. transform:rotateY(45deg);
  200. opacity:1;
  201. }
  202. 50% {
  203. transform:rotateY(90deg);
  204. opacity:1;
  205. }
  206. 75% {
  207. transform:rotateY(135deg);
  208. opacity:1;
  209. }
  210. 95% {
  211. transform:rotateY(180deg);
  212. opacity:0.2;
  213. }
  214. 100% {
  215. transform:rotateY(195deg);
  216. opacity:0;
  217. }
  218. }
  219. @-webkit-keyframes cangyun /* Safari 和 Chrome */ {
  220. 0% {
  221. transform:rotateY(0deg);
  222. opacity:0;
  223. }
  224. 25% {
  225. transform:rotateY(45deg);
  226. opacity:1;
  227. }
  228. 50% {
  229. transform:rotateY(90deg);
  230. opacity:1;
  231. }
  232. 75% {
  233. transform:rotateY(135deg);
  234. opacity:1;
  235. }
  236. 95% {
  237. transform:rotateY(180deg);
  238. opacity:0.2;
  239. }
  240. 100% {
  241. transform:rotateY(195deg);
  242. opacity:0;
  243. }
  244. }
  245. @-o-keyframes cangyun /* Opera */ {
  246. 0% {
  247. transform:rotateY(0deg);
  248. opacity:0;
  249. }
  250. 25% {
  251. transform:rotateY(45deg);
  252. opacity:1;
  253. }
  254. 50% {
  255. transform:rotateY(90deg);
  256. opacity:1;
  257. }
  258. 75% {
  259. transform:rotateY(135deg);
  260. opacity:1;
  261. }
  262. 95% {
  263. transform:rotateY(180deg);
  264. opacity:0.2;
  265. }
  266. 100% {
  267. transform:rotateY(195deg);
  268. opacity:0;
  269. }
  270. }
  271. /*明教logo*/
  272. @keyframes mingjiao {
  273. 0% {
  274. transform:rotateY(180deg);
  275. opacity:0;
  276. }
  277. 25% {
  278. transform:rotateY(135deg);
  279. opacity:0.3;
  280. }
  281. 50% {
  282. transform:rotateY(90deg);
  283. opacity:0.6;
  284. }
  285. 75% {
  286. transform:rotateY(45deg);
  287. opacity:1;
  288. }
  289. 100% {
  290. transform:rotateY(0deg);
  291. opacity:0;
  292. }
  293. }
  294. @-moz-keyframes mingjiao /* Firefox */ {
  295. 0% {
  296. transform:rotateY(180deg);
  297. opacity:0;
  298. }
  299. 25% {
  300. transform:rotateY(135deg);
  301. opacity:0.3;
  302. }
  303. 50% {
  304. transform:rotateY(90deg);
  305. opacity:0.6;
  306. }
  307. 75% {
  308. transform:rotateY(45deg);
  309. opacity:1;
  310. }
  311. 100% {
  312. transform:rotateY(0deg);
  313. opacity:0;
  314. }
  315. }
  316. @-webkit-keyframes mingjiao /* Safari 和 Chrome */ {
  317. 0% {
  318. transform:rotateY(180deg);
  319. opacity:0;
  320. }
  321. 25% {
  322. transform:rotateY(135deg);
  323. opacity:0.3;
  324. }
  325. 50% {
  326. transform:rotateY(90deg);
  327. opacity:0.6;
  328. }
  329. 75% {
  330. transform:rotateY(45deg);
  331. opacity:1;
  332. }
  333. 100% {
  334. transform:rotateY(0deg);
  335. opacity:0;
  336. }
  337. }
  338. @-o-keyframes mingjiao /* Opera */ {
  339. 0% {
  340. transform:rotateY(180deg);
  341. opacity:0;
  342. }
  343. 25% {
  344. transform:rotateY(135deg);
  345. opacity:0.3;
  346. }
  347. 50% {
  348. transform:rotateY(90deg);
  349. opacity:0.6;
  350. }
  351. 75% {
  352. transform:rotateY(45deg);
  353. opacity:1;
  354. }
  355. 100% {
  356. transform:rotateY(0deg);
  357. opacity:0;
  358. }
  359. }
  360. /*SC背景*/
  361. @keyframes table1 {
  362. 0% {
  363. /*right:500px;*/
  364. opacity:0;
  365. }
  366. 100% {
  367. /*right:0px;*/
  368. opacity:1;
  369. }
  370. }
  371. @-moz-keyframes table1 /* Firefox */ {
  372. 0% {
  373. /*right:500px;*/
  374. opacity:0;
  375. }
  376. 100% {
  377. /*right:0px;*/
  378. opacity:1;
  379. }
  380. }
  381. @-webkit-keyframes table1 /* Safari 和 Chrome */ {
  382. 0% {
  383. /*right:500px;*/
  384. opacity:0;
  385. }
  386. 100% {
  387. /*right:0px;*/
  388. opacity:1;
  389. }
  390. }
  391. @-o-keyframes table1 /* Opera */ {
  392. 0% {
  393. /*right:500px;*/
  394. opacity:0;
  395. }
  396. 100% {
  397. /*right:0px;*/
  398. opacity:1;
  399. }
  400. }
  401. /*Staff列表*/
  402. @keyframes staff {
  403. 0% {
  404. left:360px;
  405. opacity:0;
  406. }
  407. 100% {
  408. left:590px;
  409. opacity:1;
  410. }
  411. }
  412. @-moz-keyframes staff /* Firefox */ {
  413. 0% {
  414. left:360px;
  415. opacity:0;
  416. }
  417. 100% {
  418. left:590px;
  419. opacity:1;
  420. }
  421. }
  422. @-webkit-keyframes staff /* Safari 和 Chrome */ {
  423. 0% {
  424. left:360px;
  425. opacity:0;
  426. }
  427. 100% {
  428. left:590px;
  429. opacity:1;
  430. }
  431. }
  432. @-o-keyframes staff /* Opera */ {
  433. 0% {
  434. left:360px;
  435. opacity:0;
  436. }
  437. 100% {
  438. left:590px;
  439. opacity:1;
  440. }
  441. }
  442. /*cast列表*/
  443. @keyframes cast {
  444. 0% {
  445. left:740px;
  446. opacity:0;
  447. }
  448. 100% {
  449. left:570px;
  450. opacity:1;
  451. }
  452. }
  453. @-moz-keyframes cast /* Firefox */ {
  454. 0% {
  455. left:740px;
  456. opacity:0;
  457. }
  458. 100% {
  459. left:570px;
  460. opacity:1;
  461. }
  462. }
  463. @-webkit-keyframes cast /* Safari 和 Chrome */ {
  464. 0% {
  465. left:740px;
  466. opacity:0;
  467. }
  468. 100% {
  469. left:570px;
  470. opacity:1;
  471. }
  472. }
  473. @-o-keyframes cast /* Opera */ {
  474. 0% {
  475. left:740px;
  476. opacity:0;
  477. }
  478. 100% {
  479. left:570px;
  480. opacity:1;
  481. }
  482. }
  483. /*chinadra链接*/
  484. @keyframes chinadra {
  485. 0% {
  486. top:-540px;
  487. opacity:0;
  488. }
  489. 100% {
  490. top:-330px;
  491. opacity:1;
  492. }
  493. }
  494. @-moz-keyframes chinadra /* Firefox */ {
  495. 0% {
  496. top:-540px;
  497. opacity:0;
  498. }
  499. 100% {
  500. top:-330px;
  501. opacity:1;
  502. }
  503. }
  504. @-webkit-keyframes chinadra /* Safari 和 Chrome */ {
  505. 0% {
  506. top:-540px;
  507. opacity:0;
  508. }
  509. 100% {
  510. top:-330px;
  511. opacity:1;
  512. }
  513. }
  514. @-o-keyframes chinadra /* Opera */ {
  515. 0% {
  516. top:-540px;
  517. opacity:0;
  518. }
  519. 100% {
  520. top:-330px;
  521. opacity:1;
  522. }
  523. }
  524. /*bilibili链接*/
  525. @keyframes bilibili {
  526. 0% {
  527. top:-540px;
  528. opacity:0;
  529. }
  530. 100% {
  531. top:-330px;
  532. opacity:1;
  533. }
  534. }
  535. @-moz-keyframes bilibili /* Firefox */ {
  536. 0% {
  537. top:-540px;
  538. opacity:0;
  539. }
  540. 100% {
  541. top:-330px;
  542. opacity:1;
  543. }
  544. }
  545. @-webkit-keyframes bilibili /* Safari 和 Chrome */ {
  546. 0% {
  547. top:-540px;
  548. opacity:0;
  549. }
  550. 100% {
  551. top:-330px;
  552. opacity:1;
  553. }
  554. }
  555. @-o-keyframes bilibili /* Opera */ {
  556. 0% {
  557. top:-540px;
  558. opacity:0;
  559. }
  560. 100% {
  561. top:-330px;
  562. opacity:1;
  563. }
  564. }
  565. /*missevan链接*/
  566. @keyframes missevan {
  567. 0% {
  568. top:-540px;
  569. opacity:0;
  570. }
  571. 100% {
  572. top:-330px;
  573. opacity:1;
  574. }
  575. }
  576. @-moz-keyframes missevan /* Firefox */ {
  577. 0% {
  578. top:-540px;
  579. opacity:0;
  580. }
  581. 100% {
  582. top:-330px;
  583. opacity:1;
  584. }
  585. }
  586. @-webkit-keyframes missevan /* Safari 和 Chrome */ {
  587. 0% {
  588. top:-540px;
  589. opacity:0;
  590. }
  591. 100% {
  592. top:-330px;
  593. opacity:1;
  594. }
  595. }
  596. @-o-keyframes missevan /* Opera */ {
  597. 0% {
  598. top:-540px;
  599. opacity:0;
  600. }
  601. 100% {
  602. top:-330px;
  603. opacity:1;
  604. }
  605. }
  606. /*baidudisk链接*/
  607. @keyframes baidudisk {
  608. 0% {
  609. top:-540px;
  610. opacity:0;
  611. }
  612. 100% {
  613. top:-330px;
  614. opacity:1;
  615. }
  616. }
  617. @-moz-keyframes baidudisk /* Firefox */ {
  618. 0% {
  619. top:-540px;
  620. opacity:0;
  621. }
  622. 100% {
  623. top:-330px;
  624. opacity:1;
  625. }
  626. }
  627. @-webkit-keyframes baidudisk /* Safari 和 Chrome */ {
  628. 0% {
  629. top:-540px;
  630. opacity:0;
  631. }
  632. 100% {
  633. top:-330px;
  634. opacity:1;
  635. }
  636. }
  637. @-o-keyframes baidudisk /* Opera */ {
  638. 0% {
  639. top:-540px;
  640. opacity:0;
  641. }
  642. 100% {
  643. top:-330px;
  644. opacity:1;
  645. }
  646. }
  647. /*linkcolor链接*/
  648. @keyframes linkcolor {
  649. 0% {
  650. color:#F00;
  651. }
  652. 20% {
  653. color:yellow;
  654. }
  655. 40% {
  656. color:green;
  657. }
  658. 60% {
  659. color:pink;
  660. }
  661. 80% {
  662. color:gry;
  663. }
  664. 100% {
  665. color:blue;
  666. }
  667. }
  668. @-moz-keyframes linkcolor /* Firefox */ {
  669. 0% {
  670. color:#F00;
  671. }
  672. 20% {
  673. color:yellow;
  674. }
  675. 40% {
  676. color:green;
  677. }
  678. 60% {
  679. color:pink;
  680. }
  681. 80% {
  682. color:gry;
  683. }
  684. 100% {
  685. color:blue;
  686. }
  687. }
  688. @-webkit-keyframes linkcolor /* Safari 和 Chrome */ {
  689. 0% {
  690. color:#F00;
  691. }
  692. 20% {
  693. color:yellow;
  694. }
  695. 40% {
  696. color:green;
  697. }
  698. 60% {
  699. color:pink;
  700. }
  701. 80% {
  702. color:gry;
  703. }
  704. 100% {
  705. color:blue;
  706. }
  707. }
  708. @-o-keyframes linkcolor /* Opera */ {
  709. 0% {
  710. color:#F00;
  711. }
  712. 20% {
  713. color:yellow;
  714. }
  715. 40% {
  716. color:green;
  717. }
  718. 60% {
  719. color:pink;
  720. }
  721. 80% {
  722. color:gry;
  723. }
  724. 100% {
  725. color:blue;
  726. }
  727. }
复制代码
回复

使用道具 举报

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

本版积分规则



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

GMT+8, 2019-1-20 06:17 , Processed in 0.143222 second(s), 26 queries .

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

© 2001-2013 Comsenz Inc.

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