轮播的实现

向右看齐 2021-10-09 03:06 432阅读 0赞

轮播效果:

hover的时候过度改变图标。

![20200409095446564.png][]![20200409095511858.png][]

实现方法： 对a标签添加两个伪类:before,:after，inline-block,使用content:' ' 占位，给两个伪类添加背景图片。

<div class="header-logo">
         <a href="/#/index"  ></a>
     </div>

CSS:

.header-logo{
             display: inline-block;
             width:55px;
             height: 55px;
             background-color: $colorA;
             // 用伪类设置两张图片
             a{
               display: inline-block;
               width: 110px;
               height: 55px;
               &:before{
                //  占位
                content: '';
                display:  inline-block;
                width: 55px;
                height: 55px;
                background:url('/imgs/mi-logo.png') no-repeat center;
                background-size: 55px;
                transition: margin .2s;
               }
               &:after{
                //  占位
                content: '';
                display:  inline-block;
                width: 55px;
                height: 55px;
                background:url('/imgs/mi-home.png') no-repeat center;
                background-size: 55px;
               }
                &:hover:before{
                  margin-left: -55px;
                  transition: margin .2s;
                }
             }

[20200409095446564.png]: https://img-blog.csdnimg.cn/20200409095446564.png
[20200409095511858.png]: /images/20211009/d0ef6f89fe90435684216e8e41391e5b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，432人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现轮播和滑动轮播

js的轮播图无论网页还是移动端都随处可见，本文用简单的方法来实现js的普通轮播图与滑动轮播图。（废话不多说，关键思路都写在代码注释处） js普通轮播简单描述一下js普

矫情吗；*/ 2023年02月18日 08:27/ 0 赞/ 37 阅读

相关简单轮播的实现

简单轮播的实现 1、适配器：BannerAdapter 【 public class BannerAdapter extends PagerAdapter \{

╰半橙微兮°/ 2022年06月17日 23:10/ 0 赞/ 222 阅读

相关 ionic实现轮播

H5混合式移动开发框架ionic，是使用angularJS的语法，加上大名鼎鼎的移动应用开发框架cordova的核心。它的特点是跨平台、入门简单、可以减少开发周期。实质上，io

待我称王封你为后i/ 2022年06月07日 10:39/ 0 赞/ 256 阅读

相关轮播图的实现

轮播图的实现, 已封装轮播轮播图在网页搭建中经常遇到, 与轮播有关的卡片滑块也常见, 所以有必要理解其中的原理轮播图HTML中应包含几个部分?

深碍√TFBOYSˉ_/ 2022年05月22日 22:54/ 0 赞/ 261 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 405 阅读

相关轮播图的实现

简单轮播图实现（H5+CS3+JS&JQuery）最终效果图如下：每2000毫秒自动轮播，鼠标划入显示左右按钮；进行手动点击按钮左右切换。划出隐藏按钮并继续进行

阳光穿透心脏的1/2处/ 2022年04月02日 13:52/ 0 赞/ 250 阅读

相关简易轮播的实现

jquery实现ppt轮播 html代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

深藏阁楼爱情的钟/ 2021年12月03日 15:51/ 0 赞/ 443 阅读

相关 js实现轮播图（简单滚动轮播)

原理：在页面上有一个可视区域（a），用来显示图片，还有一个放所有需要轮播的图片的区域(b) ，当执行操作时，b需要移动，移动一个a的宽度，使下一张图片显示，

冷不防/ 2021年11月10日 09:30/ 0 赞/ 707 阅读

相关轮播的实现

轮播效果: hover的时候过度改变图标。 ![20200409095446564.png][]![20200409095511858.png][] 实现方法：对a标签

向右看齐/ 2021年10月09日 03:06/ 0 赞/ 433 阅读

相关轮播图的实现

轮播图的实现 <view> <swiper class='swipers' indicatorDots='true' interval=

清疚/ 2021年09月17日 00:20/ 0 赞/ 554 阅读