主要通过CSS控制图标滚动
CSS代码
.line-main .line-1-box { padding-bottom: 35px;}
.line-main .line-1-box .hd{ text-align: center; padding-bottom: 60px;}
.line-main .line-1-box .hd h2{ font-size: 26px; color: #333; padding-bottom: 12px;}
.line-main .line-1-box .hd p{ color: #888;font-size: 16px;}
.line-main .line-1-box li{float:left; width:275px;text-align: center;}
.line-main .line-1-box li i{ width:100px; height:101px;background:url(../dcr/theme.png) no-repeat ; display: inline-block;-webkit-transition: -webkit-transform 0.2s ease-out;-moz-transition: -moz-transform 0.2s ease-out;-o-transition: -o-transform 0.2s ease-out;-ms-transition: -ms-transform 0.2s ease-out;}
.line-main .line-1-box li:hover i{ -webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg);}
.line-main .line-1-box li.d1 i{ background-position: -101px -240px;}
.line-main .line-1-box li.d2 i{ background-position: -201px -240px; width:101px;}
.line-main .line-1-box li.d3 i{ background-position: -302px -240px; width:101px;}
.line-main .line-1-box li.d4 i{ background-position: 0 -240px; width:101px;}
.line-main .line-1-box li h4{ font-size: 18px; padding: 16px 0; color: #666; font-weight: 600;}
.line-main .line-1-box li p{ color: #888; font-size: 14px; line-height: 26px;}
.line-main .line-1-box .btnonline{text-align: center; padding-top:88px;}
.line-main .line-1-box .btnonline a{ height:40px; line-height: 40px ; color: #FFF; background: #fc412e; padding:0 30px; display: inline-block; font-size: 14px; text-shadow: 1px 0 4px #d04000;border-radius: 3px;transition: all 0.3s ease-in 0s}
.line-main .line-1-box .btnonline a:hover{box-shadow: 0 3px 10px #ffa97b; background: #ffa60c;}
html代码
<div class="line-1-box">
<div class="w-1200">
<div class="hd">
<h2>1号定制,将最美湘西送至您的指尖</h2>
<p>出彩主题游,品质行程,多样玩法,玩的就是不一样</p>
</div>
<ul class="clearfix">
<li class="d1">
<i class="icon"></i>
<h4>独立成团</h4>
<p>专车专导<br>想怎么玩就怎么玩儿</p>
</li>
<li class="d2">
<i class="icon"></i>
<h4>高端品质</h4>
<p>高豪华食宿<br>享受舒适的旅行假期</p>
</li>
<li class="d3">
<i class="icon"></i>
<h4>主题定制</h4>
<p>多样主题游产品<br>来一趟属于您的旅行</p>
</li>
<li class="d4">
<i class="icon"></i>
<h4>贴心管家</h4>
<p>管家1对1生活服务<br>您只需要负责出发</p>
</li>
</ul>
</div>
</div>
CSS图标附件
注意事项
自己修改CSS中图标的路径!