1. html

<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Serices</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

2. css

.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
/* 控制光标的类型 */
cursor: pointer;
width: 60px;
height: 60px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary--color);
display: flex;
justify-content: center;
align-content: center;
}
/* hamburger line */
.menu-wrap .hamburger > div {
position: relative;
top: 15px;
flex: none;
width: 100%;
height: 2px;
background: #fff;
transition: all 0.4s ease;
} /* hamburger liner -- top & bottom */
.menu-wrap .hamburger > div:before,
.menu-wrap .hamburger > div:after{
content: '';
position: absolute;
z-index: 1;
background: #fff;
width: 100%;
height: 2px;
top: -10px;
} .menu-wrap .hamburger > div:after {
top: 10px;
} /* toggler animation */ .menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* turn linex into */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after{
top: 0px;
transform: rotate(90deg);
}
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}

3 . 重点

:checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。

进阶版css点击按钮动画的更多相关文章

  1. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  2. css点击按钮,依次动态展开面板动画效果

    <a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...

  3. 进阶版css的点滴

    -moz-:firefox: -webkit- Safari 和 Chrome

  4. CSS3和js炫酷点击按钮3D翻转动画特效

    简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 ...

  5. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  6. js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

    js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言 一.总结 一句话总结:实现按下组合键提交留言是通过给input加keydown事件,判断按键的键码来实现的. 1.如 ...

  7. css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版

    1.html: <!DOCTYPE html><html><head lang="en">    <meta charset=" ...

  8. 【demo练习三】:图片水平滚动、点击按钮变更图片动画

    要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...

  9. 通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)

    回到顶部实例一 效果:默认隐藏导航栏,当滚动条滚到超过300px后导航栏和按钮出现,点击回到顶部按钮回到顶部,并隐藏导航栏和按钮(导航栏和按钮都是固定定位) <!doctype html> ...

随机推荐

  1. 基于long pull实现简易的消息系统参考

    我们都用过消息中间件,它的作用自不必多说.但对于消费者却一直有一些权衡,就是使用push,还是pull模式的问题,这当然是各有优劣.当然,这并不是本文想讨论的问题.我们想在不使用长连接的情意下,如何实 ...

  2. 痞子衡嵌入式:IAR内部C-SPY调试组件配套宏文件(.mac)用法介绍

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR内部C-SPY调试组件配套宏文件(.mac)用法. 痞子衡之前写过一篇 <JLink Script文件基础及其在IAR下调用 ...

  3. SQL获取当前时间(日期)

    --获取当前日期(如:yyyymmdd)select CONVERT (nvarchar(12),GETDATE(),112) --获取当前日期(如:yyyymmdd hh:MM:ss)select ...

  4. Python库国内镜像

    中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ http://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣 http://py ...

  5. HashMap集合类 5种最佳遍历方式

    1. 使用 Iterator 遍历 HashMap EntrySet 2. 使用 Iterator 遍历 HashMap KeySet 3. 使用 For-each 循环迭代 HashMap 4. 使 ...

  6. 羽夏看Win系统内核——消息机制篇

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...

  7. 超硬核解析!Apache Hudi灵活的Payload机制

    Apache Hudi 的Payload是一种可扩展的数据处理机制,通过不同的Payload我们可以实现复杂场景的定制化数据写入方式,大大增加了数据处理的灵活性.Hudi Payload在写入和读取H ...

  8. Python form...import...和import的区别(自己理解的)

    Python有两种导入包和模块的方式,区别如下 form...import... import 相对导包 导入不同包子模块 可以导入模块所需变量/函数/类   init文件的__all__特殊变量(模 ...

  9. 网络协议之:socket协议详解之Socket和Stream Socket

    目录 简介 Socket是什么 Stream Socket 使用socat创建一个TCP服务器 使用ss检查TCP连接 使用nc连接socket 总结 简介 不管是在普通的网络编程中还是在netty中 ...

  10. 集合流之“将List<Integer>转为String并用逗号分割”

    1.使用[流+Collectors]转换 import java.util.ArrayList; import java.util.List; import java.util.stream.Coll ...