平平科技工作室-小游戏-HTML-3D立方表白相册

平平科技工作室

已于 2024-02-21 09:55:35 修改

阅读量205

点赞数 5

CC 4.0 BY-SA版权

分类专栏：平平科技工作室小游戏源码文章标签： html css

于 2024-02-21 09:29:59 首次发布

本文链接：https://blog.csdn.net/ppaqtt0314/article/details/136203127

平平科技工作室同时被 2 个专栏收录

34 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

小游戏源码

18 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文档详细介绍了如何使用HTML和CSS创建一个3D立方体表白相册，包括设置CSS样式来实现3D效果，准备展示的图片，添加背景音乐，以及构建HTML结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.设置CSS样式

二.准备图片

三.设置HTML

一.设置CSS样式

* {
    margin: 0px;
    padding: 0px;
}

html {
    overflow: hidden;
    height: 100%;
    background: linear-gradient(rgb(0, 238, 255) 0%, #000 100%);
}

.title {
    color: rgb(255, 0, 200);
    text-align: center;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font-size: 40px;
}

.cube {
    position: relative;
    margin: 0px auto;
    margin-top: 9%;
    margin-left: 42%;
    width: 200px;
    height: 200px;
    transform: rotateX(-30deg) rotateY(-80deg);
    transform-style: preserve-3d;
    animation: rotate 15s in