联系我们   Contact
关注我们   Contact
成都阿里巴巴装修联系电话
你的位置:首页 > 网店百科 > 优化技巧

阿里巴巴国际站旺铺装修之图片滚动效果

2017/8/31 17:30:17      点击:

阿里巴巴国际站店铺是外贸商的交易平台,在这里一切交易的起始都取决于我们的产品图和店铺门面。如果不实地考察,那第一步就是从我们店铺中了解我们,首先考虑的是我们厂家适不适合做合作对象,这要从我们的店铺门面上看,大气的详尽的公司介绍、厂房、团队和公司实力是必不可少的展示。而脏乱差的图片或者让客户看不到我们的实力只能把客户拒之门外。

“酒香不怕巷子深”并不适用于外贸商家,距离那么远,谁会闻到你的酒香吗?

所以做外贸首先第一步就是做好自己的网站店铺,包括店铺首页,即企业实力传达、产品图、产品特性优势等,这些都是我们的基础工作,也是让店铺旺起来的必备条件!

说这么多也许你认为是废话,这些道理大家都知道的!但怎么去装修呢,是很多人困扰的问题。
下面我介绍店铺装修的一些技巧和操作。希望对大家有帮助

国际站没有阿里中文站或者淘宝操作灵活,所以有些人就不知道想要的效果怎么实现。下面先讲解点简单显然,要实现阿里巴巴国际站旺铺装修所示的效果.

本文之所以又拿CSS3动画说事,是为了补充CSS3 animate属性下的新出来的个关键字属性step。之前我们应用animate动画,出现的效果都是很平滑很流畅的。而step的作用是分步实现。好像舞蹈中优美流畅的华尔兹和动感的机械舞。


我知道的使用有两个,一个是step-end,即一次性动画结束,另外一个就类似于steps(30, end),一个动画要顿30次完成。本文的图片滚动阿里巴巴国际站旺铺部分右下角的序号就使用了step-end。

上下滚动的实现很简单,设置对应的时间段(百分比)和对应的列表的垂直位置即可。以FireFox浏览器举例(下同),相关代码如下:

@-moz-keyframes slide {
    from, to { top: 0; }
    12.5% { top: 0; }
    25% { top: -375px; }
    37.5% { top: -375px; }
    50% { top: -750px; }
    62.5% { top: -750px; }
    75% { top: -1125px; }
    87.5% { top: -1125px; }
}
.list{
    -moz-animation: slide 20s infinite;
}

右下角的图片码数的切换使用了animate属性的step-end,相关CSS如下:

@-moz-keyframes index_1 {
    from, 25%, to { background-color: rgba(0,0,0,.5); }
    0% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_2 {
    from, 50%, to { background-color: rgba(0,0,0,.5); }
    25% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_3 {
    from, 75%, to { background-color: rgba(0,0,0,.5); }
    50% { background-color: rgba(255,0,0,.5); }
}
@-moz-keyframes index_4 {
    from, 100%, to { background-color: rgba(0,0,0,.5); }
    75% { background-color: rgba(255,0,0,.5); }
}

.index_1{
    -moz-animation: index_1 20s step-end infinite;
}
.index_2{
    -moz-animation: index_2 20s step-end infinite;
}
.index_3{
    -moz-animation: index_3 20s step-end infinite;
}
.index_4{
    -moz-animation: index_4 20s step-end infinite;
}

然后相对应的完整HTML代码如下:


   

           

  •        

  •        

  •        

  •    

   

        1
        2
        3
        4
   



说穿了很简单的,你要是有兴趣,可以去查看demo页面处的代码展示,那里更加详尽。
三、结语

本处的阿里巴巴国际站旺铺装修更多的是展示CSS3 animate的使用,想要在实际项目中使用还是有些问题的。例如鼠标移到相对应的序号索引小按钮上,应该会有对应的即时响应滚动效果的,现在没有。这里只是个没有交互,纯粹的展示效果而已。

虽然说本文的阿里巴巴国际站旺铺装修效果尚不可实际应用,但对于熟悉和了解CSS3的一些属性还是很有帮助的。我们可以使用渐进增强,在其他地方应用CSS3优秀的特性。这可以让你的网页进一步蓬荜生辉的。

    成都云帆是西南地区专业旺铺装修,阿里巴巴旺铺优化,阿里巴巴托管,淘宝网店托管,京东商城托管,天猫商城托管,多年来积累了丰富的网店装修设计、网店优化排名、网店托管相关经验。欢迎浏览网址http://www.alitg.com或来电咨询.