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

最新推荐文章于 2023-03-03 09:12:13 发布

妮可珍郝坎

最新推荐文章于 2023-03-03 09:12:13 发布

阅读量642

点赞数 2

文章标签： html css javascript

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129298563

版权

这段代码展示了如何使用HTML和CSS创建一个3D翻转效果的卡片动画。通过设置perspective、transform-style和@keyframes规则，两个卡片在页面上交替旋转，产生连续的3D转动视觉体验。

摘要由CSDN通过智能技术生成

素材仅展示，自行修改

代码如下：

<!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>

效果如下：