css动画笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/common.css">
<style type="text/css">
.xiaoming {
position: absolute;
top: 100px;
left: 100px;
animation: name1 2s infinite;
}
@keyframes name1 {
0%{
top:200px;
}
10%{
top: 800px;
left: 800px;
transform: rotate(180deg);
}
60%{
top: 400px;
left: 400px;
transform: rotate(180deg);
}
100%{
top: 100px;
left: 100px;
}
}
</style>
</head>
<body> <div class="xiaoming">
<img src="http://img30.360buyimg.com/jr_image/jfs/t3943/198/1201160477/17676/4e4ae11/586b5b09N6c946d97.jpg" alt="">
</div> </body>
</html>
光盘旋转案例//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.xiaoming {
position: absolute;
top: 100px;
left: 100px;
animation: go 4s infinite linear;
/*infinite无限的，也可写数字几次*/
/*linear匀速*/
}
@keyframes go {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="xiaoming">
<img src="data:images/cd.png" alt="">
</div>
</body>
</html>
css动画笔记的更多相关文章
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- amazeui学习笔记--css（常用组件15）--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- Head First HTML与CSS阅读笔记（二）
上一篇Head First HTML与CSS阅读笔记(一)中总结了<Head First HTML与CSS>前9章的知识点,本篇则会将剩下的10~15章内容进行总结,具体如下所示. div ...
- CSS学习笔记之CSS3新特性
目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...
- React Transition css动画案例解析
实现React Transition Css动画效果 首先在项目工程中引入react-transition-group: npm install react-transition-group --sa ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
随机推荐
- mysql ERROR 1045 (28000): Access denied for user 可能解决方法分析
在实际登录redmine的过程中,我们遇到了如下的error ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using ...
- java数据结构之(堆)栈
(堆)栈概述栈是一种特殊的线性表,是操作受限的线性表栈的定义和特点•定义:限定仅在表尾进行插入或删除操作的线性表,表尾—栈顶,表头—栈底,不含元素的空表称空栈•特点:先进后出(FILO)或后进先出(L ...
- [转] TCP/IP原理、基础以及在Linux上的实现
导言:本篇作为理论基础,将向我们讲述TCP/IP的基本原理以及重要的协议细节,并在此基础上介绍了TCP/IP在LINUX上的实现. OSI参考模型及TCP/IP参考模型 OSI模型(open syst ...
- dockerfile基础命令
一直想写一个, 但发现网上有很多了, 直接copy把 如何使用 Dockerfile用来创建一个自定义的image,包含了用户指定的软件依赖等.当前目录下包含Dockerfile,使用命令build来 ...
- Docker运行操作系统环境(BusyBox&Alpine&Debian/Ubuntu&CentOS/Fedora)
目前常用的Linux发行版主要包括Debian/Ubuntu系列和CentOS/Fedora系列.前者以自带软件包版本较新而出名:后者则宣称运行更稳定一些.选择哪个操作系统取决于读者的具体需求.同时, ...
- MySQL中You can't specify target table for update in FROM clause异常
mysql中You can't specify target table <tbl> for update in FROM clause错误的意思是说,不能先select出同一表中的某些值 ...
- [转]MVC中几种常用ActionResult
本文转自:http://www.cnblogs.com/xielong/p/5940535.html 一.定义 MVC中ActionResult是Action的返回结果.ActionResult 有多 ...
- pageParam要求传个JSON对象的方法
pageParam要求传个JSON对象,使用方式:api.openWin({name: 'page1',url: 'page1.html',pageParam: {x: '1000',y: '2000 ...
- ASP.NET MVC 获得 view 中的HTML并将其中的内容自动转换成繁体中文。
一.思路 1.获得 asp.net mvc 输出的 html 的字符串. 2.将拿到的 html 字符串中的简体中文转换成繁体中文. 3.输出 html. 二.实现 1.扩展 RazorView 视图 ...
- HTML常用的标签中，行内元素和块级元素
块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div ...