Question

我要输出具有这种样式的标题。 > https://jsfiddle.net/nakrys29/5/

h1:before {
  //code
}

h1:after {
  //code
}
h1:hover:before, h1:hover:after {
  //code
}

我想自动显示此动画，而不仅仅是将其悬停时。因此，该动画应在页面完全加载时自动开始，但我无法解决。我尝试使用js和jquery，但是我是新手，所以我找不到正确的方法

感谢您的帮助

Answer 1

您可以创建一个将:before和:after选择器设置为width: 100%（而不是:hover选择器）的类，以在加载窗口时添加该类。

h1 {
	position: relative;
	padding: 5px 0;
	background: none;
	border: none;
  width: 40%;
}

h1:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 3px;
	width: 0;
	background-color: violet;
	transition: 2s ease all;
}

h1:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	width: 0;
	background-color: violet;
	transition: 2s ease all;
}

.animate:before, .animate:after {
	width: 100%;
}

<h1 id="textToAnimate">Hello</h1>
<script>
window.onload = function(){
document.getElementById("textToAnimate").classList.add("animate");
}
</script>

在加载页面之前显示动画：hover：

1 个答案: