如何在Android的CSS样式动画的中间添加位置图标
我通过将样式添加到html并将该html加载到webview中来制作了动画。
我需要在此动画的中间添加一个图标
我用于动画制作的样式是
.load {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.load:before, .load:after,
.load .dot,
.load .outline {
position: absolute;
top: 50%;
left: 50%;
-o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
}
.load .dot {
width: 96px;
height: 96px;
background: #FFFFFF;
-o-animation: in 4s linear infinite;
-moz-animation: in 4s linear infinite;
-ms-animation: in 4s linear infinite;
-webkit-animation: in 4s linear infinite;
animation: in 4s linear infinite;
z-index: 2;
}
.load:before {
content: "";
width: 0px;
height: 0px;
background: #3A60DB;
-o-animation: out1 4s linear infinite;
-moz-animation: out1 4s linear infinite;
-ms-animation: out1 4s linear infinite;
-webkit-animation: out1 4s linear infinite;
animation: out1 4s linear infinite;
}
.load:after {
content: "";
width: 0px;
height: 0px;
background: #FFFFFF;
-o-animation: out2 4s linear infinite;
-moz-animation: out2 4s linear infinite;
-ms-animation: out2 4s linear infinite;
-webkit-animation: out2 4s linear infinite;
animation: out2 4s linear infinite;
}
.load .outline {
width: 120px;
height: 120px;
z-index: 2;
}
.load .outline span {
width: 68px;
height: 68px;
-o-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-o-transform: rotate(45deg) skewX(80deg);
-moz-transform: rotate(45deg) skewX(80deg);
-webkit-transform: rotate(45deg) skewX(80deg);
-ms-transform: rotate(45deg) skewX(80deg);
transform: rotate(45deg) skewX(80deg);
overflow: hidden;
position: absolute;
bottom: 50%;
right: 50%;
-o-animation: outline 4s linear infinite;
-moz-animation: outline 4s linear infinite;
-ms-animation: outline 4s linear infinite;
-webkit-animation: outline 4s linear infinite;
animation: outline 4s linear infinite;
}
.load .outline span:before {
content: "";
display: block;
border: solid 5px #fff;
width: 200%;
height: 200%;
border-radius: 50%;
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
-o-animation: outlineBefore 4s linear infinite;
-moz-animation: outlineBefore 4s linear infinite;
-ms-animation: outlineBefore 4s linear infinite;
-webkit-animation: outlineBefore 4s linear infinite;
animation: outlineBefore 4s linear infinite;
}
@-o-keyframes outline {
0% {
-o-transform: rotate(0deg) skewX(80deg);
-moz-transform: rotate(0deg) skewX(80deg);
-webkit-transform: rotate(0deg) skewX(80deg);
-ms-transform: rotate(0deg) skewX(80deg);
transform: rotate(0deg) skewX(80deg);
}
25% {
-o-transform: rotate(500deg) skewX(15deg);
-moz-transform: rotate(500deg) skewX(15deg);
-webkit-transform: rotate(500deg) skewX(15deg);
-ms-transform: rotate(500deg) skewX(15deg);
transform: rotate(500deg) skewX(15deg);
}
50% {
-o-transform: rotate(1000deg) skewX(40deg);
-moz-transform: rotate(1000deg) skewX(40deg);
-webkit-transform: rotate(1000deg) skewX(40deg);
-ms-transform: rotate(1000deg) skewX(40deg);
transform: rotate(1000deg) skewX(40deg);
}
75% {
-o-transform: rotate(1500deg) skewX(60deg);
-moz-transform: rotate(1500deg) skewX(60deg);
-webkit-transform: rotate(1500deg) skewX(60deg);
-ms-transform: rotate(1500deg) skewX(60deg);
transform: rotate(1500deg) skewX(60deg);
}
100% {
-o-transform: rotate(2160deg) skewX(80deg);
-moz-transform: rotate(2160deg) skewX(80deg);
-webkit-transform: rotate(2160deg) skewX(80deg);
-ms-transform: rotate(2160deg) skewX(80deg);
transform: rotate(2160deg) skewX(80deg);
}
}
@-moz-keyframes outline {
0% {
-o-transform: rotate(0deg) skewX(80deg);
-moz-transform: rotate(0deg) skewX(80deg);
-webkit-transform: rotate(0deg) skewX(80deg);
-ms-transform: rotate(0deg) skewX(80deg);
transform: rotate(0deg) skewX(80deg);
}
25% {
-o-transform: rotate(500deg) skewX(15deg);
-moz-transform: rotate(500deg) skewX(15deg);
-webkit-transform: rotate(500deg) skewX(15deg);
-ms-transform: rotate(500deg) skewX(15deg);
transform: rotate(500deg) skewX(15deg);
}
50% {
-o-transform: rotate(1000deg) skewX(40deg);
-moz-transform: rotate(1000deg) skewX(40deg);
-webkit-transform: rotate(1000deg) skewX(40deg);
-ms-transform: rotate(1000deg) skewX(40deg);
transform: rotate(1000deg) skewX(40deg);
}
75% {
-o-transform: rotate(1500deg) skewX(60deg);
-moz-transform: rotate(1500deg) skewX(60deg);
-webkit-transform: rotate(1500deg) skewX(60deg);
-ms-transform: rotate(1500deg) skewX(60deg);
transform: rotate(1500deg) skewX(60deg);
}
100% {
-o-transform: rotate(2160deg) skewX(80deg);
-moz-transform: rotate(2160deg) skewX(80deg);
-webkit-transform: rotate(2160deg) skewX(80deg);
-ms-transform: rotate(2160deg) skewX(80deg);
transform: rotate(2160deg) skewX(80deg);
}
}
@-webkit-keyframes outline {
0% {
-o-transform: rotate(0deg) skewX(80deg);
-moz-transform: rotate(0deg) skewX(80deg);
-webkit-transform: rotate(0deg) skewX(80deg);
-ms-transform: rotate(0deg) skewX(80deg);
transform: rotate(0deg) skewX(80deg);
}
25% {
-o-transform: rotate(500deg) skewX(15deg);
-moz-transform: rotate(500deg) skewX(15deg);
-webkit-transform: rotate(500deg) skewX(15deg);
-ms-transform: rotate(500deg) skewX(15deg);
transform: rotate(500deg) skewX(15deg);
}
50% {
-o-transform: rotate(1000deg) skewX(40deg);
-moz-transform: rotate(1000deg) skewX(40deg);
-webkit-transform: rotate(1000deg) skewX(40deg);
-ms-transform: rotate(1000deg) skewX(40deg);
transform: rotate(1000deg) skewX(40deg);
}
75% {
-o-transform: rotate(1500deg) skewX(60deg);
-moz-transform: rotate(1500deg) skewX(60deg);
-webkit-transform: rotate(1500deg) skewX(60deg);
-ms-transform: rotate(1500deg) skewX(60deg);
transform: rotate(1500deg) skewX(60deg);
}
100% {
-o-transform: rotate(2160deg) skewX(80deg);
-moz-transform: rotate(2160deg) skewX(80deg);
-webkit-transform: rotate(2160deg) skewX(80deg);
-ms-transform: rotate(2160deg) skewX(80deg);
transform: rotate(2160deg) skewX(80deg);
}
}
@keyframes outline {
0% {
-o-transform: rotate(0deg) skewX(80deg);
-moz-transform: rotate(0deg) skewX(80deg);
-webkit-transform: rotate(0deg) skewX(80deg);
-ms-transform: rotate(0deg) skewX(80deg);
transform: rotate(0deg) skewX(80deg);
}
25% {
-o-transform: rotate(500deg) skewX(15deg);
-moz-transform: rotate(500deg) skewX(15deg);
-webkit-transform: rotate(500deg) skewX(15deg);
-ms-transform: rotate(500deg) skewX(15deg);
transform: rotate(500deg) skewX(15deg);
}
50% {
-o-transform: rotate(1000deg) skewX(40deg);
-moz-transform: rotate(1000deg) skewX(40deg);
-webkit-transform: rotate(1000deg) skewX(40deg);
-ms-transform: rotate(1000deg) skewX(40deg);
transform: rotate(1000deg) skewX(40deg);
}
75% {
-o-transform: rotate(1500deg) skewX(60deg);
-moz-transform: rotate(1500deg) skewX(60deg);
-webkit-transform: rotate(1500deg) skewX(60deg);
-ms-transform: rotate(1500deg) skewX(60deg);
transform: rotate(1500deg) skewX(60deg);
}
100% {
-o-transform: rotate(2160deg) skewX(80deg);
-moz-transform: rotate(2160deg) skewX(80deg);
-webkit-transform: rotate(2160deg) skewX(80deg);
-ms-transform: rotate(2160deg) skewX(80deg);
transform: rotate(2160deg) skewX(80deg);
}
}
@-o-keyframes outlineBefore {
0% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #ffffff;
}
25% {
-o-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
transform: skewX(-15deg);
border: solid 5px #ffffff;
}
49% {
border: solid 5px #ffffff;
}
50% {
-o-transform: skewX(-40deg);
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);
border: solid 5px #3463EB;
}
75% {
-o-transform: skewX(-60deg);
-moz-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
-ms-transform: skewX(-60deg);
transform: skewX(-60deg);
border: solid 5px #3463EB;
}
100% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #3463EB;
}
}
@-moz-keyframes outlineBefore {
0% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #ffffff;
}
25% {
-o-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
transform: skewX(-15deg);
border: solid 5px #ffffff;
}
49% {
border: solid 5px #ffffff;
}
50% {
-o-transform: skewX(-40deg);
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);
border: solid 5px #3463EB;
}
75% {
-o-transform: skewX(-60deg);
-moz-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
-ms-transform: skewX(-60deg);
transform: skewX(-60deg);
border: solid 5px #3463EB;
}
100% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #3463EB;
}
}
@-webkit-keyframes outlineBefore {
0% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #ffffff;
}
25% {
-o-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
transform: skewX(-15deg);
border: solid 5px #ffffff;
}
49% {
border: solid 5px #ffffff;
}
50% {
-o-transform: skewX(-40deg);
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);
border: solid 5px #3463EB;
}
75% {
-o-transform: skewX(-60deg);
-moz-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
-ms-transform: skewX(-60deg);
transform: skewX(-60deg);
border: solid 5px #3463EB;
}
100% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #3463EB;
}
}
@keyframes outlineBefore {
0% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #ffffff;
}
25% {
-o-transform: skewX(-15deg);
-moz-transform: skewX(-15deg);
-webkit-transform: skewX(-15deg);
-ms-transform: skewX(-15deg);
transform: skewX(-15deg);
border: solid 5px #ffffff;
}
49% {
border: solid 5px #ffffff;
}
50% {
-o-transform: skewX(-40deg);
-moz-transform: skewX(-40deg);
-webkit-transform: skewX(-40deg);
-ms-transform: skewX(-40deg);
transform: skewX(-40deg);
border: solid 5px #3463EB;
}
75% {
-o-transform: skewX(-60deg);
-moz-transform: skewX(-60deg);
-webkit-transform: skewX(-60deg);
-ms-transform: skewX(-60deg);
transform: skewX(-60deg);
border: solid 5px #3463EB;
}
100% {
-o-transform: skewX(-80deg);
-moz-transform: skewX(-80deg);
-webkit-transform: skewX(-80deg);
-ms-transform: skewX(-80deg);
transform: skewX(-80deg);
border: solid 5px #3463EB;
}
}
@-o-keyframes in {
0% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
40% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
41% {
width: 0px;
height: 0px;
background: #3A60DB;
}
50% {
width: 144px;
height: 144px;
background: #3A60DB;
}
90% {
width: 0px;
height: 0px;
background: #3A60DB;
}
91% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
100% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
}
@-moz-keyframes in {
0% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
40% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
41% {
width: 0px;
height: 0px;
background: #3A60DB;
}
50% {
width: 144px;
height: 144px;
background: #3A60DB;
}
90% {
width: 0px;
height: 0px;
background: #3A60DB;
}
91% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
100% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
}
@-webkit-keyframes in {
0% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
40% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
41% {
width: 0px;
height: 0px;
background: #3A60DB;
}
50% {
width: 144px;
height: 144px;
background: #3A60DB;
}
90% {
width: 0px;
height: 0px;
background: #3A60DB;
}
91% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
100% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
}
@keyframes in {
0% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
40% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
41% {
width: 0px;
height: 0px;
background: #3A60DB;
}
50% {
width: 144px;
height: 144px;
background: #3A60DB;
}
90% {
width: 0px;
height: 0px;
background: #3A60DB;
}
91% {
width: 0px;
height: 0px;
background: #FFFFFF;
}
100% {
width: 144px;
height: 144px;
background: #FFFFFF;
}
}
@-o-keyframes out1 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@-moz-keyframes out1 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@-webkit-keyframes out1 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@keyframes out1 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@-o-keyframes out2 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 0px;
height: 0px;
}
60% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@-moz-keyframes out2 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 0px;
height: 0px;
}
60% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@-webkit-keyframes out2 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 0px;
height: 0px;
}
60% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
@keyframes out2 {
0% {
width: 0px;
height: 0px;
}
30% {
width: 0px;
height: 0px;
}
60% {
width: 120vw;
height: 120vw;
}
100% {
width: 120vw;
height: 120vw;
}
}
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
我如何在其中心位置添加位置图标，如下图所示：
或者是他们在android中获得这种动画的任何其他方式
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？