.pesudo{
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
width: 120px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
border-radius:1em;
background:#00aabb;
cursor:pointer;
}
.pesudo:before{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index:-1;
border-radius:1em;
background:rgba(0,0,0,.1);
}
.pesudo:hover:before{
content:"";
}
.pesudo:after{
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index:-1;
border-radius:1em;
background:rgba(255,255,255,.2);
}
.pesudo:active:after{
content:"";
}

  

陈大吊

css实现一色多变化的更多相关文章

  1. css的checkbox样式变化

    1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...

  2. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  3. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  4. css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  5. CSS图片列表

    1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...

  6. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  7. css less

    LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语 ...

  8. web前端知识大纲:系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  9. 超全面的JavaWeb笔记day02<CSS&JavaScript>

    1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...

随机推荐

  1. db-mysql-001- 语句备份表

    1.备份表 CREATE TABLE AAbak( SELECT * FROM AA ); 2.两个已存在表导数据 INSERT INTO AAbak(c1,c2) SELECT c1,c2 FROM ...

  2. Oracle中to_number()函数的用法

    to_number()函数是oracle中常用的类型转换函数之一,是将一些处理过的按一定格式编排过的字符串变回数值型的格式. 1.to_number()函数可以将char或varchar2类型的str ...

  3. livego

    1.安装golang开发环境 https://www.cnblogs.com/eczhou/p/7929693.html 2.livego源码及说明文档 https://github.com/zhou ...

  4. PL/SQL 表约束

    1. 表相关 a. 主键:constraint [主键的约束名] primary key b. 外键:constraint [外键约束名] foreign key( ) references []() ...

  5. ruby中的可调用对象--方法

    上一篇讲了ruby中的可调用对象proc和lambda,他们都是块转换成的对象.ruby中的可调用对象还有方法.通过使用method方法,并且以方法名作为参数(字符串或者符号),就可以得到一个方法对象 ...

  6. nginx日志输出,https,ssl

    日志输出(浏览器直接访问)缺省安装下,浏览器是无法访问日志的,需要在编译的时候附带参数安装这些模块 ./configure --prefix=/usr/local/nginx --with-http_ ...

  7. hdu4763 Theme Section

    地址:http://acm.hdu.edu.cn/showproblem.php?pid=4763 题目: Theme Section Time Limit: 2000/1000 MS (Java/O ...

  8. tomcat进程意外退出的问题分析(转)

    原文链接:http://hongjiang.info/why-kill-2-cannot-stop-tomcat/ 节前某个部门的测试环境反馈tomcat会意外退出,我们到实际环境排查后发现不是jvm ...

  9. 使用C++11实现一个半同步半异步线程池

    前言 C++11之前我们使用线程需要系统提供API.posix线程库或者使用boost提供的线程库,C++11后就加入了跨平台的线程类std::thread,线程同步相关类std::mutex.std ...

  10. Django学习笔记之Models与ORM操作

    一.ORM增加 from django.db import models class Publisher(models.Model): name = models.CharField(max_leng ...