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的更多相关文章

  1. 转：【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  2. Linu下的Mysql学习详解_【all】

    Linux下Mysql简介 1.什么是Mysql(MariDB) 1.数据库:存储数据的仓库    2.关系型数据库:mysql(主流用5.5,5.6), oracle        本质:二维表   ...

  3. Mysql 系统学习梳理_【All】

    0.Linux学习---CentOS 7编译安装MySQL 8.0 1.Mysql学习---SQL语言的四大分类 2.Mysql学习---基础操作学习 3.Mysql学习---基础操作学习2 4.My ...

  4. 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  5. 【转】CSS3属性 @font-face 整理

    原文: http://www.w3cplus.com/content/css3-font-face 出自: w3cplus.com 一.语法规则 @font-face { font-family: & ...

  6. Python 系统学习梳理_【All】

    Python学习 1. Python学习---Python安装与基础1205 2. Python学习---PyCharm的使用学习 3. Python学习---Python数据类型1206 4. Py ...

  7. 企业级NFS网络文件共享服务_【all】

    1.1. 什么是NFS(1台机器提供服务) Network File System(网络文件系统)通过局域网让不同的主机系统之间共享文件或目录. NFS客户端可以通过挂载的方式将NFS服务器端共享的数 ...

  8. Linux 系统学习梳理_【All】

    第一部分---基础学习 00.Linux操作系统各版本ISO镜像下载 00.Linux系统下安装Vmware(虚拟机) 00.Linux 系统安装[Redhat] 00.Linux 系统安装[Cent ...

  9. Linux 下LAMP环境搭建_【all】

    LAMP = Linux + Apache + Mysql + PHP 0. Linux环境搭建 Linux 系统安装[Redhat] 1.http服务软件分类及企业实战用途介绍 静态程序: Apac ...

随机推荐

  1. 关于C++的疑问剖析

    1)众所周知,抽象类是不存在对象的,只提供接口而不提供实现.但是抽象类能不能作为一个类指针,指向其子类的对象呢? class Interface { public: ; }; class Implem ...

  2. iOS UIScrollView 你可能不知道的奇技淫巧

    iOS 的 UIScrollView 可以说是十分强大,巧妙地运用它可以得到一些意想不到的效果.本文将举几个 ScrollView 不常见运用的例子. 自带信息应用 这个界面既可以上下卷动,也可以左右 ...

  3. 19、XHTML

    XHTML 可扩展超文本标签语言(EXtensible HyperText Markup Language). 是一种 W3C 标准. 更严格,更纯净的HTML代码. 目标是取代HTML代码. XHT ...

  4. Kettle 实现mysql数据库不同表之间数据同步——实验过程

    下面是试验的主要步骤: 在上一篇文章中LZ已经介绍了,实验的环境和实验目的. 在本篇文章中主要介绍侧重于对Kettle ETL的相应使用方法, 在这里LZ需要说明一下,LZ成为了避免涉及索引和表连接等 ...

  5. magic_quotes_gpc、mysql_real_escape_string、addslashes的区别及用法

    本篇文章,主要先重点说明magic_quotes_gpc.mysql_real_escape_string.addslashes 三个函数方法的含义.用法,并举例说明.然后阐述下三者间的区别.关系.一 ...

  6. 文字排版--字体(font-family)

    我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:"宋体"; ...

  7. POJ 1286 Necklaces of Beads （Burnside定理，有限制型）

    题目链接:http://vjudge.net/problem/viewProblem.action?id=11117 就是利用每种等价情形算出置换节之后算组合数 #include <stdio. ...

  8. 页面加载完成，但ie进度条一直加载

    页面ajax执行完删除等操作,会刷新当前页面,如果前端框架是左右iframe格式 我的前端页面提示用asyncBox,可能iframe和asyncBox的影响,出现这种情况: 网上大多数的说法是 页面 ...

  9. eclipse4.2 UI换回 3.6版本的UI

    Apparently, the Eclipse developers were kind enough to leave us an easy way out: From the Window men ...

  10. 测试通过Word直接发布博文

    这里是来自word 2013的一篇测试文章. 测试直接通过Word自带的bloger功能发布博客文章. 这里插入一张图片