当青训营遇上码上

主题 1：我的手刺

手刺是向人介绍自我的重要工具，作为一名程序员用代码做毛遂自荐是一件十分酷炫的工作。请大家围绕“我的手刺”这个主题进行代码创造。

「青训营 X 码上掘金」CSS实现3D效果的名片

前言

上次的青训营主题创造没赶上，其时在写码上迎新年的活动，然后发现错过时间了，这次入营版正好补上。作品主要用到了transform特点以及伪元素。

完结进程

立方体

先来看看立方体的部分，经过css完结3D作用已经不是什么稀奇事，也是由于在之前的学习中写过,所以就加入到这次的作品中了,大家能够结合这份代码阅览。 「青训营 X 码上掘金」CSS实现3D效果的名片

在HTML中，咱们需求6个div来担任一个立方体的6个面，然后再一个父标签包裹起来，后边会经过操控这个父标签进行立方体的转动。（test是为了便利观察新加的）

<div class="wrapper">
  <div class="cube show">
    <div class="is_top">1</div>
    <div class="is_bottom">2</div>
    <div class="is_left">3</div>
    <div class="is_right">4</div>
    <div class="is_front">5</div>
    <div class="is_back">6</div>
    <div class="test"></div>
  </div>
</div>

CSS需求留意的是要在cube中增加 transform-style: preserve-3d;这样才使其子元素支撑3D作用。一起，这一步也有个前提，便是需求在cube的父元素上增加perspective来设置透视作用。

「青训营 X 码上掘金」CSS实现3D效果的名片

假如不设置会是这个样子，能够很明显的看出右边的面双方平行是等长的，而咱们需求的是近大远小的作用。

完结以上步骤，就能够逐渐完结每一个面，接下来需求用到transform的rotateX、rotateY、translateZ三个办法。

「青训营 X 码上掘金」CSS实现3D效果的名片
经过演示代码中的滑杆，能够很简略对这三个办法进行理解，可是还是有需求留意的当地,咱们不难发现完结其中一面不只要一套参数，比方rotateX(0) rotateY(90) translateZ(-150)与rotateX(0) rotateY(-90) translateZ(150)都能将正方形贴在左面，可这有什么区别？假如仅凭以上的代码欠好发现端倪，那就加上点文字试试。一图胜千言，咱们在设置的进程还需求留意每一个面的正反。

「青训营 X 码上掘金」CSS实现3D效果的名片

设置完每一个面之后对立方体的设置也是相同的，所以就不做过多赘述了。

按钮动画

「青训营 X 码上掘金」CSS实现3D效果的名片

按钮的动画分为2个，一个是扩散的涟漪作用，二个是鼠标悬停呈现文字。

HTML部分只要一个标签，CSS简略的定个位。

//HTML
<div class="btn"></div>
//CSS
.btn {
  cursor: pointer;
  position: absolute;
  left: calc(50% - 50px);
  bottom: 150px;
  width: 100px;
  height: 100px;
  background: url(https://www.6hu.cc/wp-content/uploads/2023/02/1675379616-84e21318dad7e84.png)
    no-repeat center/cover;
}

首要介绍一下需求用到的两个伪元素

  • before 向选定的元素前刺进内容。
  • after 向选定元素的最后子元素后边刺进内容。

伪元素不是真实的页面元素，html没有对应的元素，可是其所有用法和表现行为与真实的页面元素相同，能够对其运用诸如页面元素相同的css款式。 ::before和::after增加的内容默认是inline元素。
运用这两个伪元素一定要增加content特点，不然浏览器不会显示该伪元素。 经过以上的描述，咱们先完结一个与btn自身贴合的after伪元素，然后再经过animation动画去操控伪元素的缩放以及透明度

.btn::after {
  content: "";
  width: 100px;
  height: 100px;
  position: absolute;
  background: url(https://www.6hu.cc/wp-content/uploads/2023/02/1675379616-84e21318dad7e84.png)
    no-repeat center/cover;
  transform-origin: center;
  transform: scale(1);
  animation: scale 3s infinite;
}
@keyframes scale {
  0% {
    transform: scale(0.4);
    opacity: 1;
  }
  50% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

接下来再去完结一个before伪元素，运用absolute定位将其移动到btn的上方，再把btn的:hover选择器作用于before伪元素。

.btn::before {
	font-size:14px;
  text-align: center;
	color:#ccc;
	content:"新火试新茶，诗酒趁岁月";
	height:20px;
	width:180px;
	background-color:#fff;
	position:absolute;
	left:-40px;
  top: -30px;
	border-radius:10px;
	opacity:0;
	transition:all .5s;
}
.btn:hover:before {
	opacity:1;
	transition:all 1s;
}