无限中抓

 找回密码
 注册中抓

QQ登录

只需一步,快速开始

扫一扫,访问微社区

只需一步,快速开始

搜索
查看: 607|回复: 0

[技术交流] 《穿越黑子霸道总裁爱上重生修仙王妃》宣传帖开源

[复制链接]
发表于 2018-8-17 19:08:02 | 显示全部楼层 |阅读模式
晋江原帖http://bbs.jjwxc.net/showmsg.php?board=52&id=80446
CSS部分
  1. body {
  2.         background-color: rgb(255, 231, 247);
  3.         overflow-x: hidden;
  4. }
  5. .text-gradient {
  6.         display: inline-block;
  7.         font-size: 15px;
  8.         background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(62, 82, 112, 1)), to(rgba(245, 117, 128, 1)));
  9.         -webkit-background-clip: text;
  10.         -webkit-text-fill-color: transparent;
  11. }
  12. .main_post_position {
  13.         position: relative;
  14.         left: 13%;
  15.         animation: filpbook_position 2s;
  16.         -webkit-animation: filpbook_position 2s;
  17.         animation-fill-mode: forwards;
  18.         animation-delay: 8s;
  19.         animation-timing-function: linear;
  20.         -moz-animation-timing-function: linear;
  21.         -webkit-animation-timing-function: linear;
  22. }
  23. .mls_front_page {
  24.         background-image: url(mls_front_page.jpg);
  25.         z-index: 50;
  26.         animation: filpbook_front 5s ease-in 10s 1;
  27.         -webkit-animation: filpbook_front 5s ease-in 10s 1;
  28.         -moz-animation: filpbook_front 5s ease-in 10s 1;
  29.         animation-fill-mode: forwards;
  30.         opacity: 1;
  31. }
  32. .mls_second_page {
  33.         background-image: url(mls_second_page.jpg);
  34.         z-index: 40;
  35.         animation: filpbook_second 5s ease-in 10s 1;
  36.         -moz-animation: filpbook_second 5s ease-in 10s 1;
  37.         -webkit-animation: filpbook_second 5s ease-in 10s 1;
  38.         animation-fill-mode: forwards;
  39.         opacity: 0;
  40. }
  41. .mls_third_page {
  42.         background-image: url(mls_third_page.jpg);
  43.         z-index: 30;
  44. }
  45. .mls_front_page, .mls_second_page, .mls_third_page {
  46.         background-size: 100%;
  47.         background-repeat: no-repeat;
  48.         height: 692px;
  49.         width: 576px;
  50.         left: 50%;
  51.         position: absolute;
  52.         top: 30px;
  53.         transform-origin: 0 50%;
  54.         animation-timing-function: ease-in;
  55.         -moz-animation-timing-function: ease-in;
  56.         -webkit-animation-timing-function: ease-in;
  57. }
  58. .mls_table1 {
  59.         margin: auto auto;
  60. }
  61. .butterfly1 {
  62.         position: absolute;
  63.         left: 45%;
  64.         top: 500px;
  65.         transform: rotate(20deg);
  66.         z-index: 60;
  67.         background-image: url(butterfly.gif);
  68.         height: 191px;
  69.         width: 203px;
  70.         background-repeat: no-repeat;
  71.         background-size: 40%;
  72.         animation: butterfly1 5s linear 3s 1;
  73.         -moz-animation: butterfly1 5s linear 3s 1;
  74.         -webkit-animation: butterfly1 5s linear 3s 1;
  75.         animation-fill-mode: forwards;
  76. }
  77. .butterfly2 {
  78.         position: absolute;
  79.         left: 20%;
  80.         transform: rotate(-90deg);
  81.         z-index: 60;
  82.         background-image: url(butterfly2.gif);
  83.         height: 191px;
  84.         width: 203px;
  85.         background-repeat: no-repeat;
  86.         background-size: 40%;
  87.         animation: butterfly2 5s linear 10s 1;
  88.         -moz-animation: butterfly2 5s linear 10s 1;
  89.         -webkit-animation: butterfly2 5s linear 10s 1;
  90.         animation-fill-mode: forwards;
  91.         opacity: 0;
  92. }
  93. .butterfly3 {
  94.         height: 67px;
  95.         z-index: 60;
  96.         position: relative;
  97.         background-size: 70%;
  98.         background-repeat: no-repeat;
  99.         left: -32px;
  100.         top: 32px;
  101.         transform: rotate(-20deg);
  102.         background-image: url(butterfly3.gif);
  103.         animation: butterfly3 3s linear 15s 1;
  104.         -moz-animation: butterfly3 3s linear 15s 1;
  105.         -webkit-animation: butterfly3 3s linear 15s 1;
  106.         animation-fill-mode: forwards;
  107.         opacity: 0;
  108. }
  109. /*海报占位*/
  110. .mls_placehold {
  111.         height: 660px;
  112. }
  113. .mls_placehold2 {
  114.         width: 90px;
  115. }
  116. /*广播剧资源*/
  117. .gbj_href {
  118.         align: center;
  119. }
  120. .mls_wxzz, .mls_blbl, .mls_me, .mls_lz, .mls_xmly {
  121.         border-style: groove;
  122.         border-width: 2px;
  123.         width: 20px;
  124.         height: 130px;
  125.         text-align: -webkit-center;
  126.         padding: 0px 10px;
  127.         font-weight: 600;
  128.         font-size: larger;
  129.         border-color: #efc8b0c9;
  130.         text-shadow: 2px 6px 20px #efff0036;
  131.         box-shadow: 6px 7px 5px #88888866;
  132. }

  133. /*动画执行阶段on*/
  134. @keyframes filpbook_front {
  135. 0% {
  136. transform:scaleX(1) rotateX(0deg) rotateY(0deg);
  137. opacity:1;
  138. }
  139. 40% {
  140. transform:scaleX(0) rotateX(-6deg) rotateY(72deg);
  141. opacity:0.5;
  142. }
  143. 50% {
  144. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  145. opacity:0;
  146. }
  147. 100% {
  148. transform:scaleX(-1) rotateX(0deg) rotateY(180deg);
  149. opacity:0;
  150. }
  151. }
  152. @keyframes filpbook_second {
  153. 0% {
  154. transform:scaleX(1) rotateX(0deg) rotateY(180deg);
  155. opacity:0;
  156. }
  157. 40% {
  158. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  159. opacity:0;
  160. }
  161. 50% {
  162. transform:scaleX(0) rotateX(-6deg) rotateY(78deg);
  163. opacity:0.1;
  164. }
  165. 100% {
  166. transform:scaleX(-1) rotateX(0deg) rotateY(0deg);
  167. opacity:1;
  168. }
  169. }
  170. @keyframes filpbook_position {
  171. from {
  172. left:13%;
  173. }
  174. to {
  175.         left: 50%
  176. }
  177. }
  178. @keyframes butterfly1 {
  179. 0% {
  180. left: 45%;
  181. top: 500px;
  182. transform: rotate(20deg);
  183. opacity:1;
  184. }
  185. 10% {
  186. left: 45%;
  187. top: 500px;
  188. transform: rotate(40deg);
  189. opacity:1;
  190. }
  191. 100% {
  192. left: 100%;
  193. top: 0px;
  194. transform: rotate(40deg);
  195. opacity:0;
  196. }
  197. }
  198. @keyframes butterfly2 {
  199. 0% {
  200. left: 100%;
  201. top: 500px;
  202. opacity:0;
  203. }
  204. 10% {
  205. left: 90%;
  206. top: 500px;
  207. opacity:1;
  208. }
  209. 90% {
  210. left: 10%;
  211. top: 50px;
  212. opacity:1;
  213. }
  214. 100% {
  215. left: 0%;
  216. top: 0px;
  217. opacity:0;
  218. }
  219. }
  220. @keyframes butterfly3 {
  221. from {
  222. left: 60px;
  223. top: 132px;
  224. opacity:0;
  225. }
  226. to {
  227.         left: -32px;
  228.         top: 32px;
  229.         opacity: 1;
  230. }
  231. }
  232. /*webkit*/
  233. @-webkit-keyframes filpbook_front {
  234. 0% {
  235. transform:scaleX(1) rotateX(0deg) rotateY(0deg);
  236. opacity:1;
  237. }
  238. 40% {
  239. transform:scaleX(0) rotateX(-6deg) rotateY(72deg);
  240. opacity:0.5;
  241. }
  242. 50% {
  243. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  244. opacity:0;
  245. }
  246. 100% {
  247. transform:scaleX(-1) rotateX(0deg) rotateY(180deg);
  248. opacity:0;
  249. }
  250. }
  251. @-webkit-keyframes filpbook_second {
  252. 0% {
  253. transform:scaleX(1) rotateX(0deg) rotateY(180deg);
  254. opacity:0;
  255. }
  256. 40% {
  257. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  258. opacity:0;
  259. }
  260. 50% {
  261. transform:scaleX(0) rotateX(-6deg) rotateY(78deg);
  262. opacity:0.1;
  263. }
  264. 100% {
  265. transform:scaleX(-1) rotateX(0deg) rotateY(0deg);
  266. opacity:1;
  267. }
  268. }
  269. @-webkit-keyframes filpbook_position {
  270. from {
  271. left:13%;
  272. }
  273. to {
  274.         left: 50%
  275. }
  276. }
  277. @-webkit-keyframes butterfly1 {
  278. 0% {
  279. left: 45%;
  280. top: 500px;
  281. transform: rotate(20deg);
  282. opacity:1;
  283. }
  284. 10% {
  285. left: 45%;
  286. top: 500px;
  287. transform: rotate(40deg);
  288. opacity:1;
  289. }
  290. 100% {
  291. left: 100%;
  292. top: 0px;
  293. transform: rotate(40deg);
  294. opacity:0;
  295. }
  296. }
  297. @-webkit-keyframes butterfly2 {
  298. 0% {
  299. left: 100%;
  300. top: 500px;
  301. opacity:0;
  302. }
  303. 10% {
  304. left: 90%;
  305. top: 500px;
  306. opacity:1;
  307. }
  308. 90% {
  309. left: 10%;
  310. top: 50px;
  311. opacity:1;
  312. }
  313. 100% {
  314. left: 0%;
  315. top: 0px;
  316. opacity:0;
  317. }
  318. }
  319. @-webkit-keyframes butterfly3 {
  320. from {
  321. left: 60px;
  322. top: 132px;
  323. opacity:0;
  324. }
  325. to {
  326.         left: -32px;
  327.         top: 32px;
  328.         opacity: 1;
  329. }
  330. }
  331. /*moz*/
  332. @-moz-keyframes filpbook_front {
  333. 0% {
  334. transform:scaleX(1) rotateX(0deg) rotateY(0deg);
  335. opacity:1;
  336. }
  337. 40% {
  338. transform:scaleX(0) rotateX(-6deg) rotateY(72deg);
  339. opacity:0.5;
  340. }
  341. 50% {
  342. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  343. opacity:0;
  344. }
  345. 100% {
  346. transform:scaleX(-1) rotateX(0deg) rotateY(180deg);
  347. opacity:0;
  348. }
  349. }
  350. @-moz-keyframes filpbook_second {
  351. 0% {
  352. transform:scaleX(1) rotateX(0deg) rotateY(180deg);
  353. opacity:0;
  354. }
  355. 40% {
  356. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  357. opacity:0;
  358. }
  359. 50% {
  360. transform:scaleX(0) rotateX(-6deg) rotateY(78deg);
  361. opacity:0.1;
  362. }
  363. 100% {
  364. transform:scaleX(-1) rotateX(0deg) rotateY(0deg);
  365. opacity:1;
  366. }
  367. }
  368. @-moz-keyframes filpbook_position {
  369. from {
  370. left:13%;
  371. }
  372. to {
  373.         left: 50%
  374. }
  375. }
  376. @-moz-keyframes butterfly1 {
  377. 0% {
  378. left: 45%;
  379. top: 500px;
  380. transform: rotate(20deg);
  381. opacity:1;
  382. }
  383. 10% {
  384. left: 45%;
  385. top: 500px;
  386. transform: rotate(40deg);
  387. opacity:1;
  388. }
  389. 100% {
  390. left: 100%;
  391. top: 0px;
  392. transform: rotate(40deg);
  393. opacity:0;
  394. }
  395. }
  396. @-moz-keyframes butterfly2 {
  397. 0% {
  398. left: 100%;
  399. top: 500px;
  400. opacity:0;
  401. }
  402. 10% {
  403. left: 90%;
  404. top: 500px;
  405. opacity:1;
  406. }
  407. 90% {
  408. left: 10%;
  409. top: 50px;
  410. opacity:1;
  411. }
  412. 100% {
  413. left: 0%;
  414. top: 0px;
  415. opacity:0;
  416. }
  417. }
  418. @-moz-keyframes butterfly3 {
  419. from {
  420. left: 60px;
  421. top: 132px;
  422. opacity:0;
  423. }
  424. to {
  425.         left: -32px;
  426.         top: 32px;
  427.         opacity: 1;
  428. }
  429. }
  430. /*o*/
  431. @-o-keyframes filpbook_front {
  432. 0% {
  433. transform:scaleX(1) rotateX(0deg) rotateY(0deg);
  434. opacity:1;
  435. }
  436. 40% {
  437. transform:scaleX(0) rotateX(-6deg) rotateY(72deg);
  438. opacity:0.5;
  439. }
  440. 50% {
  441. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  442. opacity:0;
  443. }
  444. 100% {
  445. transform:scaleX(-1) rotateX(0deg) rotateY(180deg);
  446. opacity:0;
  447. }
  448. }
  449. @-o-keyframes filpbook_second {
  450. 0% {
  451. transform:scaleX(1) rotateX(0deg) rotateY(180deg);
  452. opacity:0;
  453. }
  454. 40% {
  455. transform:scaleX(0) rotateX(-6deg) rotateY(90deg);
  456. opacity:0;
  457. }
  458. 50% {
  459. transform:scaleX(0) rotateX(-6deg) rotateY(78deg);
  460. opacity:0.1;
  461. }
  462. 100% {
  463. transform:scaleX(-1) rotateX(0deg) rotateY(0deg);
  464. opacity:1;
  465. }
  466. }
  467. @-o-keyframes filpbook_position {
  468. from {
  469. left:13%;
  470. }
  471. to {
  472.         left: 50%
  473. }
  474. }
  475. @-o-keyframes butterfly1 {
  476. 0% {
  477. left: 45%;
  478. top: 500px;
  479. transform: rotate(20deg);
  480. opacity:1;
  481. }
  482. 10% {
  483. left: 45%;
  484. top: 500px;
  485. transform: rotate(40deg);
  486. opacity:1;
  487. }
  488. 100% {
  489. left: 100%;
  490. top: 0px;
  491. transform: rotate(40deg);
  492. opacity:0;
  493. }
  494. }
  495. @-o-keyframes butterfly2 {
  496. 0% {
  497. left: 100%;
  498. top: 500px;
  499. opacity:0;
  500. }
  501. 10% {
  502. left: 90%;
  503. top: 500px;
  504. opacity:1;
  505. }
  506. 90% {
  507. left: 10%;
  508. top: 50px;
  509. opacity:1;
  510. }
  511. 100% {
  512. left: 0%;
  513. top: 0px;
  514. opacity:0;
  515. }
  516. }
  517. @-o-keyframes butterfly3 {
  518. from {
  519. left: 60px;
  520. top: 132px;
  521. opacity:0;
  522. }
  523. to {
  524.         left: -32px;
  525.         top: 32px;
  526.         opacity: 1;
  527. }
  528. }
  529. /*动画执行阶段off*/
  530. /*媒体查询*/
  531. @media screen and (max-height: 691px) {
  532. .mls_front_page, .mls_second_page, .mls_third_page {
  533.         height: 606px;
  534.         width: 504px;
  535. }
  536. /*海报占位*/
  537. .mls_placehold {
  538.         height: 580px;
  539. }
  540. }
  541. @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
  542. .masked {
  543.         background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  544.         -webkit-text-fill-color: transparent;
  545.         -webkit-background-clip: text;
  546.         -webkit-background-size: 200% 100%;
  547.         -webkit-animation: masked-animation 3s infinite linear;
  548. }
  549. }
  550. @-webkit-keyframes masked-animation {
  551. 0% {
  552. background-position: 0 0;
  553. }
  554. 100% {
  555. background-position: -100% 0;
  556. }
  557. }
复制代码

html部分:
  1. <table class="main_post_position">
  2.   <tr>
  3.     <td class="mls_front_page"></td>
  4.   </tr>
  5.   <tr>
  6.     <td class="mls_second_page"></td>
  7.   </tr>
  8.   <tr>
  9.     <td class="mls_third_page"></td>
  10.   </tr>
  11. </table>
  12. <table class="mls_table1">
  13.   <tr>
  14.     <td class="butterfly1"></td>
  15.     <td class="butterfly2"></td>
  16.   </tr>
  17.   <tr>
  18.     <td class="mls_placehold"></td>
  19.   </tr>
  20.   <tr>
  21.     <td></td>
  22.     <td class="butterfly3"></td>
  23.   </tr>
  24.   <tr class="gbj_href masked">
  25.     <td class="mls_wxzz"><a href="http://www.chinadra.com/guangboju/gbj_13917.html" target="_blank">无限中抓</a></td>
  26.     <td class="mls_placehold2"></td>
  27.     <td class="mls_blbl"><a href="https://www.bilibili.com/audio/au454432?type=1" target="_blank">哔哩哔哩</a></td>
  28.     <td class="mls_placehold2"></td>
  29.     <td class="mls_me"><a href="http://www.missevan.com/sound/player?id=1055709" target="_blank">猫耳</a></td>
  30.     <td class="mls_placehold2"></td>
  31.     <td class="mls_lz"><a href="https://www.lizhi.fm/1042850/2686318445039709190" target="_blank">荔枝</a></td>
  32.     <td class="mls_placehold2"></td>
  33.     <td class="mls_xmly"><a href="https://www.ximalaya.com/guangbojv/11497237/105305191
  34. " target="_blank">喜马拉雅</a></td>
  35.   </tr>
  36.   <tr></tr>
  37. </table>
复制代码



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

本版积分规则



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

GMT+8, 2018-12-15 21:52 , Processed in 0.188866 second(s), 25 queries .

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

© 2001-2013 Comsenz Inc.

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