漩涡鸣人的电子名片前言最近报名了第五届青训营前端基础班，想借此机会提高自己。掘金官方举办了青训营码上掘金活动来帮助我

当青训营遇上码上掘金 最近报名了第五届青训营前端基础班，想借此机会提高自己。掘金官方举办了青训营码上掘金活动来帮助我们学习，我看到这个活动已经是最后一天了，而且我以前从来没接触过前端编程，html和css都不会，但是我又想参加这个活动，所以今天在b站和csdn上照着一些大佬的教学做了一个名片。

为什么选择漩涡鸣人？我火影忍者是我看完的最长的一部番，海贼王只看到顶上战争就没看了。在火影忍者，我比较喜欢鸣人。

成果展示

code.juejin.cn/pen/7182869…

html代码


<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>个人名片</title>
</head>
<body>
<div class="card_a">
  <section>
    <h2>漩涡鸣人<span>七代火影</span> </h2>
    <img src="wx.png" alt="">
    <ul>
      <li>绝招 / 螺旋丸、影分身</li>
      <li>性格 / 正直、善良、勇敢</li>
      <li>住址 / 木叶村 </li>
      <li>梦想 / 成为火影 </li>
    </ul>
  </section>
</div>
<style>
 * {
    margin: 0;
    padding: 0
}
 
.card_a {
    width: 800px;
    height: 460px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -230px;
    margin-left: -400px;
    background: #efe6f1;
    overflow: hidden;
    border-radius: 10px;
}

</style>
</body>
</html>

css代码

.card_a:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    background: linear-gradient(45deg, #8ed3e1 8%, transparent, #efe6f1);
    bottom: -53px;
    left: -87px;
}
 
.card_a:after {
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 100%;
    background: radial-gradient(#afdfef, #c8e8f2, transparent 60%, #efe6f1);
    top: -123px;
    right: -352px;
}
 
.card_a section {
    width: 600px;
    position: absolute;
    left: 100px;
    top: 80px;
    z-index: 9;
}
 
.card_a section h2 {
    font-size: 50px;
    letter-spacing: .1em;
    margin-bottom: 66px;
}
 
.card_a section span {
    font-size: 28px;
    font-weight: normal;
    margin-left: 50px;
    letter-spacing: normal;
}
 
.card_a img {
    float: right;
    width: 140px
}
 
.card_a section ul {
    border-left: #222 3px solid;
    padding-left: 28px;
}
 
.card_a section ul li {
    list-style: none;
    line-height: 38px;
    font-size: 18px;
}