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. Java基础知识强化之集合框架笔记46：Set集合之TreeSet存储自定义对象并遍历练习2（自然排序：Comparable）

    1. TreeSet存储自定义对象并遍历练习2: (1)Student.java package cn.itcast_06; /* * 如果一个类的元素要想能够进行自然排序,就必须实现自然排序接口 * ...

  2. RHEL7安装配置TigerVNC

    TigerVNC使用非加密的链接,默认会被firewalld blocked 掉,想要 vnc正常工作就需要让firewalld开放相应的端口才行. vnc默认的端口号为5900,而每个vnc win ...

  3. Usaco 2010 Dec Gold Exercise(奶牛健美操)

    /*codevs 3279 二分+dfs贪心检验 堆版本 re一个 爆栈了*/ #include<cstdio> #include<queue> #include<cst ...

  4. 设计模式学习——准备（UML类图）

    前言 其实吧,最早接触UML是源于软件设计师的考试,半路出家实在难为我了.学设计模式总是要画类图的,所以补充UML的类图的知识是很重要滴.第一篇就偷懒一点copy别人的东西了.实话说,我们都是踩在巨人 ...

  5. MVC打包压缩JS&CSS文件调试时过滤了一些文件

    BundleTable.这个确实是比较好用,打包并压缩了CSS,使之加载时减少流量. 但是在调试的时候会疑问为何有很多JS,CSS文件无法打包,其实是因为调试时VS自动过滤了如下文件:   后台跟踪了 ...

  6. VS2015 Cordova Ionic移动开发（五）

    一.创建侧边菜单和导航项目 1.使用VS创建一个Ionic空项目,同时创建一个Ionic SideMenu和Ionic Tabs项目.将SideMenu和Tabs项目里的templates和js文件合 ...

  7. 解决NSAttributedString与UILabel高度自适应计算问题

    两个类扩展方法: /** *  修改富文本的颜色 * *  @param str   要改变的string *  @param color 设置颜色 *  @param range 设置颜色的文字范围 ...

  8. Linux命令：chmod命令

    chmod命令:改变文件或目录的存取权限 #权限代号 -r 文件被读取 4 -w 文件被写入 2 -x 文件被执行 1 #权限范围 -u 文件所有者 -g 文件所有者所在组 -o 其他 -a 全部 # ...

  9. 怎么去掉iframe的滚动条？

    <iframe name="123" src="YNJD/ynjd.htm" frameborder="0" width=" ...

  10. Linux设置固定IP

    此处需整理 问题:在CentOS 7上,我想要将我其中一个网络接口从DHCP改为静态IP地址配置,如何才能永久为CentOS或RHEL 7上的网络接口分配静态IP地址? 如果你想要为CentOS 7中 ...