使用 flexbox 创建动画边框

问题描述 投票:0回答:0

我想看看是否有可能在 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>
css flexbox border
© www.soinside.com 2019 - 2024. All rights reserved.