css实现支持亮色与暗色切换的下滑文字菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现支持亮色与暗色切换的下滑文字菜单效果代码
代码标签: css 支持 亮色 暗色 切换 下滑 文字 菜单
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Oswald"); body { background: #000; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; transition: 0.5s all ease; } .theme-switch { color: #FFF; width: 70px; height: 30px; background: #FF1EAD; border-radius: 50px; position: relative; } .theme-switch .switch { background: white; width: 24px; height: 24px; background: #FFF; border-radius: 100%; position: absolute; top: 3px; left: 4px; transition: 0.5s all ease; } .light-theme { background: #FFF; } .light-theme .theme-switch { background: #000; } .light-theme .theme-switch .switch { transform: translateX(37px); } .light-theme a { color: #000; } .navigation { display: flex; justify-content: center; } ul { display: flex; list-style-type: none; } ul a { margin: 10px; position: relative; color: #FFF; font-family: "Oswald", sans-serif; font-size: 20px; text-transform: uppercase; text-decoration: n.........完整代码请登录后点击上方下载按钮下载查看
网友评论0