HTML+CSS制作3D步数统计界面-阿里云开发者社区

HTML+CSS制作3D步数统计界面

效果图如下：

HTML部分源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=container.classList.0">
    <title>HTML+CSS制作3D步数统计界面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- HTML代码部分 -->
    <!-- 基本框架 -->
    <!-- 临时：为了展示效果方便，临时关闭切换功能已经强制active样式 -->
    <div class="container">
        <!-- 动画应用部分 -->
        <div class="card">
            <!-- card仅作为背景使用 -->
            <!-- 图片 -->
            <div class="pic"></div>
            <h2>steps</h2>
            <h3>this week</h3>
            <!-- 这里是柱状图 -->
            <div class="chart">
                <!-- 以下为7天的步数柱状图文字 -->
                <div class="bar"><span>20,000</span></div>
                <div class="bar"><span>10,000</span></div>
                <div class="bar"><span>15,000</span></div>
                <div class="bar"><span>24,000</span></div>
                <div class="bar"><span>7,000</span></div>
                <div class="bar"><span>7,000</span></div>
                <div class="bar"><span>10,000</span></div>
            </div>
            <!-- 总步数 -->
            <h4>14,025</h4>
        </div>
    </div>
    <script>
        // 开始js脚本编写，主要目的是点击界面时切换样式，
        // 通过样式变化实现动画效果
        // 找到container元素
        let container = document.querySelector('.container');
        // 增加点击监听事件
        container.addEventListener('click', () => {
            // 切换样式，增加或删除active样式，实现效果切换
            container.classList.toggle('active');
        })
    </script>
</body>
</html>

CSS部分源代码如下：

/* 基本样式表 */
:root {
    --background-color: #2c3e50;
    --border-color: #7591AD;
    --text-color: #34495e;
    --color1: #EC3E27;
    --color2: #fd79a8;
    --color3: #0984e3;
    --color4: #00b894;
    --color5: #fdcb6e;
    --color6: #e056fd;
    --color7: #F97F51;
    --color8: #BDC581;
}
* {
    margin: 0;
    padding: 0;
}
html {
    font-size: 14px;
}
body {
    width: 100vw;
    height: 100vh;
    font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
    background: linear-gradient(to left top, #373B44, #4286f4);
}
.container {
    /* 基本框架与body同宽同高 */
    width: 100vw;
    height: 100vh;
    /* 使用flex布局实现内容上下左右居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 
    card元素需要做3D的动画所有需要开启3D视图模式
    视距为2000px，视距（这个名字可能不准确）越大透视越小，视距越小透视越大（变形也越严重）。
    */
    perspective: 2000px;
    transform-style: preserve-3d;
}
/* card层仅作为背景使用，图片级元素均为其内部的元素 */
.container .card {
    position: relative;
    width: 400px;
    height: 550px;
    background-color: #000;
    border-radius: 20px;
    /* 使用flex布局实现内容上下左右居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 动画相关配置 */
    transition: 0.5s;
    /* 开始3D视图 */
    perspective: 2000px;
    transform-style: preserve-3d;
}
/* 图片层采用背景图的形式加载图片 */
.container .pic {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    /* 背景图，定位居中，大小采用cover，即高度、宽度两者小的占满，大的部分裁切 */
    background-image: url(bg.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    /* 动画相关配置 */
    transition: 1s;
}
/* 文字部分看不清楚，我们增加一个黑色半透明层，加深背景颜色 */
.container .pic::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    /* 动画相关配置 */
    transition: 1s;
}
/* 文字部分要单独定义大小，以及位置，还需要再定义3D模式下的Z轴位置 */
h2, h3, h4 {
    position: absolute;
    top: 100px;
    color: #fff;
    /*大写*/
    text-transform: uppercase;
    /* 动画相关配置 */
    transition: 1s;
}
h2 {
    font-size: 30px;
    margin-top: 0px;
}
h3 {
    font-size: 20px;
    margin-top: 50px;
}
h4 {
    font-size: 30px;
    margin-top: 300px;
    opacity: 0.7;
}
/* 开始定义active样式 */
.container.active .card {
    /* 实现x轴旋转实现平铺样式 */
    /* 实现Y轴位移让动画不至于太生硬 增加滑动感觉 */
    transform: rotateX(60deg) translateY(150px);
    /* 背景增加投影效果 */
    box-shadow: 0 50px 50px 0 rgba(0, 0, 0, 0.5);
}
.container.active .pic {
    /* 让背景图沿Z轴向上位移20px，与card实现分离 */
    /* 刚才card没有开启3D视图，所有没有效果 */
    transform: translateZ(20px);
}
.container.active .pic::before {
    /* 图片遮罩加深颜色 */
    background-color: rgba(0, 0, 0, 0.6);
}
/* 文字部分也要增加一些位置上的移动让动画看起来不生硬 */
/* 文字部分需要隐藏顶部的STEPS和This WEEK */
.container.active h2 {
    opacity: 0;
    transform: translateZ(40px) translateY(-80px);
}
.container.active h3 {
    opacity: 0;
    transform: translateZ(40px) translateY(-60px);
}
.container.active h4 {
    opacity: 1;
    transform: translateZ(40px) translateY(40px);
}
/* 开始制作柱状图 */
.container .chart {
    position: absolute;
    width: 65%;
    height: 60px;
    top: 100px;
    margin-top: 120px;
    /* background-color: var(--color1); */
    /* 位置要高于等于背景图的位移 */
    transform: translateZ(21px);
    /* 使用flex布局实现内容上下左右居中 */
    display: flex;
    align-items: center;
    /* 开始3D视图 */
    perspective: 2000px;
    transform-style: preserve-3d;
}
/* 因为我们看到的柱状体有三个面，所有我们可以使用
::after
::before
分别实现另外两个面 */
.container .bar {
    position: absolute;
    /* 默认状态下高度为0 */
    width: 0;
    height: 20px;
    background-color: #FFF;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
    /* margin-right: 20px; */
    /* 开始3D视图 让after和before显示 */
    perspective: 2000px;
    transform-style: preserve-3d;
    /* 基点在左侧 垂直变化时，不至于跑到背景底部 */
    transform-origin: left;
    /* 开始临时旋转查看效果 */
    /* Y轴旋转-90度让柱状体直立起来 */
    /* X轴旋转-45度让三个面面向前方 */
    /* transform: rotateY(-90deg) rotateX(-45deg); */
    /* 柱状图图初始透明度为0 ??? 不能为透明，否则不显示了 */
    /* opacity: 0; */
    /* 动画相关配置 */
    transition: 1s;
}
.container .bar:nth-child(1) {
    transform: translateX(0px) rotateY(-90deg) rotateX(-45deg);
}
.container .bar:nth-child(2) {
    transform: translateX(40px) rotateY(-90deg) rotateX(-45deg);
}
.container .bar:nth-child(3) {
    transform: translateX(80px) rotateY(-90deg) rotateX(-45deg);
}
.container .bar:nth-child(4) {
    transform: translateX(120px) rotateY(-90deg) rotateX(-45deg);
}
.container .bar:nth-child(5) {
    transform: translateX(160px) rotateY(-90deg) rotateX(-45deg);
}
.container .bar:nth-child(6) {
    transform: translateX(200px) rotateY(-90deg) rotateX(-45deg);
}
.container .bar:nth-child(7) {
    transform: translateX(240px) rotateY(-90deg) rotateX(-45deg);
}
/* 实现柱状体的与正面（文字面）相同的一面，角度90度 */
.container .bar::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #FFF;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
    /* 开始旋转
    以顶部为基点，X轴旋转负90度形成直角 */
    transform-origin: top;
    /* 旋转后暂时看不见了 */
    transform: rotateX(-90deg);
    /* 柱状图图初始透明度为0 */
    opacity: 0;
    /* 动画相关配置 */
    transition: 1s;
}
/* 实现柱状体两头的面，我们把这个放在右侧，旋转后就是柱状体的顶部 */
.container .bar::before {
    position: absolute;
    content: '';
    top: 0;
    left: 100%;
    width: 20px;
    height: 20px;
    background-color: #FFF;
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.05));
    /* 以左变现为基点，Y轴旋转90度直角 */
    transform-origin: left;
    /* 旋转后也看不见了 */
    transform: rotateY(90deg);
    /* 柱状图图初始透明度为0
    opacity: 0; */
    /* 动画相关配置 */
    transition: 1s;
}
/* 处理柱状体文字及背景 */
.container .bar {
    text-align: right;
}
.container .bar span {
    padding-right: 10px;
    font-size: 12px;
    color: #555;
    opacity: 0;
}
/* 柱状图整体Z轴移动40px超过背景图的20px不至于发生遮挡 */
.container.active .chart {
    transform: translateZ(20px);
    /* background-color: #BDC581; */
}
/* 开始做动画效果，高度发生变化 */
.container.active .bar:nth-child(1) {
    width: 200px;
}
.container.active .bar:nth-child(2) {
    width: 100px;
}
.container.active .bar:nth-child(3) {
    width: 150px;
}
.container.active .bar:nth-child(4) {
    width: 240px;
}
.container.active .bar:nth-child(5) {
    width: 70px;
}
.container.active .bar:nth-child(6) {
    width: 70px;
}
.container.active .bar:nth-child(7) {
    width: 100px;
}
.container.active .bar::after {
    opacity: 1;
}
.container.active .bar span {
    opacity: 1;
}

HTML+CSS制作3D步数统计界面

热门文章

最新文章

相关课程

相关电子书

相关实验场景