资讯专栏INFORMATION COLUMN

用一个div画出关闭图标

neuSnail / 3421人阅读

摘要:今天实现一个用一个来实现关闭按钮图标,其中主要用到的技巧伪元素的同时让该图标居中,此次是用了弹性布局。样式如下主要用到利用的伪元素和的转换角度效果图

今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。
css样式如下:



效果图:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111856.html

相关文章

  • 一个div画出关闭图标

    摘要:今天实现一个用一个来实现关闭按钮图标,其中主要用到的技巧伪元素的同时让该图标居中,此次是用了弹性布局。样式如下主要用到利用的伪元素和的转换角度效果图 今天实现一个 用一个div来实现关闭按钮图标,其中主要用到的技巧:css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中,此次是用了flex弹性布局。css样式如下: html,bod...

    lastSeries 评论0 收藏0
  • 使CSS画个图标

    摘要:具体样式如下绘制图标三当我们能深入理解一些属性的时候,实现一些复杂的图标完全不是难事无非就是将简单的图形组合起来。 CSS绘制图标(一) 我们使用单个标签绘制一个文件的图标。HTML内容很简单,就一句话。 右上角折叠三角采用after伪元素实现,左下角文字使用before伪元素实现。主体部分当然还是div#doc。 具体CSS样式如下: #doc { position: ...

    沈建明 评论0 收藏0
  • FE.WX-小程序“无聊广场”游戏前端性能优化与踩坑攻略

    摘要:本文主要针对小程序无聊广场的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对小程序中的动画音频等踩坑做出解决方案。 背景 一个交互不复杂,对刷新频率和动画效果要求不高的小游戏,不需要使用canvas主导的解决方案,使用dom操作一样可以完成。节省了cocos creater的学习成本,值得一试。本文主要针对小程序无聊广场的前端开发内容做总结,记录常见的一些老生常谈的进阶手法,对...

    qpal 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<