如何仅用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公司官网主题在众多的WordPress企业官网主题中,追格公司推出了多款关于WordPress企业官网主题作品。我们之前已经分享过一些关于追格的企业官网主题,包括收费和免费版本,这些主题都因其独特的设计和出色的功能而深受用户喜爱。
-
追格企业官网主题(多语版)大动作:在线购买功能雏形初现追格企业官网主题(多语版)悄然推出了用户中心功能,尽管目前仅涵盖基础功能如资料编辑和密码修改,但其未来潜力已引发关注。令人惊喜的是,短短数日之后,我们又看到了购买功能的雏形,虽然它尚处于开发阶段,但其潜力已足够吸引眼球。
-
WordPress外贸建站:追格企业官网多语版购买功能,开启外贸电商新纪元WordPress外贸建站解决方案在电子商务领域展现出了强大的潜力,特别是其内置的电子商务功能,满足了外贸独立站对于产品分类、结算等核心功能的迫切需求。
-
担心WordPress REST API暴露用户名?这里有一个简单的屏蔽方法!在深入探讨WordPress REST API的利用与功能时,追格小编虽已分享了多篇相关内容,但我们依然理解,部分用户可能仍对网站用户名暴露的问题心存顾虑,尤其是当他们并不需要使用到如古腾堡编辑器或小程序等特定功能时。针对这一关切,今天小编特地为大家介绍一种有效的屏蔽方法。
-
WordPress企业主题近期,国内WordPress社群似乎进入了一段相对宁静的时期,无论是活跃的用户群体还是勤勉的开发者们,都呈现出一种沉稳的态势。在这样一个略显静谧的时刻,追格团队选择利用这段时间沉潜下来,专心致志地精进自身的产品,力求在每一个细节上都追求完善,以备在不久的将来,以更加超凡脱俗的面貌回馈给广大用户与开发者。
-
追格小程序V2.5.0更新发布追格小程序V2.5.0版本的更新,我们没给大家添太多新花样,主要是把“内功”练好了。我们认真检查了上一版里那些组件之间的小摩擦,一点点地调整、优化,搞定了超过40多个小地方。这样一来,小程序跑起来就更顺畅了,大家用起来也会感觉更舒服、更顺手。这次虽然没大张旗鼓,但确实是让产品站得更稳、更可靠了。
暂无评论,抢个沙发...