<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css小样式</title>

</head>

<style type="text/css">

body{

  margin: 0px;

  padding:0px;

  background:pink;

}

.mo-tab-default{

  display: block;

  width: 33.333%;

  height: 30px;

  line-height: 30px;

  text-align: center;

  position: relative;

  cursor:context-menu;

  float: left;

  overflow: hidden;

}

.mo-tab-default:before{

  position: absolute;

  content: "";

  background:steelblue;

  left: -100%;

  bottom: 0px;

  height: 1px;

  width: 50%;

  transition: all 0.5s ease-out;

  -webkit-transition: all 0.5s ease-out;

}

.mo-tab-default:after{说

  position: absolute;

  content: "";

  background:steelblue;

  right: -100%;

  bottom: 0px;

  height: 1px;

  width: 50%;

  transition: all 0.5s ease-out;

  -webkit-transition: all 0.5s ease-out;

}

.mo-tab-default:hover::before{

  left: 0;

}

.mo-tab-default:hover::after{

  right: 0;

}

</style>

<body>

<a class="mo-tab-default">11</a>

<a class="mo-tab-default">22</a>

<a class="mo-tab-default">33</a>

</body>

</html>

　　

css中transition的使用以及:before:after的使用（小样式）的更多相关文章

  1. css 中 transition 需要注意的问题

    cubic-bezier 是 transition-timing-function 的值的一种. 四个参数的关系式如下(t 代表时间,取值范围 [0, 1]):P0(1-t)3 + 3P1t(1-t) ...

  2. css中所有的选择器

    认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式:    } 标签选择器 p{ font-size:12px:  line-height:1.6em;     ...

  3. CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  4. css3中transition和display的坑

    不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常 给个栗子: <!DOCTYPE html> <html> < ...

  5. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  6. CSS之transition（动画）

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...

  7. Css中的变形及过渡动画

    在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...

  8. CSS中的剪裁和遮罩

    剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...

  9. css中的注意项，可能会帮助到大家哦！

    CSS样式层叠表 1.link与@import的区别(5点) (1).link为XHTML的标签,可以引进CSS样式表,除了引进CSS文件还可以引进其他的文件如.js或.rss文件;@import为C ...

随机推荐

  1. HBase shell

    进入命令行 ./hbase shell 查看HBase shell帮助 help 查看命令帮助 直接输入命令回撤 创建命名空间 create_namespace 'ns1' 查看命名空间 list_n ...

  2. ORA-28056:Writing audit records to Windows EventLog failed的问题

    右键“我的电脑”--‘管理’--事件查看器--点击左边的日志(应用程序日志.安全日志.系统日志),右击某个项目,选择‘清除所有事件'即可删除.

  3. 解决download.msdn.microsoft.com无法正确解析而无法下载的问题

    不知何时,微软 MSDN 订阅软件下载服务IP解析有问题,总是在点击“下载”按钮之后无法打开. 想必又跟“国情”有关,我是使用联通宽带,没测试过电信的. 我是可以通过指定hosts entry来解决: ...

  4. tomcat 6.0.44 “has failed to stop it. This is very likely to create a memory leak” 问题调查

    1. 问题起因 我们项目中缓存模块某个实现采用了ehcache(2.4.3),当项目部署到tomcat中后,对tomcat做停止服务操作(点击eclipse的console红色的停止按钮,奇怪的是有小 ...

  5. c#两个数据库之间进行表拷贝

  6. 转：python webdriver API 之定位 frame 中的对象

    在 web 应用中经常会出现 frame 嵌套的应用,假设页面上有 A.B 两个 frame,其中 B 在 A 内,那么定位 B 中的内容则需要先到 A,然后再到 B.switch_to_frame  ...

  7. linux环境变量与本地变量

    两者不同的是. 环境变量可以在shell的子进程中使用, 而本地变量不同. 每当连接上服务器时,服务器就会通过帐号密码运行一个SHELL,我们所做的工作都在这个SHELL上,特殊方法除外(如,守护进程 ...

  8. CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  9. ASP.NET MVC (一)

    工作清闲好一段时间了,趁这段时间弄了弄PHP,做个了简单的MVC网页.玩了玩Android,弄了个拨号器,发短信的,嘿嘿,最满意的还是两天弄了个数独游戏.不务正业一个多月了,也该磨磨刀,接下来一段时间 ...

  10. zw版【转发·台湾nvp系列Delphi例程】HALCON color_fuses1

    zw版[转发·台湾nvp系列Delphi例程]HALCON color_fuses1 procedure TForm1.Button1Click(Sender: TObject);var w, h : ...