设为首页 收藏本站
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

[图片特效] 【背景视频】京东官方背景是视频海报特效代码分享

2 1086
<style>.user_jy47_w990{position:relative;}
.user_jy47_w990 a{font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;}

.user_jy47_fashion-head{width:100%;height:670px;position:relative;}
.user_jy47_user_jy47_f-h-title{width:990px;position:relative;left:50%;margin-left:-495px;margin-top:-648px;}
.user_jy47_user_jy47_f-h-title span{display:block;position:absolute;left:240px;top:327px;font:bold 30px "微软雅黑";color:#ffffff;-webkit-transform: rotate(-2deg);transform: rotate(-2deg);}
.user_jy47_dot-mask{position:absolute;width:1920px;height:1117px;top:0;left:0;background:url('http://img14.360buyimg.com/cms/jfs/t1159/302/863592187/15421/fd135dde/55507cc2N253fa1c5.png');}
.user_jy47_user_jy47_f-h-shops{width:918px;height:265px;margin-left:-459px;left:50%;position:relative;top:-5px;}
.user_jy47_user_jy47_f-h-shops a{position:absolute;bottom:0;opacity:0;filter:alpha(opacity=100);}
.user_jy47_s-one{width:228px;height:260px;-webkit-animation: slideInR-1 0.1s 1s ease-out both;animation: slideInR-1 0.1s 1s ease-out both;margin-bottom:13px;left:0;}
.user_jy47_s-two{width:235px;height:260px;-webkit-animation: slideInR-2 0.1s 1.1s ease-out both;animation: slideInR-2 0.1s 1.1s ease-out both;left:231px;}
.user_jy47_s-three{width:215px;height:260px;margin-bottom:15px;-webkit-animation: slideInR-3 0.1s 1.2s ease-out both;animation: slideInR-3 0.1s 1.2s ease-out both;left:480px;}
.user_jy47_s-four{width:209px;height:260px;-webkit-animation: slideInR-4 0.1s 1.3s ease-out both;animation: slideInR-4 0.1s 1.3s ease-out both;margin-bottom:10px;left:700px;}

.user_jy47_f-floor h2{background:url() no-repeat center center;height:106px;margin:35px 0;text-indent:-9999em;position:relative;margin-left:-137px;left:50%;width:274px;}
.user_jy47_f-trends h2{background-position:0 0;}
.user_jy47_f-promot h2{background-position:0 -106px;}

@-webkit-keyframes slideInR-1{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:0;}
}
@keyframes slideInR-1{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:0;}
}
@-webkit-keyframes slideInR-2{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:231px;}
}
@keyframes slideInR-2{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:231px;}
}
@-webkit-keyframes slideInR-3{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:480px;}
}
@keyframes slideInR-3{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:480px;}
}
@-webkit-keyframes slideInR-4{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:700px;}
}
@keyframes slideInR-4{
  0%{opacity:0;left:755px;}
  100%{opacity:1;left:700px;}
}</style>
<div class="user_jy47_fashion-head">  
        <div id="lsHeaderVideo" style="width:1920px;height:648px;margin-left:-960px;left:50%;position:relative;">   
                <video id="jp_video_0" preload="metadata" style="width: 1920px; height: 648px;" src="http://wq.360buyimg.com//fd/promote/201510/video/zhengshi.mp4" autoplay="" loop="loop"></video>   
                <div class="user_jy47_dot-mask">
                </div>  
        </div>  
        <div class="user_jy47_user_jy47_f-h-title">   
                <img class="J_imgLazyload" src="http://img13.360buyimg.com/cms/jfs/t1948/299/887210161/29342/4a682f91/563309a7Ncdd8a238.png" alt="" ks_mark="y" />   <span>男装盛宴 神券快抢 最高满199减100</span>  
        </div>  
        <div class="user_jy47_user_jy47_f-h-shops">   
                <a class="user_jy47_s-one slideInR" href="#" target="_blank" clstag="sale|keycount|8758474|1"><img class="J_imgLazyload" src="http://img11.360buyimg.com/cms/jfs/t2494/292/990624593/131150/380ec69e/56401583N9970b047.png" alt="" ks_mark="y" /></a>   <a class="user_jy47_s-two slideInR" href="#" target="_blank" clstag="sale|keycount|8758474|2"><img class="J_imgLazyload" src="http://img14.360buyimg.com/cms/jfs/t2476/110/1082399561/92382/a98b3b25/56401583N061a6b4b.png" alt="" ks_mark="y" /></a>   <a class="user_jy47_s-three slideInR" href="#" target="_blank" clstag="sale|keycount|8758474|3"><img class="J_imgLazyload" src="http://img11.360buyimg.com/cms/jfs/t2416/103/1063776861/105424/7e583b13/56401582N16685cdf.png" alt="" ks_mark="y" /></a>   <a class="user_jy47_s-four slideInR" href="#" target="_blank" clstag="sale|keycount|8758474|4"><img class="J_imgLazyload" src="http://img13.360buyimg.com/cms/jfs/t2530/149/262327933/93000/ef7690d5/56401583Na47ffa64.png" alt="" ks_mark="y" /></a>  
        </div>
</div>

回复

使用道具 举报

该用户从未签到

发表于 2017-6-2 15:41:49 | 显示全部楼层
难度在于现在京东上传的都是转码的视频,没有mp4的了
回复 支持 反对

使用道具 举报

签到天数: 2 天

[LV.1]初来乍到

发表于 2017-7-5 13:58:05 | 显示全部楼层
cad2015007 发表于 2017-6-2 15:41
难度在于现在京东上传的都是转码的视频,没有mp4的了

那如何再次转换成京东可以使用的MP4格式文件呢?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

最新活动

新品速递

  • 【店招】带轮播搜索的白色简洁店招代码分享
  • 锚点教程,实现页面内的跳转,淘宝天猫京东
  • 【10图】990十图遮罩开关灯表格布局京东特
  • 【轮播】京东海尔旗舰店创意轮播代码分享
  • 【1920轮播】全屏简洁全屏轮播代码分享

新人课堂

小黑屋|手机版|Archiver|
©2015  建缘设计. All rights reserved. ( 冀ICP备13015006号 )  Powered by Discuz X3.2  技术支持:建缘设计  
快速回复 返回顶部 返回列表