个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
目前，我有一些文本淡入淡出，当用户将鼠标悬停在文本上时，它应该“过渡”到完全不透明(不透明度:1)。
目前，我有这个:`https://jsfiddle.net/17ppzb2p/4/
HTML
<!DOCTYPE html>
<body>
<div id="start">
START
</div>
</body>
CSS
@-webkit-keyframes fadeInOut{
0% {
opacity: 0.2;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.2;
}
}
@-webkit-keyframes glow {
0% {
opacity: 0.4; /*from current opacity*/
}
100% {
opacity: 1;
}
}
#start {
position: absolute;
top: 50px;
left: 80px;
font-size: 36px;
letter-spacing: 30px;
color: black;
font-weight: 400;
-webkit-animation: fadeInOut 6s infinite;
/* -webkit-transition: opacity 1s; */
/* Failed attempt to use transition to change opcaity. */
}
#start:hover {
-webkit-animation-play-state: paused;
-webkit-animation: glow 2s;
/* opacity: 1; */
}
我希望不透明度从由 fadeInOut 动画控制的当前不透明度 --> 变为完全不透明度。
我知道，为了使用不透明度的当前值，我应该使用“过渡”，但是当我尝试这样做时，它不会覆盖 fadeInOut 动画中的当前不透明度。
我希望这是有道理的:)
干杯!
最佳答案
对于#start(悬停之前)，您需要将不透明度设置为 0。每当您使用过渡时，您都需要确保您有一个“初始”设置。
#start {
opacity: 0 //here
position: absolute;
top: 50px;
left: 80px;
font-size: 36px;
letter-spacing: 30px;
color: black;
font-weight: 400;
-webkit-transition: opacity 1s;
}
#start:hover {
opacity: 1;
}
这应该有效。如果您需要帮助，请告诉我。
关于CSS 动画/过渡与不透明度交互，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34144848/
26
4
0
在 python 交互中，有没有办法在每次输入命令后自动从 python 文件执行方法？ 例如:如果我有一个打印文件信息的方法，但我不想不断调用该方法，我怎样才能让它在 python 交互中的每个命令
当你使用Edge等浏览器或系统软件播放媒体时，Windows控制中心就会出现相应的媒体信息以及控制播放的功能，如图。 SMTC (SystemMedia
我在主菜单上使用标准的剪切，复制，粘贴操作。它们具有快捷键Ctrl-X，Ctrl-C和Ctrl-V。 当我打开模态表单时FindFilesForm.ShowModal，然后所有快捷方式都可以从表单中使
这是我想要实现的目标:打开一个 shell(korn 或 bash，没关系)，从那个 shell，我想打开一个 ssh 连接(ssh user@host)。在某些时候，可能会提示我输入密码，或者可能会
我正在测试在C / C++程序中嵌入Python，但是我缺乏理解。 测试程序很简单: 初始化解释器； 从启动Timer的文件中执行python脚本(每0.1秒增加一个变量)； 等待5秒(C++); 从
我正在尝试用java创建Excel文件。现在，我正在使用 Apache POI 库创建文件并将其保存到本地驱动器。有没有办法启动 Excel 并填充数据而不将其保存到硬盘驱动器？ 最佳答案 考虑 Do
我有一个黑盒函数，它接受大约 10 个整数输入。该函数返回一个 pandas 数据框，我想捕获输出窗口(通过使用 bbwidget.children)并显示在布局中的其他地方。到目前为止，交互/交互似
我正在体验新的 QQuickWidget。我如何在 QQuickWidget 和 C++ 之间进行交互？ C++ QQuickWidget *view = new QQuickWidget(); vi
我正在尝试设置一个使用 TWAIN 的 C# 应用程序 example from code project 除了我需要将 Form 转换为 IMessageFilter 和调用 IMessageFil
我想在使用 redis 的 python 中编写应用程序。我用谷歌搜索，但找不到我的问题的任何结果。通常，我这样做: import redis rs = redis.Redis('localhost'
最近做一个小项目，网页中嵌入google maps，输入经纬度坐标可以定位地图位置并加注标记，点击标记获取远端摄像头数据并在视频窗口实现播放。在实际操作过程中，由于经纬度数据和视频登录的用户名密码数
我需要在这里澄清一些事情: 我有一个网站，每次在浏览器中重新加载网站时都会更新两个变量的值。这个页面显然是一个 HTML 页面，但变量是由 javascript 函数更新的。此页面在我的服务器上运行。
我注意到，auto忽略双条件。这是一个简化的示例: Parameter A B : Prop. Parameter A_iff_B : A B. Theorem foo1: A -> B. Proo
使用 interactive使用多个小部件相当简单，例如: interactive(foo, w1=widget1, w2=widget2, ...) 但是，我想使用 VBox 和 HBox 的组合以
我们提供类似于 imagemagick 的浏览器页面 JavaScript，可帮助人们将图像转换为不同大小和格式。但是，它需要网页交互。 是否可以让人们自动进行这种交互——无需将图像发送到我们的服务器
大家好，我正在尝试制作一个具有大量动画和效果的交互式 UI。 但我不知道是否: 核心图形可以支持用户交互(触摸、拖动等) 核心图形支持对象旋转 核心图形可以以任何方式与 UIKit 和核心动画交互 谢
这是获取维基百科上一篇关于高盛的文章的介绍的链接。 http://en.wikipedia.org/w/api.php?action=query&prop=extracts&titles=Goldma
我正在尝试编写一个 AppleScript 来查询 iCal 并在任何日历中查找给定日期的所有事件。 我首先编写了一个简单的脚本，它对给定日历中的每个事件执行一些简单的操作: tell applica
我在我的 hudson 服务器上使用 jira 插件。将代码提交到 svn 时，我的提交注释包含在我的 jira 问题中，但有什么办法可以将注释归因于执行提交的实际人员，而不是让一个全局 jira 用
我正在播放一段视频来装饰我的用户界面。我隐藏了 AV 播放器控件，但用户仍然可以控制视频。例如，他们可以使用滑动手势快进或快退。 这让我特别惊讶，因为 AVPlayerView 上面有一个覆盖 Vie
我是一名优秀的程序员,十分优秀！