【HTML/CSS】弹性盒子 flex布局制作一个动画卡片

赤焰梦

已于 2023-01-07 16:26:45 修改

阅读量768

点赞数 1

分类专栏： HTML/CSS/Javascript 文章标签： css css3 html

于 2022-11-10 22:56:27 首次发布

本文链接：https://blog.csdn.net/m0_49442965/article/details/127797747

版权

本文介绍了如何利用HTML和CSS3的弹性盒子模型（flex布局）、CSS transform属性、translateY()函数、linear-gradient()渐变效果，以及:hover伪类来创建一个带有动画效果的卡片。此外，还提到了box-sizing属性的使用，以及通过@font-face引入自定义字体和-webkit-background-clip: text;实现文字渐变。推荐了一位博主关于CSS渐变色的文章。

摘要由CSDN通过智能技术生成

在这里插入图片描述
可以自己去找动画人物纯色背景，这样抠图比较容易。
字体是我随便找的
下面是代码（看不懂没事）：

<!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