C3制作导航栏分割线及立体风格
//首先写一个导航栏样式
.nav{
width:560px;
height: 50px;
font:bold 0/50px Arial;
text-align:center;
margin:40px auto 0;
background: #f65f57;
border-radius:10px;/*制作圆*/
color:#F16153;
box-shadow:0px 5px 0px #B64B41;
}
//导航栏转动样式
.nav a{
display: inline-block;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;//转动速度
}
.nav a:hover{
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
-ms-transform:rotate(20deg);
transform:rotate(20deg);//转动角度
}
.nav li{
position:relative;
display:inline-block;
padding:0 16px;
font-size: 13px;
text-shadow:1px 2px 4px rgba(0,0,0,.5);//文字阴影
list-style: none outside none;
}
/*使用伪元素制作导航列表项分隔线*/
.nav li::before,.nav li::after{
content:"";
position:absolute;
top:14px;
height: 25px;
width: 1px;
}
.nav li::after{
right: 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0));
}
.nav li::before{
left: 0;
background: -moz-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -webkit-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -o-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: -ms-linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
background: linear-gradient(top, #ff625a, #9e3e3a 50%, #ff625a);
}
/*删除第一项和最后一项导航分隔线*/
.nav li:last-child:after{
width:0px;
height:0px;
}
.nav a,
.nav a:hover{
color:#fff;
text-decoration: none;
}
C3制作导航栏分割线及立体风格的更多相关文章
- css3制作导航栏
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 第8天:CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏
初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...
- css制作导航栏的上下三角
1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...
- ps制作导航条 分割线技巧
1 用矩形工具画一个像素的矩形(注意不是路径) 2给矩形添加蒙版,用渐变工具对其进行渐变,达到两头渐隐藏的效果. 制作按钮技巧 用矩形工具画出矩形 然后给矩形添加 内发光 渐变叠加 光泽 描边等操作 ...
- flutter 主页面底部导航栏实现以及主题风格设置
import 'package:flutter/material.dart'; import 'package:flutter_app/bottom_navigation_widget.dart'; ...
- 用ul 来制作导航栏的几个要点
1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...
- CSS制作导航栏
最终效果: 代码: <!DOCTYPE html> <html> <head> <title>#练习册二</title> <style ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
随机推荐
- java GUI (课堂笔记)
关于java GUI Swing组件: JFrame 窗口组件 JLabel 标签 JButton 按钮组件 JTextField 单行文本框 系统控件(JDK自带) 自定义控件(模仿系统控件): 继 ...
- Iterator invalidation(迭代器失效)
一.vector 所有读操作.swap.std::swap:都不会引起迭代器失效... clear.operator=.assign:都会引起全部变量迭代器失效 reserve.shrink_to_f ...
- 如何修改"DEDECMS 提示信息!"方法!
dedecms程序使用过程中,经常有一些跳转提示信息会出现“DEDECMS 提示信息!”这几个字样. 很多朋友都想对他进行修改,改为自己网站的提示信息,其实方法也是很简单的,方法如下: 用编辑器打开i ...
- asp net core 跨平台初体验
标: 在 ubuntu 16.04 上部署一个 asp.net core 站点,打开网站后显示一段文字. 安装 net core 运行环境:ubuntu 16.04 LTS 1.添加 apt 源 ...
- mac 安装mysqldb组件包及mac中安装mysql-python遇到的问题
错误1:mysql_config not found 问题描述:在执行sudo pip install mysql-python安装时报错误:EnvironmentError: mysql_confi ...
- Ext表格分页
pageSize:配置表格或者数据的数量, autoLoad: { start: 0, limit: 2 }:自动加载时候的参数, proxy中:params: {start: 0,limit: 2} ...
- python 最佳实践与资源汇总
python 最佳实践 (部分) 一. 结构化工程 文件 功能 README.rst readme LICENSE 许可证 setup.py 打包和发布管理 requirements.txt 开发依赖 ...
- window对象screen、history
Window 对象属性 http://www.runoob.com/jsref/obj-window.html
- JavaScript浮点运算的问题 (乘法)
<script type="text/javascript"> var get_b_val_final=accMul(get_b_val,100)+"%&qu ...
- 修改phpstorm的字体样式和大小
默认的字体实在太小,也太丑,必须修改下.就是强迫症,没错.下面截图配文字说明下 方法/步骤 首先进入设置,不解释 先设置软件界面上的字体.进入设置之后,选择(外观)Appearance.之后软 ...