有这么一个需求,利用antd组件库中的BackTop组件的逻辑,但是自己写样式。

我的目标样式是:有两张图片,一张是normal(正常情况),一张是hover(悬停情况)。

这时候就要用到css的动画了

这是第一版,也是错误的版本

下面是jsx的代码

<BackTop>
<div className="normal-top"></div>
</BackTop>

这是css的样式代码

.mybacktop .normal-top {
height: 50px;
width: 50px;
background: url(../../img/topnormal.png) no-repeat;
text-align: center;
}
.mybacktop .normal-top:hover {
animation: changebacktopimg 0.3s forwards;
-webkit-animation: changebacktopimg 0.3s forwards;
} @keyframes changebacktopimg {
from {
background: url(../../img/topnormal.png) no-repeat;
}
to {
background: url(../../img/topfocus.png) no-repeat;
}
}

这样子写的话,hover的时候图片消失了。经过我一番研究发现我的动画和antd的动画重叠了。所以我再写了一个div作为包裹,并给上antd该组件相关的类名,然后在里面的div写上自己的动画,这个功能就完成了!

下面是jsx的代码

<BackTop>
<div ant-fade-enter ant-fade-enter-active ant-fade>
<div className="normal-top"></div>
</div>
</BackTop>

下面是css的代码(其实css的代码没变)

.mybacktop .normal-top {
height: 50px;
width: 50px;
background: url(../../img/topnormal.png) no-repeat;
text-align: center;
}
.mybacktop .normal-top:hover {
animation: changebacktopimg 0.3s forwards;
-webkit-animation: changebacktopimg 0.3s forwards;
} @keyframes changebacktopimg {
from {
background: url(../../img/topnormal.png) no-repeat;
}
to {
background: url(../../img/topfocus.png) no-repeat;
}
}

antd组件库BackTop组件设置动态背景图片的问题的更多相关文章

  1. 从0搭建Vue3组件库:button组件

    button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...

  2. Blazor Bootstrap 组件库语音组件介绍

    Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...

  3. 从0搭建vue3组件库: Input组件

    本篇文章将为我们的组件库添加一个新成员:Input组件.其中Input组件要实现的功能有: 基础用法 禁用状态 尺寸大小 输入长度 可清空 密码框 带Icon的输入框 文本域 自适应文本高度的文本域 ...

  4. 设置按钮背景图片(HTML-CSS)

    很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用JS去操作表单的提交,即当用户点击这个图片时响应一个JS来提交表单.其实还有一种方法,就是直接设置SUBMIT按钮的图片背景.设置它的图片 ...

  5. MFC 设置窗口背景图片

    //在Onpaint函数中加入如下代码 //----------给窗口设置背景图片---------------------------- CPaintDC dc(this); CRect myrec ...

  6. IOS 在IOS6中设置navigationBar背景图片 会有一条 黑色阴影 --- 解决方案

    //给navigationBar设置背景图片 if ([self.navigationController.navigationBar respondsToSelector:@selector(set ...

  7. 设置VS2017背景图片

    设置方法很简单:安装扩展ClaudiaIDE 1.在这里下载扩展,https://visualstudiogallery.msdn.microsoft.com/9ba50f8d-f30c-4e33-a ...

  8. C++ 设置透明背景图片

    背景:            有两个图片,一个是目标背景图片, 一个是带有自身背景色彩的彩色图片            先将这彩色图片绘制到目标背景图片中, 这一步通过BITBLT就可实现.   但实 ...

  9. 设置JFrame背景图片

    这里我就放上改写的代码吧,不做多的解释,推荐一个好的博文 https://blog.csdn.net/jdsjlzx/article/details/16831815 public void ini_ ...

随机推荐

  1. 利用DNS进行命令控制和搭建隧道

    目录 利用DNS进行命令控制(DNS-Shell) 利用DNS搭建隧道 利用DNS进行命令控制(DNS-Shell) DNS-Shell是一款通过DNS信道实现交互式Shell的强大工具,该工具的服务 ...

  2. uni-app&H5&Android混合开发二 || 使用Android Studio打包应用APK

    前言: 在上一章节我们已经讲了如何uni-app离线打包Android平台教程,这一章就该来讲讲如何使用Android Studio打包应用APK提供给Android手机安装使用了. 第一步.首先打开 ...

  3. 【python】Leetcode每日一题-删除有序数组中的重复项2

    [python]Leetcode每日一题-删除有序数组中的重复项2 [题目描述] 给你一个有序数组 nums ,请你 原地 删除重复出现的元素,使每个元素 最多出现两次 ,返回删除后数组的新长度. 不 ...

  4. Docker安装ElasticSearch和Kibana

    创建容器elasticsearch docker run --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.type= ...

  5. 使用FileStream读写数据

    这节讲一下使用FileStream读写数据,这是一个比较基础的流. FileStream类只能处理原始字节,所以它可以处理任何类型的文件. 先看一下它的构造方法: FileStream fs = ne ...

  6. VS2017报错 由#define后的分号引发的【“ 应输入“)】

    其实并不是第十行分号出现了问题,而是由于在宏定义后面加了分号,修改成这样即可 一开始竟然没看出来--甚至以为是VS中出现"宏可以转换为constexpr"问题--下次要仔细--

  7. [bug] PyCharm远程Spark集群:Java gateway process exited before sending its port number

    原因 无法连接到集群上的java 解决 方法一: 在右上角Edit Configurations中,添加一条环境变量JAVA_HOME,值为远程机器上的java安装路径 方法二: 直接在代码里写上JA ...

  8. ruby基础(三)

    类和模块 1.类 类是面向对象中一个重要的术语.我们可以把类看作是对象的抽象, 所有的这类对象都有这些特征.而对象则是类的具体实现,按照类的要求创建的 对象就是该类的对象.类就像对象的雏形一样,决定了 ...

  9. [刷题] 235 Lowest Common Ancestor of a Binary Search Tree

    要求 给定一棵二分搜索树和两个节点,寻找这两个节点的最近公共祖先 示例 2和8的最近公共祖先是6 2和4的最近公共祖先是2 思路 p q<node node<p q p<=node& ...

  10. Zabbix 监控过程详解

    Zabbix 监控过程详解 一.修改密码及中文语言 修改密码 修改中文语言 如果复选框中没有 Chinese(zh_CN) 选项,需要安装中文包 [root@Zabbix-server ~]# yum ...