-_-#【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 ...
随机推荐
- Android 布局
转自:http://www.cnblogs.com/chiao/archive/2011/08/24/2152435.html Android布局是应用界面开发的重要一环,在Android中,共有五种 ...
- Objective-C：swift、objective-c、C++、C混合编程
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...
- Python之路【第十七篇】：Django【进阶篇】
Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接 ...
- 论前端css初始化的重要性
新手,求喷,刚刚知道每个浏览器都有对 标签的初始化,就造成我们网站开发者开发的web程序,会在不同的网站上有不同的样式风格,这给用户带来了很不好的体验,这也是浏览器本身的原因造成的,这时候,我们不可能 ...
- MVC ViewData和ViewBag
视图数据可以通过ViewBag属性访问,它主要是为了从Controller到view进行传值用的,类似有所使用的ViewData[] 字典类.对于ViewBag是如此的强大,意味着你能动态的s ...
- ASP.NET Web API 文件產生器 - 使用 Swagger
转帖:http://kevintsengtw.blogspot.hk/2015/12/aspnet-web-api-swagger.html Swagger 是一套 API 互動文件產生器,使用 HT ...
- Linux下安装Nginx1.9.3-0303(本人亲手实践)
Linux下安装Nginx1.9.3 Linux操作系统 Oel 5.8 64bit 最新版Nginx: 1.9.3 最近同事让我帮忙搞 ngix,两天时间 安装.配置搞定了.继续 Nginx 1.9 ...
- UIViewAnimationOptions类型
一个非常强大的博客 http://www.cnblogs.com/kenshincui/ 像我这种新手确实应该多看看 常规动画属性设置(可以同时选择多个进行设置) UIViewAnimati ...
- 【POJ1417】【带标记并查集+DP】True Liars
Description After having drifted about in a small boat for a couple of days, Akira Crusoe Maeda was ...
- Android开发系列----学习伊始
因为对移动端开发开始感兴趣,开始学习App开发,没有苹果环境的我,只好先选择Android来玩一玩了~~ 找了一套视频,买了几本java.android开发的书,开始搞起~~