CSS 楼梯弹弹球
发布时间:2024年01月24日
<template>
<view class="loader"></view>
</template>
<script>
</script>
<style>
body {
background-color: #212121;
/* 设置背景颜色为 #212121 */
}
.loader {
position: relative;
/* 设置定位为相对定位 */
width: 120px;
/* 设置宽度为 120px */
height: 90px;
/* 设置高度为 90px */
margin: 0 auto;
/* 设置左右外边距为自动 */
margin-top: 250px;
/* 设置上外边距为 250px */
}
/* 小球 */
.loader:before {
content: "";
/* 设置内容为空 */
position: absolute;
/* 设置定位为绝对定位 */
bottom: 30px;
/* 设置底部位置为 30px */
left: 50px;
/* 设置左侧位置为 50px */
height: 30px;
/* 设置高度为 30px */
width: 30px;
/* 设置宽度为 30px */
border-radius: 50%;
/* 设置边框半径为 50% */
background: #2a9d8f;
/* 设置背景颜色为 #2a9d8f */
animation: loading-bounce 0.5s ease-in-out infinite alternate;
/* 设置动画为 loading-bounce,时长为 0.5s
文章来源:https://blog.csdn.net/weixin_54226053/article/details/135832558
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:chenni525@qq.com进行投诉反馈,一经查实,立即删除!