|
晋江原帖链接 http://bbs.jjwxc.net/showmsg.php?board=52&id=79971
HTML代码部分
- <center>
- <link rel="stylesheet" href="http://www.chinadra.com/ziqi/Gbj_css/nswqy.css" type="text/css" media="all" />
- <table id="gbj_table1">
- <tr>
- <td id="gbj_background">
- <ul id="gbj_staff">
- <h3>Staff:</h3>
- <li>策划&美工:蛋花【天禄客栈】/</li><li>
- 编剧:慕杉【深夜工作室】/</li><li>
- 导演:砚痕【无期之约】/</li><li>
- 后期:半夏尘鞅【醉美倾晴阁】/</li><li>
- 宣传:Corta_子祁【这个工作室】/</li>
- </ul><ul id="gbj_cast">
- <h3>Cast:</h3>
- <li>/陆遥:疯子【流连声色】</li><li>
- /薛皑:未眠【天禄客栈】</li><li>
- /燕苍离:王严肃【未来之声】</li><li>
- /陆月明:道长【魅素漪工作室】</li><li>
- /师弟&幼年陆遥&少年路月明:龙咩【语翼配音组】</li><li>
- /师姐&师妹:泠酒花萝:郁望梦始【第二人格工作室】</li><li>
- /卡卢比:洛木</li>
- </ul>
- </td>
- </tr>
- </table>
- <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>
- <li id="href_missevan"><a href="http://www.missevan.com/sound/player?id=906530" target="_blank"><font class="link_color">Missevan</font></a></li>
- <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>
- <li id="href_baidudisk"><a href="https://pan.baidu.com/s/1hWvIZukz80HhN0IDfRz0cQ" target="_blank"><font class="link_color">剧包下载</font></a></li>
- </table>
- </center>
- <img src="http://www.chinadra.com/ziqi/Gbj_photo/MyLove/cangyun.png" id="img_cy"/>
- <img src="http://www.chinadra.com/ziqi/Gbj_photo/MyLove/mingjiao.png" id="img_mj"/>
- <center><font class="gbj_sh">-----声明-----<br>
- 本作品中采用的音乐、音效等素材均来自于互联网,著作权归原作者或发行公司所有。<br>
- 本作品仅供配音爱好者个人学习、交流,请勿进行二次修改或者用于任何商业用途。<br>
- 本作品开放转载,转载时请注明出处。</font></center>
复制代码
CSS部分
- @charset "utf-8";
- /* CSS Document */
- body {
- background-color: #e8f3ffe0;
- }
- #gbj_background {
- background-image: url(http://www.chinadra.com/ziqi/Gbj_photo/MyLove/background.png);
- }
- #gbj_staff, #gbj_cast {
- list-style: none;
- position: relative;
- z-index: 12;
- color: #FFF;
- width: 300px;
- opacity: 0;
- }
- #gbj_cast {
- top: -210px;
- text-align: left;
- left: 540px;
- }
- #gbj_staff {
- top: 260px;
- text-align: right;
- left: 560px;
- }
- #gbj_table1 {
- width: 1008px;
- height: 634px;
- opacity: 0;
- position: relative;
- z-index: 10;
- left: -120px;
- border: groove;
- }
- #img_cy, #img_mj {
- position: absolute;
- top: 300px;
- left: 35%;
- z-index: 8;
- opacity: 0;
- }
- #href_bilibili, #href_missevan, #href_baidudisk, #href_chinadra {
- list-style: none;
- border-radius: 50%;
- background-color: rgba(255,255,255,0.6);
- position: relative;
- top: -330px;
- z-index: 12;
- margin-bottom: -35px;
- opacity: 0;
- }
- #href_chinadra {
- right: 300px;
- width: 100px;
- height: 100px;
- line-height: 100px;
- font-size: 17px;
- border-style: inset;
- }
- #href_missevan {
- right: 110px;
- width: 90px;
- height: 90px;
- line-height: 90px;
- font-size: 15px;
- border-style: outset;
- }
- #href_bilibili {
- right: 410px;
- width: 80px;
- height: 80px;
- line-height: 80px;
- font-size: 15px;
- border-style: outset;
- }
- #href_baidudisk {
- right: 220px;
- width: 130px;
- height: 130px;
- line-height: 130px;
- font-size: 22px;
- border-style: inset;
- }
- li a:hover, li a:link, li a:active, li a:visited {
- text-decoration: none;
- }
- .link_color {
- color: #F00;
- }
- .gbj_sh {
- position: relative;
- top: -100px;
- }
- @media screen and (min-width: 1200px) {
- #img_cy, #img_mj {
- left: 40%;
- }
- }
- /*绑定动画阶段css*/
- #img_cy {
- animation: cangyun 3s linear 0s 1;
- -moz-animation: cangyun 3s linear 0s 1; /* Firefox */
- -webkit-animation: cangyun 3s linear 0s 1; /* Safari 和 Chrome */
- -o-animation: cangyun 3s linear 0s 1; /* Opera */
- }
- #img_mj {
- animation: mingjiao 3.5s linear 2.9s 1;
- -moz-animation: mingjiao 3.5s linear 2.9s 1; /* Firefox */
- -webkit-animation: mingjiao 3.5s linear 2.9s 1; /* Safari 和 Chrome */
- -o-animation: mingjiao 3.5s linear 2.9s 1; /* Opera */
- }
- #gbj_table1 {
- animation: table1 3s linear 6.5s 1 forwards;
- -moz-animation: table1 3s linear 6.5s 1 forwards; /* Firefox */
- -webkit-animation: table1 3s linear 6.5s 1 forwards; /* Safari 和 Chrome */
- -o-animation: table1 3s linear 6.5s 1 forwards; /* Opera */
- }
- #gbj_staff {
- animation: staff 2s linear 8.5s 1 forwards;
- -moz-animation: staff 2s linear 8.5s 1 forwards; /* Firefox */
- -webkit-animation: staff 2s linear 8.5s 1 forwards; /* Safari 和 Chrome */
- -o-animation: staff 2s linear 8.5s 1 forwards; /* Opera */
- }
- #gbj_cast {
- animation: cast 2s linear 8.5s 1 forwards;
- -moz-animation: cast 2s linear 8.5s 1 forwards; /* Firefox */
- -webkit-animation: cast 2s linear 8.5s 1 forwards; /* Safari 和 Chrome */
- -o-animation: cast 2s linear 8.5s 1 forwards; /* Opera */
- }
- #href_chinadra {
- animation: chinadra 2s linear 9s 1 forwards;
- -moz-animation: chinadra 2s linear 9s 1 forwards; /* Firefox */
- -webkit-animation: chinadra 2s linear 9s 1 forwards; /* Safari 和 Chrome */
- -o-animation: chinadra 2s linear 9s 1 forwards; /* Opera */
- }
- #href_missevan {
- animation: missevan 2s linear 9.4s 1 forwards;
- -moz-animation: missevan 2s linear 9.4s 1 forwards; /* Firefox */
- -webkit-animation: missevan 2s linear 9.4s 1 forwards; /* Safari 和 Chrome */
- -o-animation: missevan 2s linear 9.4s 1 forwards; /* Opera */
- }
- #href_bilibili {
- animation: bilibili 2s linear 9.9s 1 forwards;
- -moz-animation: bilibili 2s linear 9.9s 1 forwards; /* Firefox */
- -webkit-animation: bilibili 2s linear 9.9s 1 forwards; /* Safari 和 Chrome */
- -o-animation: bilibili 2s linear 9.9s 1 forwards; /* Opera */
- }
- #href_baidudisk {
- animation: baidudisk 2s linear 10.2s 1 forwards;
- -moz-animation: baidudisk 2s linear 10.2s 1 forwards; /* Firefox */
- -webkit-animation: baidudisk 2s linear 10.2s 1 forwards; /* Safari 和 Chrome */
- -o-animation: baidudisk 2s linear 10.2s 1 forwards; /* Opera */
- }
- .link_color {
- animation: linkcolor 8s linear 9.2s infinite alternate forwards;
- -moz-animation: linkcolor 8s linear 9.2s infinite alternate forwards; /* Firefox */
- -webkit-animation: linkcolor 8s linear 9.2s infinite alternate forwards; /* Safari 和 Chrome */
- -o-animation: linkcolor 8s linear 9.2s infinite alternate forwards; /* Opera */
- }
- .gbj_sm {
- position: relative;
- top: -150px;
- }
- /*动画执行阶段*/
- /*苍云logo*/
- @keyframes cangyun {
- 0% {
- transform:rotateY(0deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:1;
- }
- 75% {
- transform:rotateY(135deg);
- opacity:1;
- }
- 95% {
- transform:rotateY(180deg);
- opacity:0.2;
- }
- 100% {
- transform:rotateY(195deg);
- opacity:0;
- }
- }
- @-moz-keyframes cangyun /* Firefox */ {
- 0% {
- transform:rotateY(0deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:1;
- }
- 75% {
- transform:rotateY(135deg);
- opacity:1;
- }
- 95% {
- transform:rotateY(180deg);
- opacity:0.2;
- }
- 100% {
- transform:rotateY(195deg);
- opacity:0;
- }
- }
- @-webkit-keyframes cangyun /* Safari 和 Chrome */ {
- 0% {
- transform:rotateY(0deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:1;
- }
- 75% {
- transform:rotateY(135deg);
- opacity:1;
- }
- 95% {
- transform:rotateY(180deg);
- opacity:0.2;
- }
- 100% {
- transform:rotateY(195deg);
- opacity:0;
- }
- }
- @-o-keyframes cangyun /* Opera */ {
- 0% {
- transform:rotateY(0deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:1;
- }
- 75% {
- transform:rotateY(135deg);
- opacity:1;
- }
- 95% {
- transform:rotateY(180deg);
- opacity:0.2;
- }
- 100% {
- transform:rotateY(195deg);
- opacity:0;
- }
- }
- /*明教logo*/
- @keyframes mingjiao {
- 0% {
- transform:rotateY(180deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(135deg);
- opacity:0.3;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:0.6;
- }
- 75% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 100% {
- transform:rotateY(0deg);
- opacity:0;
- }
- }
- @-moz-keyframes mingjiao /* Firefox */ {
- 0% {
- transform:rotateY(180deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(135deg);
- opacity:0.3;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:0.6;
- }
- 75% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 100% {
- transform:rotateY(0deg);
- opacity:0;
- }
- }
- @-webkit-keyframes mingjiao /* Safari 和 Chrome */ {
- 0% {
- transform:rotateY(180deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(135deg);
- opacity:0.3;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:0.6;
- }
- 75% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 100% {
- transform:rotateY(0deg);
- opacity:0;
- }
- }
- @-o-keyframes mingjiao /* Opera */ {
- 0% {
- transform:rotateY(180deg);
- opacity:0;
- }
- 25% {
- transform:rotateY(135deg);
- opacity:0.3;
- }
- 50% {
- transform:rotateY(90deg);
- opacity:0.6;
- }
- 75% {
- transform:rotateY(45deg);
- opacity:1;
- }
- 100% {
- transform:rotateY(0deg);
- opacity:0;
- }
- }
- /*SC背景*/
- @keyframes table1 {
- 0% {
- /*right:500px;*/
- opacity:0;
- }
- 100% {
- /*right:0px;*/
- opacity:1;
- }
- }
- @-moz-keyframes table1 /* Firefox */ {
- 0% {
- /*right:500px;*/
- opacity:0;
- }
- 100% {
- /*right:0px;*/
- opacity:1;
- }
- }
- @-webkit-keyframes table1 /* Safari 和 Chrome */ {
- 0% {
- /*right:500px;*/
- opacity:0;
- }
- 100% {
- /*right:0px;*/
- opacity:1;
- }
- }
- @-o-keyframes table1 /* Opera */ {
- 0% {
- /*right:500px;*/
- opacity:0;
- }
- 100% {
- /*right:0px;*/
- opacity:1;
- }
- }
- /*Staff列表*/
- @keyframes staff {
- 0% {
- left:360px;
- opacity:0;
- }
- 100% {
- left:590px;
- opacity:1;
- }
- }
- @-moz-keyframes staff /* Firefox */ {
- 0% {
- left:360px;
- opacity:0;
- }
- 100% {
- left:590px;
- opacity:1;
- }
- }
- @-webkit-keyframes staff /* Safari 和 Chrome */ {
- 0% {
- left:360px;
- opacity:0;
- }
- 100% {
- left:590px;
- opacity:1;
- }
- }
- @-o-keyframes staff /* Opera */ {
- 0% {
- left:360px;
- opacity:0;
- }
- 100% {
- left:590px;
- opacity:1;
- }
- }
- /*cast列表*/
- @keyframes cast {
- 0% {
- left:740px;
- opacity:0;
- }
- 100% {
- left:570px;
- opacity:1;
- }
- }
- @-moz-keyframes cast /* Firefox */ {
- 0% {
- left:740px;
- opacity:0;
- }
- 100% {
- left:570px;
- opacity:1;
- }
- }
- @-webkit-keyframes cast /* Safari 和 Chrome */ {
- 0% {
- left:740px;
- opacity:0;
- }
- 100% {
- left:570px;
- opacity:1;
- }
- }
- @-o-keyframes cast /* Opera */ {
- 0% {
- left:740px;
- opacity:0;
- }
- 100% {
- left:570px;
- opacity:1;
- }
- }
- /*chinadra链接*/
- @keyframes chinadra {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-moz-keyframes chinadra /* Firefox */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-webkit-keyframes chinadra /* Safari 和 Chrome */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-o-keyframes chinadra /* Opera */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- /*bilibili链接*/
- @keyframes bilibili {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-moz-keyframes bilibili /* Firefox */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-webkit-keyframes bilibili /* Safari 和 Chrome */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-o-keyframes bilibili /* Opera */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- /*missevan链接*/
- @keyframes missevan {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-moz-keyframes missevan /* Firefox */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-webkit-keyframes missevan /* Safari 和 Chrome */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-o-keyframes missevan /* Opera */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- /*baidudisk链接*/
- @keyframes baidudisk {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-moz-keyframes baidudisk /* Firefox */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-webkit-keyframes baidudisk /* Safari 和 Chrome */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- @-o-keyframes baidudisk /* Opera */ {
- 0% {
- top:-540px;
- opacity:0;
- }
- 100% {
- top:-330px;
- opacity:1;
- }
- }
- /*linkcolor链接*/
- @keyframes linkcolor {
- 0% {
- color:#F00;
- }
- 20% {
- color:yellow;
- }
- 40% {
- color:green;
- }
- 60% {
- color:pink;
- }
- 80% {
- color:gry;
- }
- 100% {
- color:blue;
- }
- }
- @-moz-keyframes linkcolor /* Firefox */ {
- 0% {
- color:#F00;
- }
- 20% {
- color:yellow;
- }
- 40% {
- color:green;
- }
- 60% {
- color:pink;
- }
- 80% {
- color:gry;
- }
- 100% {
- color:blue;
- }
- }
- @-webkit-keyframes linkcolor /* Safari 和 Chrome */ {
- 0% {
- color:#F00;
- }
- 20% {
- color:yellow;
- }
- 40% {
- color:green;
- }
- 60% {
- color:pink;
- }
- 80% {
- color:gry;
- }
- 100% {
- color:blue;
- }
- }
- @-o-keyframes linkcolor /* Opera */ {
- 0% {
- color:#F00;
- }
- 20% {
- color:yellow;
- }
- 40% {
- color:green;
- }
- 60% {
- color:pink;
- }
- 80% {
- color:gry;
- }
- 100% {
- color:blue;
- }
- }
复制代码
|
|