css实现全屏菜单点击弹出效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现全屏菜单点击弹出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags --> <meta charset="UTF-8"> <meta name="description" content="Raana - Semi Transparent Toggle Menu"> <meta name="keywords" content="menu,responsive menu,navbar menu,navigation menu,hamburger menu,dropdown menu,toggle menu,transparent,glassmorphism"> <meta name="author" content="Epic_Theme"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* ------------------------------------------------------------------- * Plugin Name : Raana - Semi Transparent Toggle Menu * Author Name : Epic_Theme * Author URI : https://codecanyon.net/user/epic_theme/ * Created Date : 12 January 2021 * Version : 1.0 * File Name : style.css ------------------------------------------------------------------- */ /* ---------------------------------------------------------------- */ /* 01.Toggle Menu /* ---------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } #toggleMenu { position: relative; width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: url('//repo.bfw.wiki/bfwrepo/image/6130b895b7e70.png') no-repeat center / cover; } #toggleMenu nav { position: absolute; top: 0; left: 0; width: 100%; padding: 40px 100px; z-index: 100; display: flex; justify-content: space-between; align-items: center; } #toggleMenu nav .logo { position: relative; font-size: 2em; color: #fff; text-transform: uppercase; font-weight: 700; z-index: 15; text-decoration: none; text-shadow: 2px 2px 0 rgba(0,0,0,0.1); transition: 0.5s; } #toggleMenu nav .navigation { position: absolute; top: 0; left: 0; min-height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; } #toggleMenu nav .navigation li { list-style: none; text-align: center; margin: 15px 0; opacity: 0; visibility: hidden; transition: 0.5s; transform: translateX(200px); } #toggleMenu.active nav .navigation li { opacity: 1; visibility: visible; transform: translateX(0px); } #toggleMenu nav .navigation li:nth-child(1) { transition-delay: 0.2s; } #toggleMenu nav .navigation li:nth-child(2) { transition-delay: 0.3s; } #toggleMenu nav .navigation li:nth-child(3) { transition-delay: 0.4s; } #toggleMenu nav .navigation li:nth-child(4) { transition-delay: 0.5s; } #toggleMenu nav .navigation li a { color: #111; font-size: 1.5em; letter-spacing: 4px; text-decoration: none; font-weight: 300; text-transform: uppercase; background: #fff; padding: 4px 10px; display: inline-block; } #toggleMenu nav .navigation li a:hover { background: #111; color: #fff; letter-spacing: 10px; text-transform: lowercase; } #toggleMenu nav .toggle { position: relative; width: 40px; height: 40px; background-image: url('//repo.bfw.wiki/bfwrepo/icon/5d83522311a59.png'); background-position: center; background-repeat: no-repeat; background-size: 30px; cursor: pointer; display: flex; justify-content: center; align-items: center; } #toggleMenu nav .toggle.active { background-image: url('//repo.bfw.wiki/bfwrepo/image/609f09b144431.png'); background-position: center; background-repeat: no-repeat; background-size: 25px; } #toggleMenu nav .toggle::before { content: 'Menu'; position: absolute; right: 45px; text-transform: uppercase; color: #fff; letter-spacing: 2px; font-size: 14px; padding: 2px 5px; background: #fff; color: #111; } #toggleMenu nav .toggle.active::before { content: 'Close'; } #toggleMenu .glass { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: rgba(255,255,255,0.4); backdrop-filter: blur(15px); z-index: 1; box-shadow: 10px 0 15px rgba(0,0,0,0.1); transition: 0.5s; transition-delay: 1s; } #toggleMenu.active .glass { width: 100%; background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0