[HTML+CSS+JS]实现网站3D卡片效果

大前端/ 每日坚持一练大前端每日坚持一练

创建时间:2020-01-07 21:58

字数:279 阅读:

预告预告，还没写完。。。。。
话不多说，先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站3D卡片效果</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

<script src="https://use.fontawesome.com/14a49508f9.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="business-card middle">
<div class="front">
<h2>首页</h2>
<span>meteor</span>
<ul class="contact-info">
<li>
<i class="fa fa-mobile fa-2x"></i>+手机号
</li>
<li>
<i class="fa fa-envelope"></i>+邮箱
</li>
<li>
<i class="fa fa-map-marker"></i>+地址
</li>
</ul>
</div>
<div class="back">
<span>meteor</span>
</div>
</div>
<script>
$(".business-card").click(function(event) {
$(".business-card").toggleClass('business-card-active');
});
</script>
</body>
</html>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 541143263@qq.com