css
文章平均质量分 77
白抹灰
这个作者很懒,什么都没留下…
展开
-
css实现只旋转边框,内含文字不转动
在按设计稿搭建项目页面时,碰到了一处内容呈现方式如下图所示的元素。文字在菱形边框内居中摆放的布局看似简单,却让我陷入了长时间的束手无策。如果只是通过transform将一个div旋转45deg,其内的文字也会跟着转动,这显然不符合要求。双重旋转相抵消在尝试一通无果后,我开始在网上查找资料,借此发现了一个巧妙的方法:在div里套一个span文本。将div进行旋转45deg,同时将span设置成行内块元素后再逆向旋转45deg,这样就能使得文字水平排列。<!DOCTYPE html><原创 2021-06-18 21:57:50 · 6520 阅读 · 0 评论 -
css实现汉堡菜单按钮
汉堡菜单按钮:当用户点击菜单按钮,在弹出导航栏的同时,汉堡形状的按钮也会动画渐变成叉号。再次对其点击时,导航栏收回,按钮也恢复原样。关于汉堡菜单,虽然 GitHub 上已经有相关的库 hamburgers,但因为我使用的 nuxt 框架采用的是rem布局,对于px到rem的转换让我实在头疼。再三思量之下,还是决定自己手动模仿一个出来。具体实现效果如下动图。一、设计思路至于将三横杠动态渐变成叉号的具体过程,每个人都有自己的奇思妙想,不必拘泥。这里简要说明上述动画的设计思路:将顶部横杠顺时针旋转90原创 2021-06-18 21:47:03 · 2462 阅读 · 0 评论