<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画、分列、过度</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div class="div0">动画效果</div>
<div class="div1">分列效果
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
.div0{
    width: 100px;
    height: 100px;
    background-color: forestgreen;
    position: relative;
    -webkit-animation: anima 5s infinite alternate;
    /*animation 动画效果 infinite无限   alternate交替*/
    -o-animation: anima 5s infinite alternate;
    animation: anima 5s infinite alternate;
}
@keyframes anima{
    0%{background: #000;  left: 0px;  top: 0px;}
    25%{background: firebrick;  left: 200px;  top: 0px;}
    50%{background: fuchsia;  left: 200px;  top: 200px;}
    75%{background: cornflowerblue;  left: 0px;  top: 200px;}
    100%{background: #000000;  left: 0px;  top: 0px;}
}
@-webkit-keyframes anima {
    0%{background: #000;  left: 0px;  top: 0px;}
    25%{background: firebrick;  left: 200px;  top: 0px;}
    50%{background: fuchsia;  left: 200px;  top: 200px;}
    75%{background: cornflowerblue;  left: 0px;  top: 200px;}
    100%{background: #000000;  left: 0px;  top: 0px;}
}

.div1{
    -webkit-column-count:;
    column-count:;
    /*分列数量*/
    column-gap: 30px;
    /*列距离*/
    column-rule:5px outset #FF0000;
    /*列颜色*/
    -webkit-column-rule:5px outset #FF0000;
}
.div2{
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
    transition-delay:2s;
    /*过度延时时间*/
}
.div2:hover{
    width: 200px;
    height: 200px;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
    我是一直小小鸟,飞呀飞呀飞不高,掉下去摔死怎么办?怎么办?
</div>
<div class="div2">过度效果展示</div>

</body>
</html>

HTML学习笔记 cs动画基础(分列效果可用于做瀑布流) 第十五节 (原创) 参考使用表的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Java学习笔记:语言基础

    Java学习笔记:语言基础 2014-1-31   最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...

  3. 卷积神经网络(CNN)学习笔记1:基础入门

    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...

  4. 「学习笔记」字符串基础:Hash,KMP与Trie

    「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...

  5. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

  6. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  7. 第四百一十五节,python常用排序算法学习

    第四百一十五节,python常用排序算法学习 常用排序 名称 复杂度 说明 备注 冒泡排序Bubble Sort O(N*N) 将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮 ...

  8. 风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞

    风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞 0x03 任意文件下载漏洞 一些网站由于业务需求,往往需要提供文件下载功能,但若对用户下载的文件不做限制,则恶意用户就能够下载任意敏感文件, ...

  9. 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录

    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...

随机推荐

  1. 【POJ】 1061 青蛙的约会(扩欧)

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 119148   Accepted: 25070 Descript ...

  2. 【POJ】3090 Visible Lattice Points(欧拉函数)

    Visible Lattice Points Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7705   Accepted: ...

  3. java基础(Fundamental)

    第一节 java开发环境 1.Linux操作系统 1)开源的操作系统.免费,主要作为服务器操作系统, 而Java主要是服务器端开发,所以部署环境都是Linux 2)Linux与Windows目录结构的 ...

  4. C# 使用FileUpload控件上传图片,将文件转换成二进制进行存储与读取

    状况描述: 需要上传文件,但是不想要保存到实体路径下,便可以用该功能来实现. 效果图: 点击[Upload]按钮,上传文件到数据库: 点击[Preview],预览文件: 具体实现: 前台: <t ...

  5. netsh用法

    netsh(Network Shell) 是一个windows系统本身提供的功能强大的网络配置命令行工具. 导出配置脚本:netsh -c interface ip dump > c:\inte ...

  6. 替代PhotoShop:GIMP图形编辑器的使用

    GIMP最早是linux环境下用于图形编辑的一款开源软件,目前的功能很已经很丰富,如果使用得当,在很多的图形编辑操作上完全可以替代收费的Photoshop(PS).目前GIMP已经发展成了多平台的开源 ...

  7. windows下利用nginx 做IIS负载均衡

    如果网站流量变大,就想加服务器分担压力,当然就要用到负载均衡,在windows 2003有自带的网络负载均衡,但配置还是挺麻烦的虽然有轮训和iphash的效果,但效果不算好. nginx小巧,下载不到 ...

  8. java优雅的使用elasticsearch api

    本文给出一种优雅的拼装elasticsearch查询的方式,可能会使得使用elasticsearch的方式变得优雅起来,使得代码结构很清晰易读. 建立elasticsearch连接部分请参看另一篇博客 ...

  9. Linux文件类型介绍

    文件类型介绍: Linux系统不同于Windows系统,两者文件类型和文件扩展名也有很大的差异.Linux中的文件类型和Linux文件的文件扩展名所代表的意义和Windows系统完全不同.用户一般通过 ...

  10. 4.ElasticSearch的基本api操作

    1. ElasticSearch的Index 1. 索引初始化 在创建索引之前 对索引进行初始化操作 指定shards数量和replicas数量 curl -XPUT 'http://192.168. ...