Vue中使用Openlayer实现加载动画效果 Vue中使用Openlayer实现加载动画

注意：实现动画时不能有scoped！！！！
通过gif

文章图片

.test {span {display: inline-block; width: 80px; height: 80px; border-radius: 50%; background: url("https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/gif.gif")no-repeat; background-size: 80px 80px; }}

通过关键帧@keyframes

文章图片

.test {.css_animation {height: 50px; width: 50px; border-radius: 50%; background: rgba(255, 0, 0, 0.9); box-shadow: inset 0 0 8px red; transform: scale(0); animation: myfirst 3s; animation-iteration-count: infinite; //无限循环}@keyframes myfirst {to {transform: scale(2); background: rgba(0, 0, 0, 0); box-shadow: inset 0 0 50px rgba(255, 0, 0, 0); }}}

既可加载动画，又可获取动画所在要素点的属性

文章图片

注意：该代码存在问题。目前只能要么点击获取属性，要么展示动画，而不能同时存在，还有待优化！

.test {}.test {.css_animation {height: 50px; width: 50px; border-radius: 50%; background: rgba(255, 0, 0, 0.9); box-shadow: inset 0 0 8px red; transform: scale(0); animation: myfirst 3s; animation-iteration-count: infinite; //无限循环}@keyframes myfirst {to {transform: scale(2); background: rgba(0, 0, 0, 0); box-shadow: inset 0 0 50px rgba(255, 0, 0, 0); }}}

【Vue中使用Openlayer实现加载动画效果】到此这篇关于Vue+Openlayer加载动画的文章就介绍到这了,更多相关Vue Openlayer加载动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！