效果展示

Demo代码

wxml

<view class="circle"></view>

wxss

page{height: 100vh;display: flex;justify-content: center;align-items: center;background: #251f44;
}
.circle {width: 50px;height: 50px;border-radius: 100%;background: #e04747;position: relative;cursor: pointer;
}
.circle::before {content: "";position: absolute;border-radius: 100%;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0) rotate(15deg);height: 15px;width: 75px;border: 3px solid white;border-top: 0;
}

微信小程序--红色星球相关推荐

微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面 wxml  <view class= ...
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想嵌套百度可以这样 <view ><web-view src="https://www.baidu.com/s?ie= ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您, 个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释, ...
微信小程序根据后台返回值设置自己想要的结果
今天做微信小程序充值列表其中微信或者支付后台返回的是1和2 , 那么就需要判断返回值是否为1或者是2然后在改变简单的就是在xml中判断下就行了 <view class='recharge_t ...
微信小程序import和include
import 和include 是微信小程序提供的2中引用方式 import 一般结合模板template使用 import import可以在该文件中使用目标文件定义的template,如: 在 i ...
微信小程序扫描二维码
最近官方地址看到这句话我想到了,微信小程序是调用微信的扫一扫那么扫一扫的界面就可以不用再写了, 想到android这边都是用图片或者手动画,突然感觉心情特别的好, 里面的参数自己看吧,看到最下面的 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）
效果图实现原理采用高德地图微信小程序开发API(getWeather),如果 city 属性的值为空(或者没有city属性),默认返回定位位置的天气数据:如果 city 不为空,则返回 city ...

微信小程序--红色星球

效果展示

Demo代码

wxml

wxss

微信小程序--红色星球相关推荐

最新文章

热门文章