html - 使用纯 css 的位置图标动画
问题描述
我打算像一滴水一样围绕位置图标移动。尝试了一下,但我不能让水完全围绕位置图标旋转,因为我不太喜欢动画。
这是我的代码,
<div id ="location">
<div id = "droplet"></div>
</div>
#location {
background: black;
height: 200px;
width: 200px;
border-radius: 50% 50% 50% 0;
transform:rotate(-45deg);
}
#location::after{
content '';
width 14px;
height 14px;
margin: 8px 0 0 8px;
background: #89849b;
position absolute;
border-radius 50%;
}
#droplet {
background: #2c3e50;
height: 50px;
width: 50px;
border-radius:50%;
border: 5px double darkgreen;
margin: 23%;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:4s
}
@-webkit-keyframes rotate{
0%{-webkit-transform: rotate(-90deg) rotateY(0) scale(0)}
30%{-webkit-transform: rotate(90eg) rotateY(0) scale(0.7)}
80%{-webkit-transform: rotate(180deg) rotateY(0) scale(1)}
100%{-webkit-transform: rotate(-360deg) rotateY(0) scale(0)}
}
如何使水滴在位置图标内旋转(但它应该围绕其边缘移动)
解决方案
推荐阅读
- caching - 方法未返回带有 @Cacheable 注释的值
- c# - 如何在 WPF 中安全地显示随机生成的密码
- python - 第二次加载 Keras 模型时出错。Feed_dict 错误
- ebpf - stdio.h 标头不适用于 eBPF 内核程序
- bitbucket-server - 如何使用 Javascript API Atlassian Bitbucket?
- css - 在 reactJs 中动态和有条件地更改按钮的 css
- python - 嵌套类中的作用域如何?
- javascript - 如何在窗口中使用 JS 三元运算符。滚动对象
- java-native-interface - nvcc 在编译 JNI 代码时生成无效错误
- android - 找不到 Gradle DSL 方法:'implementation()' (Android React Native)