HTML学习笔记 cs动画基础(分列效果可用于做瀑布流) 第十五节 (原创) 参考使用表
<!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动画基础(分列效果可用于做瀑布流) 第十五节 (原创) 参考使用表的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Java学习笔记:语言基础
Java学习笔记:语言基础 2014-1-31 最近开始学习Java,目的倒不在于想深入的掌握Java开发,而是想了解Java的基本语法,可以阅读Java源代码,从而拓展一些知识面.同时为学习An ...
- 卷积神经网络(CNN)学习笔记1:基础入门
卷积神经网络(CNN)学习笔记1:基础入门 Posted on 2016-03-01 | In Machine Learning | 9 Comments | 14935 Vie ...
- 「学习笔记」字符串基础:Hash,KMP与Trie
「学习笔记」字符串基础:Hash,KMP与Trie 点击查看目录 目录 「学习笔记」字符串基础:Hash,KMP与Trie Hash 算法 代码 KMP 算法 前置知识:\(\text{Border} ...
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- 第四百一十五节,python常用排序算法学习
第四百一十五节,python常用排序算法学习 常用排序 名称 复杂度 说明 备注 冒泡排序Bubble Sort O(N*N) 将待排序的元素看作是竖着排列的“气泡”,较小的元素比较轻,从而要往上浮 ...
- 风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞
风炫安全web安全学习第三十五节课 文件下载和文件读取漏洞 0x03 任意文件下载漏洞 一些网站由于业务需求,往往需要提供文件下载功能,但若对用户下载的文件不做限制,则恶意用户就能够下载任意敏感文件, ...
- 风炫安全WEB安全学习第二十五节课 利用XSS键盘记录
风炫安全WEB安全学习第二十五节课 利用XSS键盘记录 XSS键盘记录 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源.所以xyz.com下的js脚本采用a ...
随机推荐
- Beautiful Dream hdu3418 (直接做或二分)
Beautiful Dream Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- poj2823一道纯单调队列
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 32099 Accepted: 9526 ...
- JavaScript 版数据结构与算法(二)队列
今天,我们要讲的是数据结构与算法中的队列. 队列简介 队列是什么?队列是一种先进先出(FIFO)的数据结构.队列有什么用呢?队列通常用来描述算法或生活中的一些先进先出的场景,比如: 在图的广度优先遍历 ...
- Golang:使用自定义模板发送邮件
https://medium.com/@itsHabib/sending-emails-with-go-using-a-custom-template-ae863b65a859 作者:Michael ...
- Javascript从“繁”到“简”进行数组去重
随着JavaScript提供语法的增多,数组去重方式也越来越多.现在从最原始的方式到最简洁的方式,一步步进行剖析. 双重循环 数组去重,不就是比较数组元素,去掉重复出现的么.最原始的方式不正是双重循环 ...
- Android基础知识04—Activity活动之间传递数据
------活动之间传递数据------ 向下一个活动传递数据: Intent中提供了一系列的putExtra()方法,可以把数据暂存到Intent中,启动另一个活动的时候就可以取出来. 代码: (存 ...
- Android基础知识02—安卓日志工具LogCat的五种方法
--------Android 02-------- >>> Android的日志工具LogCat 五个方法,记录信息的级别不一样,从低到高为: 1.Log.v()-日志 ...
- SpringMVC Spring MyBatis整合配置文件
1.spring管理SqlSessionFactory.mapper 1)在classpath下创建mybatis/sqlMapConfig.xml <?xml version="1. ...
- 总结HTML5
都说项目页面是HTML5写的,但是HTML5的特别之处用了多少? 1.是不是页面布局都是统一的div,然后class写样式?可是HTML5提供了好多新标签 ,css中直接用标签名即可定义样式,不用费力 ...
- 使用原生php读写excel文件
最近在工作中遇到一个需求,需要将数据库中的数据导出到excel文件中,并下载excel文件.因为以前没做过,所以就百度了一下, 网上说的大多是使用PHPExcel类来操作excel文件,这还要去下载这 ...