css实现一色多变化
.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实现一色多变化的更多相关文章
- css的checkbox样式变化
1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...
- CSS图片列表
1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a ...
- css3 transition属性变化与animation动画的相似性以及不同点
下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...
- css less
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编写和维护. LESSCSS可以在多种语 ...
- web前端知识大纲:系列二 css篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...
- 超全面的JavaWeb笔记day02<CSS&JavaScript>
1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...
随机推荐
- Jmeter添加变量的四种方法
一.在样本中添加同请求一起发送的参数.根据服务器设置的数据类型,来添加不同类型的参数 二.用户定义的变量 1.创建:添加->配置元件->用户定义的变量 2.作用:当前的线程组内所有Samp ...
- C语言中的extern
extern: 这个关键字真的比较恶心,在定义变量的时候,extern居然可以被省略(定义时,默认均省略): 在声明变量的时候,extern必须加在变量前. 所以有时候你搞不清楚是声明还是定义.:变量 ...
- SHELL脚本自动备份数据库
#!/bin/bash db_user="root" db_passwd="dddddd " db_name="mmmmmm" cd /db ...
- LINQ查询中的IEnumerable<T>和IQueryable<T>
LINQ查询方法一共提供了两种扩展方法,在System.Linq命名空间下,有两个静态类:Enumerable类,它针对继承了IEnumerable<T>接口的集合进行扩展:Queryab ...
- @Transactional(rollbackFor=Exception.class)的使用
转载: java阿里巴巴规范提示:方法[edit]需要在Transactional注解指定rollbackFor或者在方法中显示的rollback. 先来看看异常的分类 error是一定会回滚的 这里 ...
- ImageNet历年冠军和相关CNN模型
ImageNet 是一个超过15 million的图像数据集,大约有22,000类. 是由李飞飞团队从2007年开始,耗费大量人力,通过各种方式(网络抓取,人工标注,亚马逊众包平台)收集制作而成,它作 ...
- 使用selenium前学习HTML介绍
<!-- HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (mark ...
- Ubuntu16.04双网卡配置,内网外网同时访问
Ubuntu16.04双网卡配置,内网外网同时访问 配置:vim/etc/network/interface auto lo iface lo inet loopback auto eno1 ifac ...
- linux中uptime命令获取主机运行时间和查询系统负载信息
系统中的uptime命令主要用于获取主机运行时间和查询linux系统负载等信息.uptime命令可以显示系统已经运行了多长时间,信息显示依次为:现在时间.系统已经运行了多长时间.目前有多少登陆用户.系 ...
- iscroll.js 用法介绍
iscroll-5中文文档:http://wiki.jikexueyuan.com/project/iscroll-5/ 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码. ...