鼠标移动到图标上滚动代码 CSS

来源：互联网发布：pure music mac 破解编辑：程序博客网时间：2024/06/03 14:40

主要通过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中图标的路径！

0 0