页面加载时的CSS边框转换

Question

我想在页面加载后制作一个定时边框绘制动画。我基本上希望div容器的边界被隐藏，然后通过转换绘制容器边界，由加载的页面触发(无需悬停(。我能够在悬停时找到如何做到这一点，但我不知道如何在页面加载时做到。我将如何将其实现到以下代码中？

<div id="profile-content">
Insert Content Here
</div>
#profile-content
{
border: 3px solid;
border-color: #FFFFFF;
padding: 4em 4em 4em 14em;
margin: 0 0 0 4em;
}

Answer 1

有很多方法可以查看边界转换，我刚刚展示了几个。

源

有一个属性transition，它接受seconds作为参数来为您提供效果。

#profile-content {
outline: solid 5px #FC5185;
transition: outline 0.6s linear;
margin: 0.5em;
}
#profile-content:hover {
outline-width: 10px;
}

<div id="profile-content">
Insert Content Here
</div>

或

Div边界转换：

div {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
width: auto;
}
div::before,
div::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
#profile-content {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
#profile-content::before,
#profile-content::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
#profile-content::before {
top: 0;
left: 0;
}
#profile-content::after {
bottom: 0;
right: 0;
}
#profile-content:hover {
color: Teal;
}
#profile-content:hover::before,
#profile-content:hover::after {
width: 100%;
height: 100%;
}
#profile-content:hover::before {
border-top-color: black;
border-right-color: black;
-webkit-transition: width 1s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
#profile-content:hover::after {
border-bottom-color: black;
border-left-color: black;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

<div id="profile-content">
Insert Content Here
</div>