【五分钟CSS】纯CSS个性代码样式名片

BGM:kv-ocean

Github 地址:https://github.com/FastChen/FiveMinutesCSSEffect
今天给大家分享一个纯CSS个性代码样式名片

本期代码

<!--
    代码来源于网络 Code from the Internet
    复古派科技:https://fgpai.com
    灵工艺软件工作室:https://nullcraft.org
    项目文件开源地址:https://github.com/FastChen/FiveMinutesCSSEffect
    单文件代码查看地址:https://fgpai.com/video/css

    调用字体:
      font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    背景渐变色:
      background-image: linear-gradient(to bottom right, #ff9800, #ffa726);
    代码块颜色:
     蓝色:#29b6f6,绿色:#9ccc65,紫色:#ba68c8,青色:#4dd0e1,红色:#ef5350
-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>五分钟玩转CSS - 个性代码样式名片</title>
</head>
<style>
* {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

body {
  background-image: linear-gradient(to bottom right, #ff9800, #ffa726);
}

.blue {
  color: #29b6f6;
}

.green {
  color: #9ccc65;
}

.purple {
  color: #ba68c8;
}

.cyan {
  color: #4dd0e1;
}

.red {
  color: #ef5350;
}

.content {
  height: 100vh;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  -webkit-perspective: 150rem;
          perspective: 150rem;
  height: 20rem;
  width: 30rem;
  position: relative;
}
.card-side {
  height: 15rem;
  transition: all 0.8s ease;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 30rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
}
.card-side-front {
  background-color: #1c1c1c;
}
.card-side-back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  background-color: #1c1c1c;
}
.card:hover .card-side-front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.card:hover .card-side-back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.card-cont {
  height: 15rem;
  background-color: #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  color: white;
}
.card-cta p {
  margin-left: 1rem;
}
.card-cta p > .space {
  margin-left: 2rem;
}

</style>
<body>
<div class="content">
  <div class="card">
    <div class="card-side card-side-front">
      <!-- Front Content -->
      <div class="card-cont">
        <span class="blue">alert</span><span>(<span class="green">'Hello World!'</span>)</span>
      </div>
    </div>
    <div class="card-side card-side-back">
      <!-- Back Content -->
      <div class="card-cta">
        <p><span class="purple">const</span> aboutMe <span class="cyan">=</span> {
          <br />
          <span class="space red">name</span><span class="cyan">:</span> <span class="green">'FastChen'</span>,
          <br/>
          <span class="space red">email</span><span class="cyan">:</span> <span class="green">'[email protected]</span>',
          <br/>
          <span class="space red">bilibili</span><span class="cyan">:</span> <span class="green">'复古派科技'</span>,
          <br/>
          <span class="space red">website</span><span class="cyan">:</span> <span class="green">'FGPai.com'</span>
          <br/> };
        </p>
      </div>
    </div>
  </div>
</body>
</html>

本视频由 复古派科技 官方制作 你可以前往 官方B站 获取更多教程

发表评论

登录后才能评论