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

最新推荐文章于 2024-02-27 09:26:47 发布

原创最新推荐文章于 2024-02-27 09:26:47 发布 · 755 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图标滚动

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现图标滚动效果的方法。通过设置特定的CSS样式，可以使页面上的图标在鼠标悬停时旋转360度。此外，还提供了一个包含四个定制图标的示例，每个图标都有独特的背景位置。

主要通过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>