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. Python_oldboy_自动化运维之路（一）

    python简介: Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...

  2. NetworkOnMainThreadException

    来自:http://www.2cto.com/kf/201402/281526.html NetworkOnMainThreadException extends RuntimeException j ...

  3. 关于Entity Framework 5 从数据库生成模型时没有字段注释的解决方法！

    目前用到了EF5进行模型创建,发现从数据库生成过来的实体中并没有包含字段的说明信息(鄙视下微软,这么简单的问题都不给解决下,太粗枝大叶了),网上找到了EFTSQLDocumentation.Gener ...

  4. javascript权威指南第6版学习笔记

    javascript权威指南第6版学习笔记 javascript数组.函数是特殊对象 看一点少一点. 3.1.4 hello.js内容是 var x=.3-.2;var y=.2-.1 console ...

  5. selenium+eclipse+python环境

    1.下载并安装jdk,配置环境变量: 2.下载并安装python,配置path系统环境变量:D:\Program Files\python34: 3.安装selenium,在安装好的python路径D ...

  6. classpath and path.

    simply talk about the <path> and the <classpath> in java development. when the <path& ...

  7. Android手机修改Hosts的方法

    Android手机是和Google帐号紧密联系的,由于中国的操蛋情况,很多时候Google帐号无法登录,导致Android市场无法使用. 在电脑上我们通过修改Hosts方法可以解决Google帐号的登 ...

  8. ORACLE用户管理方式下备份数据和复制数据库

    首先要明确的是,oracle数据库的备份可以分为逻辑备份和物理备份.           逻辑备份的是通过数据导出对数据进行备份,主要方式有老式的IMP/EXP和数据泵灯方式.适合变化较少的数据库,而 ...

  9. Swift中共有74个内建函数

    Swift中共有74个内建函数,但是在Swift官方文档(“The Swift Programming Language”)中只记录了7中.剩下的67个都没有记录.   本文将列举Swift所有的内建 ...

  10. ajax 操作全局监测，用户session失效

    jQuery(function ($) { // 备份jquery的ajax方法 var _ajax = $.ajax; // 重写ajax方法,先判断登录在执行success函数 $.ajax = ...