如何仅用css实现下图的播放按钮效果?不妨看看追格小编是如何实现的。
首先,将在需要增加播放器的图片外容器view添加属性
position:relative;
然后再<image>标签同级增加播放器结构
<view class="zhuige-play"></view>
然后添加播放器相关css
.zhuige-play {
position: absolute;
z-index: 12;
height: 72rpx;
width: 72rpx;
border-radius: 50%;
border: 4rpx solid #FFFFFF;
top: 50%;
left: 50%;
margin-left: -36rpx;
margin-top: -36rpx;
background: rgba(255, 255, 255, .3);
}
.zhuige-play::after {
content: ' ';
width: 0;
height: 0;
border-left: 26rpx solid #FFFFFF;
border-top: 18rpx solid transparent;
border-bottom: 18rpx solid transparent;
position: absolute;
top: 18rpx;
left: 28rpx;
}
即可实现图片上的播放器效果 如果要把播放器里的实心按钮改为线条,修改如下
.zhuige-play::after {
content: ' ';
height: 22rpx;
width: 22rpx;
transform: rotate(45deg);
border-right: 4px solid #FFFFFF;
border-top: 4px solid #FFFFFF;
position: absolute;
top: 22rpx;
left: 20rpx;
}
-
WordPress商城小程序模板近期小编在追格小程序发起了一个投票,问大家关注什么样类似的商城小程序,几天时间又40多人参与投票,截止发稿有49%的同学投在基于WordPress开发的商城上面
-
追格小程序 私信等功能更新发布追格小程序是一个积木式小程序搭建框架,基于Uniapp+WordPress开发的微信小程序,框架免费开源,代码不加密且支持二开,安装追格相应扩展模块(模块支持按需购买),简单配置即可快速搭建不限于圈子社区、知识付费、活动报名、资讯等类型小程序。
-
追格知识付费小程序 新增音频播放时切换页面可继续播放功能追格知识付费小程序,基于追格小程序搭建,用到插件模块如:付费课程专栏、VIP会员、积分体系、追格块及追格小程序基础框架。助力中小企业主实现内容、粉丝与资源变现,支持图文/音视频课程、支持付费阅读/积分阅读/试阅读。无需开发,快速搭建知识付费小程序坐收红利。
-
追格小站点评主题“H5资讯列表”标题调整为两行或多行的方法追格小站点评主题资讯列表的标题在H5模式下默认为一行,超出隐藏,我们可以通过调整css,将WordPress主题小站点评资讯列表标题调整为两行显示。
-
WordPress小程序开发教程WordPress和小程序开发教程网上挺多的,追格小编简单分享几个。
-
追格网址导航主题源码下载追格小站点评主题是一个互联网创新产品分享与点评导航主题。若不太理解,你也可以理解为是一个网址导航就好,哈哈哈。
暂无评论,抢个沙发...