摘要:今天实现一个用一个来实现关闭按钮图标,其中主要用到的技巧伪元素的同时让该图标居中,此次是用了弹性布局。样式如下主要用到利用的伪元素和的转换角度效果图
今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。
css样式如下:
html,body{ width:100%; height:100%; overflow: hidden; display: flex; justify-content:center; align-items:center; } .closed{ width:60px; height:60px; border:1px solid green; border-radius: 50%; position: relative; } .closed:before{ content: ”; display: block; position: absolute; width:90%; height:1px; background: #666; transform:rotate(45deg); -webkit-transform:rotate(45deg); top:30px; left:5%; } .closed:after{ content: ”; display: block; position: absolute; width:90%; height:1px; background: #666; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); top:30px; left:5%; }
效果图:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82355.html
摘要:今天实现一个用一个来实现关闭按钮图标,其中主要用到的技巧伪元素的同时让该图标居中,此次是用了弹性布局。样式如下主要用到利用的伪元素和的转换角度效果图 今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。css样式如下: html,bod...
摘要:今天实现一个用一个来实现关闭按钮图标,其中主要用到的技巧伪元素的同时让该图标居中,此次是用了弹性布局。样式如下主要用到利用的伪元素和的转换角度效果图 今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。css样式如下: html,bod...
摘要:前言工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。 前言 工业物联网在中国的发展如火如荼,网络基础设施建设,以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况:一方面是大型通讯、IT企业的布局;一方面是传统工业软件和工业网络企业自发地延伸,由产品提供商发展为方案供应商。什...
摘要:本文主要针对小程序无聊广场的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对小程序中的动画音频等踩坑做出解决方案。 背景 一个交互不复杂,对刷新频率和动画效果要求不高的小游戏,不需要使用canvas主导的解决方案,使用dom操作一样可以完成。节省了cocos creater的学习成本,值得一试。本文主要针对小程序无聊广场的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对...
阅读 3219·2023-04-25 20:00
阅读 2920·2021-09-22 15:09
阅读 2472·2021-09-14 17:57
阅读 346·2021-08-25 09:40
阅读 3285·2021-07-26 23:38
阅读 2096·2019-08-30 15:53
阅读 949·2019-08-30 13:46
阅读 2693·2019-08-29 16:44