可以自己去找动画人物纯色背景，这样抠图比较容易。
字体是我随便找的
下面是代码（看不懂没事）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画卡片的制作</title>
</head>
<style>
@font-face {
font-family: q;
src: url(font/源界明朝.TTF);
}
@font-face {
font-family: q1;
src: url(font/装甲明朝体.TTF);
}
@font-face {
font-family: q2;
src: url(font/郑庆科黄油体.TTF);
}
body{padding: 0; margin: 0;min-height: 100vh;background: #345; }
.container h1{ background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
-webkit-background-clip: text;
/*-webkit-background-clip: text;意思是，以盒子内的文字作为裁剪区域向外裁剪，文字之外的区域都将被裁剪掉。*/
/*文字颜色填充为透明*/
-webkit-text-fill-color: transparent;
margin: 30px;
font-size: 60px;
font-weight: 1200;
font-family:q ;
}
.container .card{position: relative;}
.container .card .face{width: 300px; height: 250px;}
.container .card .face01{
position: relative; background: #333; display: flex; justify-content: center;
align-items: center;flex-direction: column; z-index: 1; transform: translateY(100px);
}
.container .card .face01 .content{display: flex; opacity: 0.2; transition: 0.75s;justify-content: center;
align-items: center;flex-direction: column;}
.container .card:hover .face01 .content{display: flex; opacity: 1; transition: 0.75s;justify-content: center;
align-items: center;flex-direction: column;}
.container .card:hover .face01{ transform: translateY(0px);}
.card_container .card .face02{
position: relative; display: flex; justify-content: center;
align-items: center;flex-direction: column; padding: 20px; box-sizing: border-box;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);transform: translateY(-101px);
}
.card_container .card:hover .face02{transform: translateY(0px); transition: 0.75s;}
p{color: aliceblue; font-family: q3;font-size: 15px;}
.face .face01 h2{font-family: q2; font-size: 30px;}
.container{
/* 弹性盒子布局：主轴方向居中显示 */
display: flex; justify-content: center;flex-direction: column;align-items:center;
}
.role01{width: 170px;}
.role02{width: 170px;}
.role03{width: 170px;}
.card_container{width: 1000px; position: relative; display: flex; justify-content: space-between;}
</style>
<!-- ------------------------------------------------------------------------------------------------------------------------------- -->
<body>
<div class="container">
<div><h1>Please select your avatar</h1></div>
<div class="card_container">
<div class="card">
<div class="face01">
<div class="content">
<img class="role01" src="img/01.png" alt="">
<h2>GIRL</h2>
</div>
</div>
<div class="face02">
<div class="content">
<p>
There is only one path that cannot be chosen - and that is the path of abandonment; There is only one path that cannot be refused - and that is the path of growth
</p>
</div>
</div>
</div>
<div class="card">
<div class="face01">
<div class="content">
<img class="role02" src="img/2.png" alt="">
<h2 >CAT</h2>
</div>
</div>
<div class="face02">
<div class="content">
<p>
There is only one path that cannot be chosen - and that is the path of abandonment; There is only one path that cannot be refused - and that is the path of growth
</p>
</div>
</div>
</div>
<div class="card">
<div class="face01">
<div class="content">
<img class="role03" src="img/4.png" alt="">
<h2>BEAR</h2>
</div>
</div>
<div class="face02">
<div class="content">
<p>
There is only one path that cannot be chosen - and that is the path of abandonment; There is only one path that cannot be refused - and that is the path of growth
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
图片素材：
里面用到的知识：
1.弹性盒子
display: flex; justify-content: center;
align-items: center;flex-direction: column;
transform: translateY(100px);
3.translateY() 在页面垂直移动元素
4.CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片
background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
推荐一个博主的文章：几个好看的CSS渐变色
5.CSS3利用-webkit-background-clip: text;实现文字渐变效果
-webkit-background-clip: text;
6.box-sizing属性用于定义盒子的宽度值和高度值是否包含元素的内边距和边框
box-sizing: border-box;
@font-face {
font-family: q1;
src: url(font/装甲明朝体.TTF);
}
8.CSS :hover 伪类
我之前照着课本写的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类</title>
<style>
a:link,a:visited{
color:pink;
text-decoration: none;
}
a:hover{
color: aqua;
text-decoration: underline;
}
a:active{color: blue;}
</style>
</head>
<body>
<a href="#">公司首页</a>
<a href="#">公司简介</a>
<a href="#">产品介绍</a>
<a href="#">联系我们</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>h1元素</title>
<style>
h1:hover{
color: aqua;
text-decoration: underline;
}
h1:active{
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>你好世界!</h1>
</body>
</html>