css样式中的after,css中transition的使用以及:before:after的使用（小样式）

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;

}

11

22

33

css 中 transition 需要注意的问题

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

css中所有的选择器

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

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

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

css3中transition和display的坑

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

1&colon;CSS中一些&commat;规则的用法小结 2&colon; &commat;media用法详解

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

CSS之transition(动画)

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

Css中的变形及过渡动画

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

CSS中的剪裁和遮罩

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

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

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

随机推荐

HTML 基础篇

本章内容: 简介 HTML定义 标签定义和属性 HTML5基本结构 HTML5字符集

标签 ( ...

Windows平台Tomcat服务搭建

1. 下载  JDK下载 下载地址 Tomcat下载 下载地址 2. 安装配置  JDK安装配置 安装过程不再赘述. 配置: 环境变量:  JAVA_HOME,变量值为:C:\JDK(具体请根据JDK ...

Android 多个include标签的监听事件处理

include标签的作用是为了xml文件代码的模块化,详细不再多提.主要是说说include标签的监听. 网上也有很多例子,不过大多是只写了一个include标签的监听,如果需要实现多个include ...

Ubuntu 15&period;10下droidbox安装使用

DroidBox是一个动态分析Android代码的的分析工具.其目前的安装环境为:Linux/Unix/MacOSX 下面是安装步骤 一. 安装Android SDK 并添加环境变量 export P ...

SharePoint 2013 一些小技巧

一.添加“SharePoint 2013 切换用户”标签 相比SharePoint 2010,SharePoint2013版本去掉了切换用户登陆的功能(如下图),其实这个可以通过改welcome.as ...

tomcat下部署润乾报表

因为项目需要,需要在项目中配置润乾报表,之前一直是用的jboss服务器,此处调整为tomcat时出错,然后各种找错,找答案,最后终于好了,然后总结一下. 首先在apache-tomcat-6.0.43 ...

node判断文件目录是否存在

'use strict'; //这是一个简单的应用 var path = require('path'); var fs = require("fs") ; global.l = ...

CRM SQL 共享

共四步 ,) PRIMARY KEY CLUSTERED, objectid UNIQUEIDENTIFIER NOT NULL, objecttype INT NOT NULL) ,,'883D4 ...

使用BeetleX的TcpBenchmark工具进行百万设备模拟测试

其实TCP测试的工具有很多,那BeetleX工具所提供的特点又是什么呢?如果你需数十万的请求或模拟上百万的设备连接,那这个工具相信可以满足你的需要!工具是基于BeetleX的基础功能扩展,支持多IP绑 ...

delphi的流操作的语法

Delphi在这两方面都做的相当出色.在Delphi的早期版本Turbo Pascal 中就曾有流(Stream).群(Collection)和资源(Resource)等专门用于对象式数据管理的类.在 ...