纯js小项目，酷炫的旋转卡片

最新推荐文章于 2023-05-27 14:45:48 发布

动物世界647

最新推荐文章于 2023-05-27 14:45:48 发布

阅读量196

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_63186246/article/details/128686469

版权

本文介绍了一个纯JavaScript编写的前端小项目，实现了酷炫的旋转卡片效果。项目需要icon-font的字体图标和人物图片资源。文章提供了一个逐步指南，包括创建HTML、CSS和JS文件，并给出了完整的代码示例。

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

先看效果

这个小项目需要在icon-font下载字体图标，准备人物图片。

不想下载字体图标的可以看最下面的完整代码

新建一个index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../font_s4t1ti1sekq/iconfont.css">
</head>
<body>
    <div class="container">
        <!--circle-container容器用于装两个button-->
        <div class="circle-container">
            <div class="circle">
                <button id="close">
                    <i class="iconfont icon-close"></i>
                </button>
                <button id="open">
                    <i class="iconfont icon-menu"></i>
                </button>
            </div>
        </div>
        <!--content容器用于装人物简介-->
        <div class="content">
            <h1>Amazing Article</h1>
            <small>Folorin Pop</small>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi cum architecto dolorum assumenda tempora. Minima sed sim