英文:
How do i make the border animation following border radius?
问题
我希望边框动画能够跟随 div 的边框半径。然而,动画并没有跟随边框半径。
.container {
height: 150px;
width: 150px;
border: 1px solid black;
border-radius: 20px;
background: yellow;
border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
animation: borderRotate var(--d) linear infinite forwards;
}
@keyframes borderRotate {
100% {
--angle: 420deg;
}
}
@property --angle {
syntax: '<angle>';
initial-value: 90deg;
inherits: true;
}
:root {
--d: 2500ms;
--angle: 90deg;
--c1: red;
--c2: blue;
}
<div class="container"></div>
如何实现具有边框半径的动画?
英文:
I want the border animation to follow the border-radius of div. However, the animation doesn't follow the border radius.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
height: 150px;
width: 150px;
border: 1px solid black;
border-radius: 20px;
background: yellow;
border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
animation: borderRotate var(--d) linear infinite forwards;
}
@keyframes borderRotate {
100% {
--angle: 420deg;
}
}
@property --angle {
syntax: '<angle>';
initial-value: 90deg;
inherits: true;
}
:root {
--d: 2500ms;
--angle: 90deg;
--c1: red;
--c2: blue;
}
<!-- language: lang-html -->
<div class="container"></div>
<!-- end snippet -->
How do i achieve the animation with border radius ?
答案1
得分: 2
这是您想要实现的效果吗?使用伪元素,您将::before
元素偏移了50%,同时将其大小调整为原始大小的200%。然后叠加一个::after
伪元素。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.container {
position: relative;
z-index: 0;
width: 130px;
height: 130px;
border-radius: 20px;
padding: 10px;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-image: conic-gradient(red, yellow, green, blue, black);
animation: rotate 4s linear infinite;
}
.container::after {
content: '';
position: absolute;
z-index: -1;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
background: yellow;
border-radius: 15px;
}
<div class="container"></div>
以上是您提供的代码的翻译部分。
英文:
Is this what you are trying to achieve? Using pseudo elements, you offset the ::before
element by 50% while also making it 200% of its original size. Then overlay an ::after
pseudo element.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
.container {
position: relative;
z-index: 0;
width: 130px;
height: 130px;
border-radius: 20px;
padding: 10px;
overflow: hidden;
}
.container::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-image: conic-gradient(red, yellow, green, blue, black);
animation: rotate 4s linear infinite;
}
.container::after {
content: '';
position: absolute;
z-index: -1;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
background: yellow;
border-radius: 15px;
}
<!-- language: lang-html -->
<div class="container"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论