我想看看是否有可能在 flexbox 上创建动画“微光”效果? “面板”必须能够改变形状以容纳 1 行文本到 3 或 4 行文本。 我想知道这是否需要 javascript 或 jquery 而不是纯 css。 这也必须响应能够在移动屏幕和桌面上工作。
.panel-container {display: flex; width: 100vw;}
.profile-panels {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100vw;
margin: 20px 0 0 0;
}
.profile-smaller-panel h4 {
margin: 0 0 0 0;
padding: 16px 0 0 0;
font-family: Arial;
font-size: 16px;
}
.profile-smaller-panel {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0 10px;
}
.profile-blocks {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
font-family: 'therestone', 'Roboto', 'Arial';
box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 3px 5px 0 rgb(0 0 0 / 20%);
max-width: 200px;
cursor: pointer;
border-radius: 4px;
padding: 5px 10px;
}
<div class="panel-container">
<div class="profile-panels">
<div class="profile-smaller-panel">
<div class="profile-blocks" tabindex="1">Lorem ipsum dolor sit</div>
</div>
<div class="profile-smaller-panel">
<div class="profile-blocks" tabindex="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="profile-smaller-panel">
<div class="profile-blocks" tabindex="3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget pharetra lacus, sit amet elementum velit</div>
</div>
<div class="profile-smaller-panel">
<div class="profile-blocks" tabindex="4">Lorem ipsum dolor sit amet. Etiam eget pharetra lacus, sit amet elementum velit</div>
</div>
</div>