如何使用css动画/javascript使具有背景图像的元素出现

How to make an element with background image appear using css animation/javascript

本文关键字：图像 背景 元素 css 何使用 动画 javascript      更新时间：2023-09-26

我有一个带有背景图像的div标记。我想使用css动画或与javascript/jquery的组合来动画化页面加载时背景图像的显示方式。目前，我创建了两个长度相等的垂直边界，它们都从同一位置开始。加载页面时，一个边框将自动向右移动，而另一个边框则向左移动。在这个转换过程中，我希望带有背景图像的div标记慢慢出现。到目前为止，我拥有的是：

.background-img {
  width: 10px;
  margin: 0 auto;
}
.borders {
	position: absolute;
	left: 50%;
	width: 8px;
	background-color: blue;
	height: 50px;
	border-radius: 4px;
}
.left-vertical-border {
	animation-name:move-left;
	animation-duration: 2s;   
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;    
}
.right-vertical-border {
	top: 8px;
	animation-name:move-right;
	animation-duration: 2s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards; 
}
@keyframes move-left {
	from{transform: translateX(0px);}
	to{transform: translateX(-100px);}
}
@keyframes move-right {
	from{transform: translateX(0px);}
	to{transform: translateX(100px);}
}
<!DOCTYPE html>
<html>
	<head>	
		<title>Creating Vertical borders using animation/javascript</title>			
	</head>
	<body>
		<div class="left-vertical-border borders"></div>
		<div class="background-img">fake bg image</div>
		<div class="right-vertical-border borders"></div>
	</body>
</html>

提前感谢！

添加CSS:

.background-img {
  width: 10px;
  height: 10px;
  margin: 0 auto;
  animation-name:img-ani;
  animation-duration: 2s;   
  animation-timing-function: ease-in;
}             
@keyframes img-ani {
  from{opacity:0;}
  to{opacity: 1;}
}
相关文章：