html - 使用css将矩形动画成半心形
问题描述
动画先将形状向下移动,然后再向左移动,而不是沿对角线移动。我在动画时间或元素的位置上出错了。我知道它只是动画形状,已经在许多帖子中介绍过。我发现使用伪元素为形状设置动画很棘手。感谢帮助。
.container {
background-color: black;
height: 500px;
width: 300px;
margin: 0 auto;
position: relative;
}
.firsthalf
/* this is going to turn into the bottom of the half heart shape */
{
height: 0px;
width: 0px;
position: absolute;
margin: auto;
right: 0px;
top: 25px;
border: 25px solid green;
animation-name: heart-bottom1;
animation-duration: 3s;
}
@keyframes heart-bottom1 {
0% {
top: 25px;
right: 0px;
border-radius: 25px solid green;
}
50% {
border-bottom: 25px solid transparent;
border-right: 25px solid transparent;
top: 200px;
left: 100px;
}
100% {
top: 25px;
right: 0px;
}
}
.firsthalf::before
/*this is going to turn into the upper part(the spherical bit) of the half
heart*/
{
content: "";
background-color: green;
height: 25px;
width: 50px;
position: absolute;
bottom: 25px;
left: -25px;
animation-name: heart-up1;
animation-duration: 3s;
}
@keyframes heart-up1 {
0% {
height: 25px;
width: 50px;
border-radius: 0;
}
50% {
border-radius: 25px 25px 0 0;
}
100% {
border-radius: 0;
height: 25px;
width: 50px;
}
}
<div class="container">
<div class="firsthalf">
</div>
</div>
解决方案
推荐阅读
- javascript - 无法在 scrollView 中滚动
- f# - F# Opensource WindowTabs Bug 修复窗口位置
- django - Django MultiChoiceField 表单无效
- dart - Dart 中的程序可以使用 int 但无法使用 BigInt 解决
- python - 如何使用 Tensorflow 获取张量中最大值的索引?
- java - LeetCode:吃 N 个橙子的最少天数
- javascript - 如何使用 node.js 从目录中读取多个 csv 文件?
- python - 我有一个包含用户登录详细信息和配置读取方法的 config.ini 文件,如何在我的测试用例中使用来自 config.ini 的数据?
- c# - 反向链表 c#
- c - Cortex M3,gcc - C 中更快的边界