当青训营遇上码上掘金

前言

首先很荣幸能够参加第五届字节跳动青训营,也很容易能参加「青训营 X 码上掘金」的创作活动。我所选的创作主题是主题1————我的名片。这次的创作并非是我个人原创，是我借鉴的，虽然并无创新，但是通过这次学习，我也学习到了很多东西，也再一次巩固了我的css功底。在众多创作中，我为什么会选择这个作品来学习并提交呢？我想大家应该都知道的是，我们在第一次接触陌生人时，如果只看其表面，我们并不能知道这个人到底是什么样的。或许表面他看起来文绉绉，但背后却是很狂野；也许表面他看起来很开朗，但背后却满是悲观。当我们真正去接触他人时，才会心里有数，了解他到底是个什么样的人，背后的世界是什么样的。而这张名片光看外表，它就是一张普普通通的相片，但是接触过后，背后的真正人物才显现出来。其实这个作品还能再进一步深化，就例如背后隐藏的是个人介绍，或者是一些感想等。这里就只用图片来描述

这次创作采用了HTML和CSS，当鼠标经过图片时，将浮现一个3D立体图片，当鼠标离开时，图片自动还原。

思路

第一步是搭建HTML结构
用一个a链接为大盒子，里面嵌套一个div子盒子card，再在card中嵌套一个div子盒子wrapper。在wrapper中放入真正身份的图片，在card中放入表面图片。

<!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>My 3Dcard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#">
        <div class="card">
            <div class="wrapper">
                <img src="https://i.postimg.cc/fRhGHFQh/card.jpg" class="cover-image">
            </div>
            <img src="https://i.postimg.cc/tCNv2gq9/wrapper.png" class="character">
        </div>
    </a>
</body>
</html>

第二步，写CSS样式
首先对页面进行基本的初始化，设置好图片的大小和位置，使用::before和::after实现两张图片重叠。利用鼠标hover事件，实现当鼠标经过图片时，表面图片opacity=0隐藏，真正身份opacity=1出现，同理，鼠标离开后，真正身份隐藏。这是样式的基本框架，后面通过加3D效果和阴影修饰，这样一个3D立体就能跃然于屏

:root{
    --card-heigth:300px;
    --card-width:calc(var(var(--card-heigth)) / 1.5);
}
*{
    box-sizing: border-box;
}
body{
    width: 100vm;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #191c29;
}
.card{
    width: var(--card-heigth);
    height: var(--card-heigth);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding:  0 36px;
    perspective: 2500px;
    margin: 0 50px;
}
.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wrapper{
    transition: all 0.5s;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.card:hover .wrapper{
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow:2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}
.wrapper::before,
.wrapper::after{
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
}
.wrapper::before{
    top: 0;
    height: 100%;
    background-image: linear-gradient(
        to top,
        transparent 46%,
        rgba(12, 13, 19, 0.5)68%,
        rgba(12, 13, 19) 97%
    );
}
.wrapper::after{
    bottom: 0;
    opacity: 1;
    background-image: linear-gradient(
        to bottom,
        transparent 46%,
        rgba(12, 13, 19, 0.5) 68%,
        rgba(12, 13, 19) 97%
    );
}
.card:hover .wrapper::before,
.wrapper::after{
    opacity: 1;
}
.card:hover .wrapper::after{
    height: 120px;
}
.character{
    width: 100%;
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: 1;
}
.card:hover .character{
    opacity: 1;
    transform: translate3d(0%, -30%, 100px);
}

「青训营 X 码上掘金」| 我的名片

当青训营遇上码上掘金

前言

思路