前言
这次选择的是以我的名片作为主题进行创作，主题介绍中提到了炫酷的名片，看到这句话让我想起了那种大幕，一开始一个大大的红色幕布缓缓拉开，剧情人物纷纷涌现，于是奠定了这次创作的基础思路，搞一个类似幕布的效果，信息内容缓缓出现 okay 思路确定，开始搞码。
1. 确定背景
首先不可能会搞一个满屏的大幕来拉开，首先第一眼看到的时候，人眼肯定距离屏幕还是有稍微偏近的，所以太大的效果反而不如小幕来的效果好，而且正好贴和了名片精美小巧的风格.
先去搜罗一个不错的高大上的背景图
确定背景色调，取了暗蓝色作为背景衬托这个卡片
rgb(119 157 193)
body {
display: flex;
justify-content: center;
background-color: rgb(119 157 193);
}
2. 幕布拉动
这里将图片分割为了五块，两侧的四块效果使用到了 CSS3 的 transform 调动了图片 Z 轴度数，添加 postion 定位和 filter 设置阴影效果，从而实现层级透视，然后配合上 hover 对数据进行行为控制，让图片的位置向后移动，移入大幕拉开，移出大幕拉回，实现大幕拉开拉回效果.
css3 transform 代码
.start-margin {
left: -400px;
transform: rotateZ(-100deg);
overflow: hidden;
}
/* 设置阴影 */
filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.5));
3. 名片内容
名片内容也采取正常的个人名片基本信息，名字、职业、地址、电话、地址这些，然后包裹在 title-box 这个盒子里面，调整下 css 代码，最后大功告成，一个炫酷简单的个人名片就做好了，代码内容在下面的马上掘金进行查看.
.title-box {
opacity: 0;
font-size: 28px;
font-weight: 900;
text-align: center;
/* 设置字体间距 */
letter-spacing: 10px;
color: rgb(60, 60, 70);
transition: 0.5s;
}
