<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="js/jq.js"></script>

    <script src="js/ko.js"></script>

    <script src="js/index.js"></script>

    <style>

        .container {

            width: 620px;

            height: 415px;;

            display: -ms-grid;

            -ms-grid-columns: 5px (200px 5px)[3];

            -ms-grid-rows: 5px (200px 5px)[2];

            border: 1px solid red;

        }

        .item {

            width: 200px;

            height: 200px;

            line-height: 200px;

            text-align: center;;

            border: 1px solid deepskyblue;

        }

        @keyframes fadeOut {

            0% {

                opacity: 1;

            }

            50% {

                transform: scale(1.5) rotateX(90deg) ;

            }

            100% {

                opacity: 1;

            }

        }

        .item:hover {

        }

        .container .item:first-child {

            -ms-grid-column: 2;

            -ms-grid-row: 2;

            background-image:  linear-gradient(45deg,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(2) {

            -ms-grid-column: 4;

            -ms-grid-row: 2;

            background-image:  linear-gradient(225deg,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(3) {

            -ms-grid-column: 6;

            -ms-grid-row: 2;

            background-image:  radial-gradient(circle,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(4) {

            -ms-grid-column: 2;

            -ms-grid-row: 4;

            background-image:  radial-gradient(ellipse,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(5) {

            -ms-grid-column: 4;

            -ms-grid-row: 4;

            background-image:  radial-gradient(farthest-side at 40px 40px,yellow 0%,green 50%,blue 100%);

        }

        .container .item:nth-child(6) {

            -ms-grid-column: 6;

            -ms-grid-row: 4;

            background-image:  repeating-radial-gradient(closest-side at 40px 40px,yellow 0%,green 50%,skyblue 100%);

        }

    </style>

</head>

<body>

<div class='container' data-bind='foreach:people'>

    <div class='item' data-bind='text:item'>

    </div>

</div>

</body>

</html>
$(function () {

    // window['vm'] = {};

    /*var nav = new G.nav('resources/data/nav.json');

     nav.getViewModel(function (viewModel) {

     vm = viewModel;

     ko.applyBindings(vm);

     })

     */

    var items = function (item) {

        this.item = item;

    }

    var vm = {

        people: [

            new items('1'),

            new items('2'),

            new items('3'),

            new items('4'),

            new items('5'),

            new items('6')

        ]

    }

    ko.applyBindings(vm);

    jQuery('.item:eq(5)').mouseover(function (e) {

        var me = $(this);

        var i = 40;

        setInterval(function () {

            i++;

            me.css("background-image", "repeating-radial-gradient(closest-side at " + i + "px " + i + "px,yellow 0%,green 50%,skyblue 100%)");

        }, 100)

    })

})

ko list and css gradient的更多相关文章

  1. CSS Gradient文字效果

    你想创建的标题没有渲染和Photoshop每个标题吗?这里是一个简单的CSS技巧向您展示如何创建渐变文字效果,PNG图像(纯CSS,没有Javascript或Flash).你所需要的是一个空的< ...

  2. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  3. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  4. CSS Gradient详解

    啥也不说,先看代码: <style> div { width:100px;height:100px;border-radius:50px;/**第一行样式是设置容器的宽高,并且把圆角设置成 ...

  5. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

  6. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  7. 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...

  8. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  9. 【转】CSS设置DIV背景色渐变显示

     [原链接]http://www.2cto.com/kf/201310/248187.html <style type="text/css">     .linear{ ...

随机推荐

  1. Redis集群

    一.Redis集群原理 集群技术是构建高性能网站架构的重要手段,试想在网站承受高并发访问压力的同时,还需要从海量数据中查询出满足条件的数据,并快速响应,我们必然想到的是将数据进行切片,把数据根据某种规 ...

  2. PHP 使用get_class_methods()和array_diff() 兩個相同的類中方法差集

    进行二次开发时,习惯一份是原封不动的,一份正在修改.在修改时,发现修改的缺少原项目中的一些方法.本打算一个方法一个方法的对比,可是这样会比较花时间,划不来,PHP可以使用get_class_metho ...

  3. 滑动条slider

    #include"ui/CocosGUI.h" using namespace ui; Text* displayValudLabel = Text::create("轻 ...

  4. scala学习笔记：高阶函数

    scala> def power(y:Double)=(x:Double)=>Math.pow(x,y) warning: there were 1 deprecation warning ...

  5. 比较ASP生成静态HTML文件的几种方法

    将动态页面转换生成静态Html文件有许多好处,比如生成html网页有利于被搜索引擎收录(特别是对接受动态参数的页面).前台访问时,脱离了数据访问,减轻对数据库访问的压力,加快网页打开速度. 当然,凡事 ...

  6. 关于error: cannot connect to daemon的解决办法

    执行adb devices时,如果出现以下错误: * daemon not running. starting it now on port 5037 * ADB server didn't ACK ...

  7. CS0016: 未能写入输出文件“c:\windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\data\34aae060\b7daa87d\App_Web_addadvice.aspx.cdcab7d2.ekhlcbjd.dll”--“目录名无效。 ”

    产生原因: 应用程序运行时产生的临时文件需要存放到c:"windows"temp 文件夹下 而运行基于microsoft .net framework 框架下的应用程序 需要对te ...

  8. ### 学习《C++ Primer》- 8

    Part 8: 面向对象(第15章) // @author: gr // @date: 2015-01-09 // @email: forgerui@gmail.com 一.OOP 面向对象程序设计的 ...

  9. Java线程练习

    /*线程练习创建两个线程,与主线程交替运行 */ class Text extends Thread{    private String name;    Text(String name)     ...

  10. java中内部类的定义与访问规则

    java内部类总结 简单来说,内部类就是在我们所熟悉的类中的里面再定义一个类 为什么需要内部类? 当我们描述事物时,事物之中还有事物,我们就用内部类描述事物 因为内部事物在使用外部事物的内容 我举一个 ...