<!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. 
						
  2. Java学习笔记：语言基础
		
    Java学习笔记:语言基础 2014-1-31   最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
    
		
    3. 
						
  3. 卷积神经网络(CNN)学习笔记1：基础入门
		
    卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01   |   In Machine Learning  |   9 Comments  |   14935  Vie ...
    
		
    4. 
						
  4. 「学习笔记」字符串基础：Hash，KMP与Trie
		
    「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...
    
		
    5. 
						
  5. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
		
    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
    
		
    6. 
						
  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. 
						
  7. 第四百一十五节，python常用排序算法学习
		
    第四百一十五节,python常用排序算法学习 常用排序 名称 复杂度 说明 备注 冒泡排序Bubble Sort O(N*N) 将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮  ...
    
		
    8. 
						
  8. 风炫安全web安全学习第三十五节课  文件下载和文件读取漏洞
		
    风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞 0x03 任意文件下载漏洞 一些网站由于业务需求,往往需要提供文件下载功能,但若对用户下载的文件不做限制,则恶意用户就能够下载任意敏感文件, ...
    
		
    9. 
						
  9. 风炫安全WEB安全学习第二十五节课  利用XSS键盘记录
		
    风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. TEXT宏
			
    TEXT宏是windows程序设计中经常遇到的宏,定义在 <winnt.h>中 TCHAR *P = TEXT("this is a const string"); 如 ...
    
			
    2. 
						
  2. CDH入门
			
    cloudera(CDH)官网介绍:安装包.离线包该如何下载.官方文档等介绍http://www.aboutyun.com/thread-8908-1-1.html(出处: about云开发) 进入C ...
    
			
    3. 
						
  3. 怎样学好哲学（lucas+费马小定理）
			
    怎样学习哲学 时间限制: 1 Sec  内存限制: 128 MB提交: 97  解决: 27[提交][状态][讨论版] 题目描述 OI大师抖儿在夺得银牌之后,顺利保送pku.这一天,抖儿问长者:&qu ...
    
			
    4. 
						
  4. Distribute Candies
			
    Given an integer array with even length, where different numbers in this array represent different k ...
    
			
    5. 
						
  5. 我的第一个python web开发框架（4）——数据库结构设计与创建
			
    小白做好前端html设计后,马上开始进入数据库结构设计步骤. 在开始之前,小白回忆了一下老大在公司里培训时讲过的数据库设计解说: 对于初学者来说,很多拿到原型时不知道怎么设计数据表结构,这是很正常的事 ...
    
			
    6. 
						
  6. 命令行参数处理-getopt()和getopt_long()
			
    在实际编程当中,自己编写代码处理命令行参数是比较麻烦且易出错的.一般我们会直接使用getopt()和getopt_long()函数,下文将介绍具体的使用方法. getopt() getopt()用于处 ...
    
			
    7. 
						
  7. ch3-form(get/post) $.ajax(get/post)
			
    1 http(get)请求 提交的数据 用req.query接收 1.1 router.get() //http(get)请求方式 1.2 接收http(get)方式提交的数据 req.query 方 ...
    
			
    8. 
						
  8. Github Page+Bmob实现简单动态功能
			
    Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务.目前国内外也有很多提供后台服务,特别是云服务.譬如国外有AWS,记得好像是注册免费使用一年:再如Heroku,支持N ...
    
			
    9. 
						
  9. C++的socket编程学习
			
    前言 不得不承认作为一个前端开发,仍有一个后台开发的梦.从socket通信开始学习,在工作之余补充学习点相关知识,记录下学习的过程. 服务端 服务器代码如下,在设置listen之后,通过accept获 ...
    
			
    10. 
						
  10. 如何结合场景利用block进行回调
			
    我们在开发中常常会用到函数回调,你可以用通知来替代回调,但是大多数时候回调是比通知方便的,所以何乐而不为呢?如果你不知道回调使用的场景,我们来假设一下: 1.我现在玩手机 2.突然手机没有电了 3.我 ...
    
			
    11.