-_-#【CSS3】CSS3 gradient transition with background-position
CSS3 gradient transition with background-position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
#DemoGradient {
background: -webkit-linear-gradient(#C7D3DC,#5B798E);
background: -moz-linear-gradient(#C7D3DC,#5B798E);
background: -o-linear-gradient(#C7D3DC,#5B798E);
background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out; background-size: 1px 200px;
border-radius: 10px;
border: 1px solid #839DB0;
cursor: pointer;
width: 150px;
height: 100px;
}
#DemoGradient:hover {
background-position: 100px;
}
</style>
<div id="DemoGradient"></div>
</body>
</html>
-_-#【CSS3】CSS3 gradient transition with background-position的更多相关文章
- 转：【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- Linu下的Mysql学习详解_【all】
Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库 2.关系型数据库:mysql(主流用5.5,5.6), oracle 本质:二维表 ...
- Mysql 系统学习梳理_【All】
0.Linux学习---CentOS 7编译安装MySQL 8.0 1.Mysql学习---SQL语言的四大分类 2.Mysql学习---基础操作学习 3.Mysql学习---基础操作学习2 4.My ...
- 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- 【转】CSS3属性 @font-face 整理
原文: http://www.w3cplus.com/content/css3-font-face 出自: w3cplus.com 一.语法规则 @font-face { font-family: & ...
- Python 系统学习梳理_【All】
Python学习 1. Python学习---Python安装与基础1205 2. Python学习---PyCharm的使用学习 3. Python学习---Python数据类型1206 4. Py ...
- 企业级NFS网络文件共享服务_【all】
1.1. 什么是NFS(1台机器提供服务) Network File System(网络文件系统)通过局域网让不同的主机系统之间共享文件或目录. NFS客户端可以通过挂载的方式将NFS服务器端共享的数 ...
- Linux 系统学习梳理_【All】
第一部分---基础学习 00.Linux操作系统各版本ISO镜像下载 00.Linux系统下安装Vmware(虚拟机) 00.Linux 系统安装[Redhat] 00.Linux 系统安装[Cent ...
- Linux 下LAMP环境搭建_【all】
LAMP = Linux + Apache + Mysql + PHP 0. Linux环境搭建 Linux 系统安装[Redhat] 1.http服务软件分类及企业实战用途介绍 静态程序: Apac ...
随机推荐
- ubuntu下的openfire安装、配置、运行
openfire服务器 Openfire 采用Java开发,开源的实时协作(RTC)服务器基于XMPP(Jabber)协议.您可以使用它轻易的构建高效率的即时通信服务器.Op ...
- codevs 2149 矩形周长（暴力扫描线）
/* 暴力应该很好理解 不多说了 至于线段树维护的嘛 还没看懂 哪天突然想明白了在写吧 */ #include<iostream> #include<cstdio> #incl ...
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...
- Android开发--推送
需要的知识点:Notification.Service 第三方开源框架 : android-async-http-master 推送的来源:android项目中,有时会有这样一种需求:客户每隔一段时间 ...
- 关于百度 UEditor的使用
1.文件路径的配置: 注意:在页面上需要指定editor文件所在的路径,否则报错 后面有时间,再说说 kindEditor和 bootstrap3的summernote的 Editor, fck ...
- oracle中不曾熟悉的 to_char、to_number（未完待续）
十进制 十六进制88 58 用法一:Converts a HEX number to o FLOAT (转换一个十六进制数的浮标) SQL> sele ...
- What is SaaS?
SaaS, or Software as a Service, describes any cloud service where consumers are able to access softw ...
- 明解C语言，练习13-3，从文件中读入个人信息，按身高排序后显示
#include <stdio.h> #define NUMBER 6 #define F_PATH "D:\\C_C++\\ec13-3\\hw.dat" typed ...
- 利用WebRequest类上传文件
说明:1.WebRequest类是一个抽象类,所以上传类实际使用的是其子类 2.打开Fiddler软件,监视正常网页的文件上传,可以看到http协议的请求和响应信息,简略说明 (第一行:请求说明 PO ...
- Js随机数--网页版的体育彩票选号器
<script> function Quickpick() { var ball for( ball = 0; ball < 5; ball++) { this[ball] = pa ...