HTML&CSS：必看！3D 书籍展示，封面 “自动翻开” 超带感

前端Hardy2025-03-26 17:26

这段HTML和CSS代码实现了一个具有3D效果的书籍展示页面，包含书籍的封面、页面和书脊。

大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。

演示效果

HTML&CSS

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号关注：前端Hardy</title>
    <style>
        *,
        *:after,
        *:before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ::before,
        ::after {
            content: "";
        }

        html,
        body {
            height: 100%;
            -webkit-font-smoothing: subpixel-antialiased;
        }

        html {
            font-size: 100%;
        }

        body {
            background: #ecf0f1;
            color: #34495e;
            font-family: 'Lato', 'Arial', sans-serif;
            font-weight: 400;
            line-height: 1.2;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            color: #2c3e50;
            text-decoration: none;
        }

        .btn {
            display: inline-block;
            text-transform: uppercase;
            border: 2px solid #2c3e50;
            margin-top: 100px;
            font-size: 0.7em;
            font-weight: 700;
            padding: 0.1em 0.4em;
            text-align: center;
            -webkit-transition: color 0.3s, border-color 0.3s;
            -moz-transition: color 0.3s, border-color 0.3s;
            transition: color 0.3s, border-color 0.3s;
        }

        .btn:hover {
            border-color: #16a085;
            color: #16a085;
        }

        .align {
            clear: both;
            margin: 90px auto 20px;
            width: 100%;
            max-width: 1170px;
            text-align: center;
        }

        .align>li {
            width: 500px;
            min-height: 300px;
            display: inline-block;
            margin: 30px 20px 30px 30px;
            padding: 0 0 0 60px;
            vertical-align: top;
        }

        .book {
            position: relative;
            width: 160px;
            height: 220px;
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            perspective: 1000px;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .hardcover_front li:first-child {
            background-color: #eee;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .hardcover_front li:last-child {
            background: #fffbec;
        }

        .hardcover_back li:first-child {
            background: #fffbec;
        }

        .hardcover_back li:last-child {
            background: #fffbec;
        }

        .book_spine li:first-child {
            background: #eee;
        }

        .book_spine li:last-child {
            background: #333;
        }

        .hardcover_front li:first-child:after,
        .hardcover_front li:first-child:before,
        .hardcover_front li:last-child:after,
        .hardcover_front li:last-child:before,
        .hardcover_back li:first-child:after,
        .hardcover_back li:first-child:before,
        .hardcover_back li:last-child:after,
        .hardcover_back li:last-child:before,
        .book_spine li:first-child:after,
        .book_spine li:first-child:before,
        .book_spine li:last-child:after,
        .book_spine li:last-child:before {
            background: #999;
        }

        .page>li {
            background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
            background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
            background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
            background: linear-gradient(to right, #e1ddd8 0%, #fffbf6 100%);
            box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
            border-radius: 0px 5px 5px 0px;
        }

        .hardcover_front {
            -webkit-transform: rotateY(-34deg) translateZ(8px);
            -moz-transform: rotateY(-34deg) translateZ(8px);
            transform: rotateY(-34deg) translateZ(8px);
            z-index: 100;
        }

        .hardcover_back {
            -webkit-transform: rotateY(-15deg) translateZ(-8px);
            -moz-transform: rotateY(-15deg) translateZ(-8px);
            transform: rotateY(-15deg) translateZ(-8px);
        }

        .page li:nth-child(1) {
            -webkit-transform: rotateY(-28deg);
            -moz-transform: rotateY(-28deg);
            transform: rotateY(-28deg);
        }

        .page li:nth-child(2) {
            -webkit-transform: rotateY(-30deg);
            -moz-transform: rotateY(-30deg);
            transform: rotateY(-30deg);
        }

        .page li:nth-child(3) {
            -webkit-transform: rotateY(-32deg);
            -moz-transform: rotateY(-32deg);
            transform: rotateY(-32deg);
        }

        .page li:nth-child(4) {
            -webkit-transform: rotateY(-34deg);
            -moz-transform: rotateY(-34deg);
            transform: rotateY(-34deg);
        }

        .page li:nth-child(5) {
            -webkit-transform: rotateY(-36deg);
            -moz-transform: rotateY(-36deg);
            transform: rotateY(-36deg);
        }

        .hardcover_front,
        .hardcover_back,
        .book_spine,
        .hardcover_front li,
        .hardcover_back li,
        .book_spine li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .hardcover_front,
        .hardcover_back {
            -webkit-transform-origin: 0% 100%;
            -moz-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
        }

        .hardcover_front {
            -webkit-transition: all 0.8s ease, z-index 0.6s;
            -moz-transition: all 0.8s ease, z-index 0.6s;
            transition: all 0.8s ease, z-index 0.6s;
        }

        .hardcover_front li:first-child {
            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            -webkit-transform: translateZ(2px);
            -moz-transform: translateZ(2px);
            transform: translateZ(2px);
        }

        .hardcover_front li:last-child {
            -webkit-transform: rotateY(180deg) translateZ(2px);
            -moz-transform: rotateY(180deg) translateZ(2px);
            transform: rotateY(180deg) translateZ(2px);
        }

        .hardcover_back li:first-child {
            -webkit-transform: translateZ(2px);
            -moz-transform: translateZ(2px);
            transform: translateZ(2px);
        }

        .hardcover_back li:last-child {
            -webkit-transform: translateZ(-2px);
            -moz-transform: translateZ(-2px);
            transform: translateZ(-2px);
        }

        .hardcover_front li:first-child:after,
        .hardcover_front li:first-child:before,
        .hardcover_front li:last-child:after,
        .hardcover_front li:last-child:before,
        .hardcover_back li:first-child:after,
        .hardcover_back li:first-child:before,
        .hardcover_back li:last-child:after,
        .hardcover_back li:last-child:before,
        .book_spine li:first-child:after,
        .book_spine li:first-child:before,
        .book_spine li:last-child:after,
        .book_spine li:last-child:before {
            position: absolute;
            top: 0;
            left: 0;
        }

        .hardcover_front li:first-child:after,
        .hardcover_front li:first-child:before {
            width: 4px;
            height: 100%;
        }

        .hardcover_front li:first-child:after {
            -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
            -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
            transform: rotateY(90deg) translateZ(-2px) translateX(2px);
        }

        .hardcover_front li:first-child:before {
            -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
            -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
            transform: rotateY(90deg) translateZ(158px) translateX(2px);
        }

        .hardcover_front li:last-child:after,
        .hardcover_front li:last-child:before {
            width: 4px;
            height: 160px;
        }

        .hardcover_front li:last-child:after {
            -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
            -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
            transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
        }

        .hardcover_front li:last-child:before {
            box-shadow: 0px 0px 30px 5px #333;
            -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
            -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
            transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
        }

        .hardcover_back li:first-child:after,
        .hardcover_back li:first-child:before {
            width: 4px;
            height: 100%;
        }

        .hardcover_back li:first-child:after {
            -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
            -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
            transform: rotateY(90deg) translateZ(-2px) translateX(2px);
        }

        .hardcover_back li:first-child:before {
            -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
            -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
            transform: rotateY(90deg) translateZ(158px) translateX(2px);
        }

        .hardcover_back li:last-child:after,
        .hardcover_back li:last-child:before {
            width: 4px;
            height: 160px;
        }

        .hardcover_back li:last-child:after {
            -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
            -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
            transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
        }

        .hardcover_back li:last-child:before {
            box-shadow: 10px -1px 80px 20px #666;
            -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
            -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
            transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
        }

        .book_spine {
            -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
            -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
            transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
            width: 16px;
            z-index: 0;
        }

        .book_spine li:first-child {
            -webkit-transform: translateZ(2px);
            -moz-transform: translateZ(2px);
            transform: translateZ(2px);
        }

        .book_spine li:last-child {
            -webkit-transform: translateZ(-2px);
            -moz-transform: translateZ(-2px);
            transform: translateZ(-2px);
        }

        .book_spine li:first-child:after,
        .book_spine li:first-child:before {
            width: 4px;
            height: 100%;
        }

        .book_spine li:first-child:after {
            -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
            -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
            transform: rotateY(90deg) translateZ(-2px) translateX(2px);
        }

        .book_spine li:first-child:before {
            -webkit-transform: rotateY(-90deg) translateZ(-12px);
            -moz-transform: rotateY(-90deg) translateZ(-12px);
            transform: rotateY(-90deg) translateZ(-12px);
        }

        .book_spine li:last-child:after,
        .book_spine li:last-child:before {
            width: 4px;
            height: 16px;
        }

        .book_spine li:last-child:after {
            -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
            -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
            transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
        }

        .book_spine li:last-child:before {
            box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
            -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
            -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
            transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
        }

        .page,
        .page>li {
            position: absolute;
            top: 0;
            left: 0;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .page {
            width: 100%;
            height: 98%;
            top: 1%;
            left: 3%;
            z-index: 10;
        }

        .page>li {
            width: 100%;
            height: 100%;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            transform-origin: left center;
            -webkit-transition-property: transform;
            -moz-transition-property: transform;
            transition-property: transform;
            -webkit-transition-timing-function: ease;
            -moz-transition-timing-function: ease;
            transition-timing-function: ease;
        }

        .page>li:nth-child(1) {
            -webkit-transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            transition-duration: 0.6s;
        }

        .page>li:nth-child(2) {
            -webkit-transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            transition-duration: 0.6s;
        }

        .page>li:nth-child(3) {
            -webkit-transition-duration: 0.4s;
            -moz-transition-duration: 0.4s;
            transition-duration: 0.4s;
        }

        .page>li:nth-child(4) {
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            transition-duration: 0.5s;
        }

        .page>li:nth-child(5) {
            -webkit-transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            transition-duration: 0.6s;
        }

        .book:hover>.hardcover_front {
            -webkit-transform: rotateY(-145deg) translateZ(0);
            -moz-transform: rotateY(-145deg) translateZ(0);
            transform: rotateY(-145deg) translateZ(0);
            z-index: 0;
        }

        .book:hover>.page li:nth-child(1) {
            -webkit-transform: rotateY(-30deg);
            -moz-transform: rotateY(-30deg);
            transform: rotateY(-30deg);
            -webkit-transition-duration: 1.5s;
            -moz-transition-duration: 1.5s;
            transition-duration: 1.5s;
        }

        .book:hover>.page li:nth-child(2) {
            -webkit-transform: rotateY(-35deg);
            -moz-transform: rotateY(-35deg);
            transform: rotateY(-35deg);
            -webkit-transition-duration: 1.8s;
            -moz-transition-duration: 1.8s;
            transition-duration: 1.8s;
        }

        .book:hover>.page li:nth-child(3) {
            -webkit-transform: rotateY(-118deg);
            -moz-transform: rotateY(-118deg);
            transform: rotateY(-118deg);
            -webkit-transition-duration: 1.6s;
            -moz-transition-duration: 1.6s;
            transition-duration: 1.6s;
        }

        .book:hover>.page li:nth-child(4) {
            -webkit-transform: rotateY(-130deg);
            -moz-transform: rotateY(-130deg);
            transform: rotateY(-130deg);
            -webkit-transition-duration: 1.4s;
            -moz-transition-duration: 1.4s;
            transition-duration: 1.4s;
        }

        .book:hover>.page li:nth-child(5) {
            -webkit-transform: rotateY(-140deg);
            -moz-transform: rotateY(-140deg);
            transform: rotateY(-140deg);
            -webkit-transition-duration: 1.2s;
            -moz-transition-duration: 1.2s;
            transition-duration: 1.2s;
        }

        .coverDesign {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        .coverDesign::after {
            background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
            background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
            background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }

        .coverDesign h1 {
            color: #fff;
            font-size: 2.2em;
            letter-spacing: 0.05em;
            text-align: center;
            margin: 54% 0 0 0;
            text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
        }

        .coverDesign p {
            color: #f8f8f8;
            font-size: 1em;
            text-align: center;
            text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
        }

        .yellow {
            background-color: #f1c40f;
            background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
            background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
            background-image: linear-gradient(to bottom, #f1c40f 58%, #e7ba07 0%);
        }

        .blue {
            background-color: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
            background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
            background-image: linear-gradient(to bottom, #3498db 58%, #2a90d4 0%);
        }

        .grey {
            background-color: #f8e9d1;
            background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
            background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
            background-image: linear-gradient(to bottom, #f8e9d1 58%, #e7d5b7 0%);
        }

        .ribbon {
            color: #fff;
            display: block;
            font-size: 0.7em;
            position: absolute;
            top: 11px;
            right: 1px;
            width: 40px;
            height: 20px;
            line-height: 20px;
            letter-spacing: 0.15em;
            text-align: center;
            -webkit-transform: rotateZ(45deg) translateZ(1px);
            -moz-transform: rotateZ(45deg) translateZ(1px);
            transform: rotateZ(45deg) translateZ(1px);
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            z-index: 10;
        }

        .ribbon.new {
            background: #63c930;
        }

        .ribbon.new:before,
        .ribbon.new:after {
            border-bottom: 20px solid #63c930;
        }

        .ribbon.bestseller {
            background: #c0392b;
        }

        .ribbon.bestseller:before,
        .ribbon.bestseller:after {
            border-bottom: 20px solid #c0392b;
        }

        .ribbon::before,
        .ribbon::after {
            position: absolute;
            top: -20px;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
        }

        .ribbon::before {
            left: -20px;
            border-left: 20px solid transparent;
        }

        .ribbon::after {
            right: -20px;
            border-right: 20px solid transparent;
        }

        figcaption {
            padding-left: 40px;
            text-align: left;
            position: absolute;
            top: 0%;
            left: 160px;
            width: 310px;
        }

        figcaption h1 {
            margin: 0;
        }

        figcaption span {
            color: #16a085;
            padding: 0.6em 0 1em 0;
            display: block;
        }

        figcaption p {
            color: #63707d;
            line-height: 1.3;
        }

        @media screen and (max-width: 37.8125em) {
            .align>li {
                width: 100%;
                min-height: 440px;
                height: auto;
                padding: 0;
                margin: 0 0 30px 0;
            }

            .book {
                margin: 0 auto;
            }

            figcaption {
                text-align: center;
                width: 320px;
                top: 250px;
                padding-left: 0;
                left: -80px;
                font-size: 90%;
            }
        }
    </style>
</head>

<body>
    <div class="component">
        <ul class="align">
            <li>
                <figure class='book'>
                    <ul class='hardcover_front'>
                        <li>
                            <img src="https://s.cdpn.io/13060/book1.jpg" alt="" width="100%" height="100%">
                            <span class="ribbon bestseller">Nº1</span>
                        </li>
                        <li></li>
                    </ul>
                    <ul class='page'>
                        <li></li>
                        <li>
                            <a class="btn" href="#">Download</a>
                        </li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul class='hardcover_back'>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul class='book_spine'>
                        <li></li>
                        <li></li>
                    </ul>
                    <figcaption>
                        <h1>Responsive Web Design</h1>
                        <span>By Ethan Marcotte</span>
                        <p>From mobile browsers to netbooks and tablets, users are visiting your sites from an
                            increasing array of devices and browsers. Are your designs ready?...</p>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
</body>

</html>

HTML 结构

  • component：定义整个书籍展示的容器。
  • align：定义书籍的外层容器，包含一个li元素。
  • li：定义书籍的容器，包含封面、页面和书脊。
  • book：定义书籍的主体部分，包含封面、页面和书脊。
  • hardcover_front：定义书籍的封面部分，包含两个li元素。
  • page：定义书籍的页面部分，包含五个li元素。
  • hardcover_back：定义书籍的背面部分，包含两个li元素。
  • book_spine：定义书籍的书脊部分，包含两个li元素。
  • figcaption：定义书籍的描述部分，包含标题、作者和简介。

CSS 样式

  • .component：定义书籍展示的容器样式。
  • .align：定义书籍的外层容器样式，包括弹性布局和居中对齐。
  • .book：定义书籍的主体部分样式，包括3D效果和阴影。
  • .hardcover_front：定义书籍封面的样式，包括渐变背景和阴影。
  • .page：定义书籍页面的样式，包括渐变背景和阴影。
  • .hardcover_back：定义书籍背面的样式，包括渐变背景和阴影。
  • .book_spine：定义书籍书脊的样式，包括渐变背景和阴影。
  • .ribbon：定义封面标签的样式，包括背景颜色和三角形装饰。
  • figcaption：定义书籍描述的样式，包括标题、作者和简介。

各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！

相关推荐
在下千玦2 分钟前
#前端js发异步请求的几种方式
开发语言·前端·javascript
Angelyb41 分钟前
前端Vue
开发语言·javascript·ecmascript
老友@1 小时前
从 Word 到 HTML：使用 Aspose.Words 轻松实现 Word 文档的高保真转换
java·后端·性能优化·html·word·aspose·格式转换
自不量力的A同学1 小时前
Next.js 中间件曝高危漏洞 CVE-2025-29927，授权绕过风险波及全版本
开发语言·javascript·中间件
Evrytos1 小时前
告别石器时代#2：ES6新数据类型
前端·javascript
AndyGoWei1 小时前
写一个带联想词的输入框，看这篇文章就够了
前端·javascript
阿信无月1 小时前
数组排序
javascript
申朝先生2 小时前
JS：什么是闭包，以及它的应用场景和缺点是什么？
开发语言·javascript·ecmascript
念九_ysl2 小时前
暴力搜索算法详解与TypeScript实战
javascript·算法
beibeibeiooo2 小时前
【CSS3】02-选择器 + CSS特性 + 背景属性 + 显示模式
前端·css·css3
热门推荐
01DeepSeek各版本说明与优缺点分析02RAG 实践- Ollama+RagFlow 部署本地知识库03如何在WPS和Word/Excel中直接使用DeepSeek功能04FreeCAD傻瓜教程之创建参数化几何图形-螺旋体、平面、球体、椭球体、圆柱体、圆锥体、棱柱、椭圆05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07苍穹外卖面试总结08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09本地部署DeepSeek教程（Mac版本）10山东大学机试试题合集