找回密码
 立即注册

QQ登录

只需一步,快速开始

  • 代码风格:【视频背景海报】京东相机节视频背景海报头图banner
  • 适用平台:京东 
  • 使用方法:100%布局—自定义模块
  • 可否做成模板:点击查看定制详情
由于各种原因,好久没更新了;

陆续恢复日常更新,

同时进行大范围改版,敬请期待!


复制代码
  1. <style>
  2.     .user_jy47_tp9111540 {
  3.         width: 100%;
  4.         height: 808px;
  5.         overflow: hidden;
  6.         position: relative;
  7.         background-color: #060504;
  8.     }
  9.     .user_jy47_tp9111540-timeline {
  10.         display: block;
  11.         width: 1920px;
  12.         height: 133px;
  13.         position: absolute;
  14.         left: 50%;
  15.         transform: translateX(-50%);
  16.         top: 0;
  17.         z-index: 1;
  18.     }
  19.     .user_jy47_tp9111540-video {
  20.         display: block;
  21.         width: 1920px;
  22.         height: 808px;
  23.         position: absolute;
  24.         left: 50%;
  25.         transform: translateX(-50%);
  26.     }
  27.     .user_jy47_tp9111540-video .texture {
  28.         width: 100%;
  29.         height: 100%;
  30.         background: url('//img20.360buyimg.com/cms/jfs/t25198/37/1195644486/1648/26ca8e65/5b8cdc6eN9d57b4e4.png') 0 0 repeat;
  31.         z-index: 1;
  32.         position: absolute;
  33.     }
  34.     .user_jy47_tp9111540-video .video {
  35.         width: 1920px !important;
  36.         height: 100%;
  37.         position: relative;
  38.         left: 50%;
  39.         margin-left: -960px;
  40.         overflow: hidden;
  41.     }
  42.     .user_jy47_tp9111540-svg {
  43.         position: absolute;
  44.         z-index: 2;
  45.         top: 146px;
  46.         left: 50%;
  47.         transform: translateX(-45%);
  48.     }
  49.     .user_jy47_tp9111540-svg .words-for-IE {
  50.         display: none;
  51.         /* Chrome, Opera */
  52.         -moz-filter: blur(10px);
  53.         -ms-filter: blur(10px);
  54.         filter: blur(10px);
  55.         filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
  56.         /* IE6~IE9 */
  57.         transform: scale(.97);
  58.         opacity: 0.1;
  59.         filter: opacity(10);
  60.     }
  61.     .user_jy47_tp9111540-svg .words-for-IE.to-clear {
  62.         filter: none !important;
  63.         -webkit-filter: none !important;
  64.         /* Chrome, Opera */
  65.         -moz-filter: none !important;
  66.         -ms-filter: none !important;
  67.         transform: scale(1);
  68.         opacity: 1;
  69.         filter: opacity(100);
  70.         transition: all .8s ease-in;
  71.     }
  72. .user_jy47_tp9111540 .tag-bottom{
  73.     position: absolute;
  74.     bottom: 39px;
  75.     left: 50%;
  76.     transform: translateX(-50%);
  77. }
  78. </style>
  79. <div class="user_jy47_tp9111540">
  80. <img class="user_jy47_tp9111540-timeline" src="//img30.360buyimg.com/cms/jfs/t27112/313/263814112/133215/257da83d/5b8bd7adNb8d5c0c8.png" ks_mark="y" />
  81. <div class="user_jy47_tp9111540-video">
  82. <div class="texture">
  83. </div>
  84. <video class="video" src="//storage.jd.com/jshop-open/camera-head2.mp4" autoplay="" loop="" muted="">
  85. </video>
  86. </div>
  87. <h1 class="user_jy47_tp9111540-svg">
  88. <span class="words-for-IE to-clear"  style="display:block;width:976px;height:492px">
  89. <img class="words" x="0" y="0" width="976" height="492" src="//img13.360buyimg.com/cms/jfs/t1/99/23/1678/112529/5b9224eaE90c38acf/06d205f2d59f351a.png" alt="">
  90. </span>
  91. </h1>
  92. <img class="tag-bottom" src="//img30.360buyimg.com/cms/jfs/t26986/27/355905375/2459/49a82665/5b908468N8b6239c9.png" ks_mark="y" />
  93. </div>
复制代码
视频背景海报.jpg
分享至 : QQ空间
收藏

2 个回复

倒序浏览
这个厉害了。
回复 使用道具 举报
pto 建缘新军 2018-12-6 11:54:55
多谢老大的分享啊
回复 使用道具 举报