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站 获取更多教程
