Bootstrap

HBuilder-初步尝试简易动画效果

素材仅展示,自行修改

 

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.show{
				perspective: 800px;
			}
			.cards{
				transform-style: preserve-3d;
				animation: go3d 10s infinite;
			}
			.card{
				width: 150px;
				position: absolute;
			}
			.card:nth-child(2){
				transform: rotateY(360deg);
			}
			.card>img{
				width: 100%;
			}
			@keyframes go3d{
				100%{transform: rotateY(360deg);}
			}
		</style>
	</head>
	<body>
		<div class="show">
			<div class="cards">
				<div class="card">
				<img src="img/a3.jpg" alt="">
			</div>
			<div class="card">
				<img src="img/a2.jpg" alt="">
			</div>
		</div>
	</body>
</html>

效果如下:

其会进行设定好的动画进行运动。 

 

;