摘要:今天实现一个用一个来实现关闭按钮图标,其中主要用到的技巧伪元素的同时让该图标居中,此次是用了弹性布局。样式如下主要用到利用的伪元素和的转换角度效果图
今天实现一个 用一个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...
摘要:本文主要针对小程序无聊广场的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对小程序中的动画音频等踩坑做出解决方案。 背景 一个交互不复杂,对刷新频率和动画效果要求不高的小游戏,不需要使用canvas主导的解决方案,使用dom操作一样可以完成。节省了cocos creater的学习成本,值得一试。本文主要针对小程序无聊广场的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对...
阅读 4022·2023-04-25 20:00
阅读 3371·2021-09-22 15:09
阅读 717·2021-08-25 09:40
阅读 3734·2021-07-26 23:38
阅读 2363·2019-08-30 15:53
阅读 1249·2019-08-30 13:46
阅读 2928·2019-08-29 16:44
阅读 2191·2019-08-29 15:32