理论

Question

我正在为网站主页制作幻灯片。我建立了使用CSS悬停幻灯片时出现的箭头按钮。但我认为很酷的一个功能是，经过一段时间后，鼠标消失，按钮逐渐消失。我使用JS或CSS的答案很好。这是我的代码：

.master {
	display: none;
	width: 100vw;
}

.mcont {
	background-image: url("../Pictures/magtrans.jpg");
	padding: auto;
	text-align: center;
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.hover {
	height: 100vh;
}

.mtext {
	color: #ffffff;
	display: table;
	background-color: rgba(0, 0, 0, 0.5);
	margin: auto;
	padding: 3vw;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
}

.mtext h1 {
	padding: 0;
	margin: 0;
	padding-bottom: 1vh;
	font-size: 5vh;
}

.mtext p {
	padding: 0;
	margin: 0;
	padding-bottom: 2.5vh;
	font-weight: bold;
	font-size: 2vh;
}

.mtext button {
	background-color: #5555ff;
	border: none;
	color: #ffffff;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: background-color 2s;
	transition: background-color 2s;
}

.mtext button:hover {
	background-color: #55aaff;
}

.leftc, .rightc {
	border-radius: 50%;
	width: 5vw;
	height: 5vw;
	background-color: rgba(0, 0, 0, 0.5);
	vertical-align: middle;
	border: none;
	cursor: pointer;
	outline: none;
	color: #ffffff;
	font-size: 3vw;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.hover:hover > .leftc {
	opacity: 1.0;
}

.hover:hover > .rightc {
	opacity: 1.0;
}

.leftc {
	left: 1vw;
}

.rightc {
	right: 1vw;
}

<div class='mcont'>
  <img class='master' src='Media/Pictures/magtrans.jpg'/>
	<div class='hover'>
		<button class='leftc'><</button>
		<button class='rightc'>></button>
		<div class='mtext'>
			<h1>Slideshow</h1>
			<p>Buttons to left and right!</p>
			<button>Learn More</button>
		</div>
	</div>
</div>

我需要的是Google幻灯片中的内容，其中光标和工具栏在几秒钟后消失，并在鼠标移动时返回。我已经对CSS过渡和动画进行了广泛的研究。动画cursor可行，但cursor不可动画。

Answer 1

我认为关键帧就足够了：

.hover:hover {
 animation-name: slideshowcursor;
 animation-duration: .5s;
 animation-delay: 2s; //that period
 animation-fill-mode: forwards
}
.hover:hover > .rightc, .hover:hover > .leftc {
 animation-name: slideshowarrows;
 animation-duration: .5s;
 animation-delay: 2s; //that period
 animation-fill-mode: forwards
}
@keyframes slideshowcursor {
 0% {
  height: 100vh;
 }
 100% {
  cursor: none;
 }
 }

@keyframes slideshowarrows {
 0% {
  border-radius: 50%;
width: 5vw;
height: 5vw;
background-color: rgba(0, 0, 0, 0.5);
vertical-align: middle;
border: none;
cursor: pointer;
outline: none;
color: #ffffff;
font-size: 3vw;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-family: helvetica, arial, sans-serif;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
 }
 100% {
  display: none;
 }
 }

注意：我现在在我的手机上，所以我的测试是有限的，但理论上应该有效。

Answer 2

理论

CSS状态（可用于根据元素状态设置样式 - 因此基于用户交互）是：

:hover         :active        :focus         :target        :link

您可以添加验证伪类

:checked       :valid         :invalid       :default       :disabled
:empty         :enabled       :optional      :in-range      :out-of-range
:read-only     :read-write    :required      :indeterminate

您还有结构伪类（:nth-*，:first-*，:last-*），一些实验和杂项：

:scope         :dir           :lang          :root          :fullscreen

...当然还有伪元素（:before＆amp; :after）。

如果你想要任何不能缩减为上述内容的东西，那么你就是在JavaScript领域，因为你想要根据用户交互进行DOM修改，而不是本地（上面）的。另请注意，并非所有浏览器都实现了上述所有功能。

您的请求无法单独使用CSS，因为您希望根据鼠标是否移过过去:hover来显示Nms状态。

练习（JS解决方案）

最简单的解决方案是在父级上存在特定类（active）时显示箭头。将该类添加到mousemove事件的父级，并以期望的间隔去除函数（删除类）的执行。如果在去抖期间发生mousemove，则会取消去抖动功能，并创建一个全新的实例。在下面的示例中，去抖动间隔为1s：

let deactivate = debounce(function() {
  document.querySelector('.mcont').classList.remove('active');
}),
 activate = function() {
  document.querySelector('.mcont').classList.add('active');
  deactivate();
} 


function debounce(func, wait = 1000) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

测试：

＆＃13;

let deactivate = debounce(function() {
  document.querySelector('.mcont').classList.remove('active');
}),
 activate = function() {
  document.querySelector('.mcont').classList.add('active');
  deactivate();
} 


function debounce(func, wait = 1000) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

＆＃13;

.master {
	display: none;
	width: 100vw;
}

.mcont {
	padding: auto;
	text-align: center;
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
}

.hover {
	height: 100vh;
}

.mtext {
	color: #ffffff;
	display: table;
	background-color: rgba(0, 0, 0, 0.5);
	margin: auto;
	padding: 3vw;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
}

.mtext h1 {
	padding: 0;
	margin: 0;
	padding-bottom: 1vh;
	font-size: 5vh;
}

.mtext p {
	padding: 0;
	margin: 0;
	padding-bottom: 2.5vh;
	font-weight: bold;
	font-size: 2vh;
}

.mtext button {
	background-color: #5555ff;
	border: none;
	color: #ffffff;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	-webkit-transition: background-color 2s;
	transition: background-color 2s;
}

.mtext button:hover {
	background-color: #55aaff;
}

.leftc, .rightc {
	border-radius: 50%;
	width: 5vw;
	height: 5vw;
	background-color: rgba(0, 0, 0, 0.5);
	vertical-align: middle;
	border: none;
	cursor: pointer;
	outline: none;
	color: #ffffff;
	font-size: 3vw;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: helvetica, arial, sans-serif;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.active .hover > .leftc {
	opacity: 1.0;
}

.active .hover > .rightc {
	opacity: 1.0;
}

.leftc {
	left: 1vw;
}

.rightc {
	right: 1vw;
}
body {
  margin: 0;
  padding: 0;
}

＆＃13;

<div class='mcont' onmousemove="activate()">
  <img class='master' src />
	<div class='hover'>
		<button class='leftc'>&lt;</button>
		<button class='rightc'>></button>
		<div class='mtext'>
			<h1>Slideshow</h1>
			<p>Buttons to left and right!</p>
			<button>Learn More</button>
		</div>
	</div>
</div>

＆＃13;

注意：上述香草debounce()的道具转到Vanilla debounce。如果您需要它们，您可以尝试更好的版本：

jQuery风味：https://github.com/cowboy/jquery-throttle-debounce
lodash＆＃39;（leading，trailing＆amp; maxWait参数。

在徘徊足够长的时间后，让CSS过渡淡出

2 个答案:

理论

练习（JS解决方案）