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. 6月25日 Django 分页 cookie、session

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  2. ubuntu 16.04 设置root用户初始密码

    安装ubuntu成功后,都是普通用户权限,并没有最高root权限,如果需要使用root权限的时候,通常都会在命令前面加上 sudo .有的时候感觉很麻烦- 我们一般使用su命令来直接切换到root用户 ...

  3. [转载]详解ssh端口转发(二)

    关于使用ssh portforwarding来进行FQ的操作,网络上已经有很多很好的文章,我在这里只是画两个图解释一下. 首先要记住一件事情就是: SSH 端口转发自然需要 SSH 连接,而 SSH ...

  4. ES6-ES12部分简单知识点总结,希望对大家有用~

    ES6-ES12简单知识点总结 1.ES6相关知识点 1.1.对象字面量的增强 ES6中对对象字面量的写法进行了增强,主要包含以下三个方面的增强: 属性的简写:当给对象设置属性时,如果希望变量名和属性 ...

  5. VT 入门番外篇——初识 VT

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

  6. z-index原理及适用范围

    z-index原理及适用范围 原理 z-index这个属性控制着元素在z轴上的表现形式,堆叠顺序是当前元素位于z轴上的值,数值越大说明元素的堆叠1顺序越高,越靠近屏幕. 适用范围 <div cl ...

  7. nginx反向代理失败,又是 fastdfs 的锅

    fdfs问题记录 [root@hostcad logs]# systemctl status fdfs_trackerd.service ● fdfs_trackerd.service - LSB: ...

  8. 机器学习 machine learn

    机器学习 机器学习 概述 什么是机器学习 机器学习是一门能够让编程计算机从数据中学习的计算机科学.一个计算机程序在完成任务T之后,获得经验E,其表现效果为P,如果任务T的性能表现,也就是用以衡量的P, ...

  9. 5V转10.5V原理图

  10. HTTP权威指南:第二章

    URL概览 前面提到,URL资源是HTTP协议所使用的寻找资源位置的定位符.分为三个部分,主要的结构是: 方案://服务器/路径 这种结构使得网络上的每一个资源都只有唯一的命名方法,从而使得浏览器可以 ...