html - 当球通过时如何使环/箍翻转?
问题描述
我正在尝试做这样的事情:
但球似乎并没有穿过环,而是穿过环。我该如何解决这个问题?
body {
height: 50em;
}
.ring {
position: relative;
width: 200px;
height: 100px;
border-radius: 50%;
border: 10px solid #ffcf82;
z-index: 9
}
@keyframes spinner {
0% {
transform: rotateZ(0deg);
}
30% {
transform: rotateZ(0deg);
}
60% {
transform: rotateZ(180deg);
}
}
@keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-370px);
}
}
.ring {
animation-name: spinner;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 5s;
transform-style: preserve-3d;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 100px;
}
.ball {
animation-name: translate;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 8s;
transform-style: preserve-3d;
}
<div class="ring"></div>
<div class="ball"></div>
解决方案
我将使用两个元素(底部和顶部)创建环,以便能够以不同方式调整每个元素的 z-index:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.ring:after {
z-index:1;
clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);
}
@keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes translate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-300px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
如果您需要比clip-path
. 诀窍是玩透明色:
.ring {
margin-top:80px;
position: relative;
width: 200px;
height: 100px;
}
.ring:before,
.ring:after{
content:"";
position:absolute;
left:0;
right:0;
height:100%;
border: 10px solid #ffcf82;
border-radius:50%;
box-sizing:border-box;
}
.ring:before {
z-index:-1;
}
.ring:after {
z-index:1;
border-bottom-color:transparent;
border-right-color:transparent;
}
@keyframes spinner {
0%,50% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
@keyframes translate {
0% {
transform: translateY(10px);
}
50% {
transform: translateY(-310px);
}
}
.ring:before,
.ring:after{
animation: spinner infinite alternate 4s;
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background: #14e78e;
margin: 60px 80px;
position:relative;
z-index:0;
animation: translate 8s infinite linear;
}
<div class="ring"></div>
<div class="ball"></div>
推荐阅读
- version-control - Mercurial经常留下锁
- c# - 具有 azure 函数和 Web api 的 EF Core 连接字符串设置
- google-sheets - 如何从谷歌表格中获取独特的未知单词列表
- r - 用于数据库连接的 R 函数装饰器
- amazon-eks - 连接到 AWS 上的 kubernetes 仅在通过 eksctl 创建集群时有效
- sql-server - 有条件地在脚本文件中设置 SQLCMD 变量?
- ios - NSArray 元素未能匹配 Swift Array 元素类型 Expected NSMutableArray 但找到 __NSDictionaryI:
- r - 如何将单元格元素转换为列
- c# - SQLite 的 MissingMethodException
- class - Flutter 类继承