【发布时间】：2020-04-05 09:23:16
【问题描述】：
我在 figma 中制作动画，但我不知道如何使用 css 制作动画 :(
我试图改变高度，但文本没有隐藏在标题下，如何解决？ Image
这是figma中的动画链接（figma中的动画效果不好，但意思很清楚） https://imgur.com/kUStXxK
.reviewPost {
// height: 1400px;
max-width: 1300px;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.15);
border-radius: 15px;
align-self: center;
.reviewPostHeader {
display: flex;
align-items: flex-end;
justify-content: center;
height: 250px;
width: 1300px;
background: rgb(255, 199, 199);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
border-radius: 15px;
.reviewPostInfo {
display: flex;
justify-content: space-evenly;
align-items: center;
height: 30px;
width: 750px;
background: #fff;
border-radius: 15px 15px 0 0;
font-size: 20px;
}
}
.reviewPostBody {
display: flex;
align-items: flex-end;
justify-content: center;
.reviewPostDesc {
margin: 46px 56px;
.reviewPostDescHeader {
display: flex;
justify-content: space-between;
align-items: center;
.reviewPostDescTitle {
font-weight: 500;
font-size: 48px;
}
.reviewPostDescDate,
.reviewPostDescRead {
font-weight: 500;
font-size: 24px;
}
}
.reviewPostDescBody {
.reviewPostDescIntro {
margin: 50px 0 0 0;
.reviewPostDescIntroTitle {
font-weight: 500;
font-size: 30px;
}
.reviewPostDescIntroDesc {
font-size: 20px;
}
}
.reviewPostDescTable {
display: flex;
justify-content: space-evenly;
// align-items: center;
margin: 50px 0 0 0;
.reviewPostDescTablePros {
.tableHeader {
font-weight: 500;
font-size: 30px;
}
.tableBody {
margin: 48px 0 0 0;
font-size: 25px;
ul {
li {
margin-top: 12px;
}
}
}
}
.reviewPostDescTableLine {
background: black;
width: 3px;
height: 396px;
}
.reviewPostDescTableCons {
.tableHeader {
display: flex;
flex-direction: column;
align-items: flex-start;
font-weight: 500;
font-size: 30px;
}
.tableBody {
margin: 48px 0 0 0;
font-size: 25px;
ul {
li {
margin-top: 12px;
}
}
}
}
}
.reviewPostDescAdvice {
margin: 50px 0 0 0;
.reviewPostDescAdviceTitle {
font-weight: 500;
font-size: 30px;
}
.reviewPostDescAdviceDesc {
font-size: 20px;
}
}
}
.reviewPostDescFooter {
display: flex;
margin: 50px 0 0 0;
.reviewPostDescViews,
.reviewPostDescRating {
font-weight: 500;
font-size: 24px;
}
.reviewPostDescRating {
margin-left: 20px;
}
}
}
}
}<div className='reviewPost'>
<div className='reviewPostHeader'>
<div className='reviewPostImage'></div>
<div className='reviewPostInfo'>
<div className='reviewPostInfoRating'>Rating: ***** 4</div>
<div className='reviewPostInfoViews'>Views: 325</div>
<div className='reviewPostInfoRead'>Read: 5 MIN</div>
<div className='reviewPostInfoDate'>Date: 12.03.2020</div>
</div>
</div>
<div className='reviewPostBody'>
<div className='reviewPostDesc'>
<div className="reviewPostDescHeader">
<div className="reviewPostDescDate">Date: 12.03.2020</div>
<div className="reviewPostDescTitle">Mc'Donalds cashier</div>
<div className="reviewPostDescRead">Read: 5 MIN</div>
</div>
<div className="reviewPostDescBody">
<div className="reviewPostDescIntro">
<div className="reviewPostDescIntroTitle">Introduction</div>
<div className="reviewPostDescIntroDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna mauris tortor quam malesuada congue consectetur amet, faucibus sem. Feugiat duis auctor justo nullam. Non ac ut quam libero etiam massa aliquam, nulla. Fermentum, arcu erat nibh posuere suspendisse magnis. Sit vitae sit ac nunc dignissim. Eu risus, molestie vel nec venenatis. Bibendum tristique sit pulvinar faucibus nunc purus, euismod. Quisque aliquam ut sed sit aenean. Eu cras tincidunt aliquet velit, libero.</div>
</div>
<div className="reviewPostDescTable">
<div className="reviewPostDescTablePros">
<div className="tableHeader">Pros</div>
<div className="tableBody">
<ul>
<li>1234</li>
<li>1234</li>
<li>1234</li>
</ul>
</div>
</div>
<div className='reviewPostDescTableLine'></div>
<div className="reviewPostDescTableCons">
<div className="tableHeader">Cons</div>
<div className="tableBody">
<ul>
<li>5678</li>
<li>5678</li>
<li>5678</li>
</ul>
</div>
</div>
</div>
<div className="reviewPostDescAdvice">
<div className="reviewPostDescAdviceTitle">Advice to management</div>
<div className="reviewPostDescAdviceDesc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Urna mauris tortor quam malesuada congue consectetur amet, faucibus sem. Feugiat duis auctor justo nullam. Non ac ut quam libero etiam massa aliquam, nulla. Fermentum, arcu erat nibh posuere suspendisse magnis. Sit vitae sit ac nunc dignissim. Eu risus, molestie vel nec venenatis. Bibendum tristique sit pulvinar faucibus nunc purus, euismod. Quisque aliquam ut sed sit aenean. Eu cras tincidunt aliquet velit, libero.</div>
</div>
</div>
<div className="reviewPostDescFooter">
<div className='reviewPostDescViews'>Views: 325</div>
<div className='reviewPostDescRating'>Rating: ***** 4</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
类的 HTML 属性是
class不是className
标签： html css animation frontend