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 ...
随机推荐
- D06——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D06 20180821内容纲要: 面向对象初级学习 1 面向对象 2 类 (1)封装 (2)继承 (3)多态 3 小结 4 练习:选课系统 5 课外拓展:答题系 ...
- phpqrcode 分别生成普通、带logo、带背景带logo二维码
前提:下载好 phpqrcode 类库 1.生成普通二维码 //引入类库 include('phpqrcode/phpqrcode.php'); //二维码里面的链接地址 $url="htt ...
- 【poj1850】 Code 数位dp+记忆化搜索
题目大意:给你一个字符串,问你这个字符串的rank,如果这个字符串不合法,请直接输出0.(一个合法的字符串是对于∀i,有c[i]<c[i+1]) 字符串s的rank的计算方式:以字符串长度作为第 ...
- diskpart 格式化u盘 制作u盘启动盘方法
1.cmd 2.diskpart 3.list disk 4.select disk [index] 注:[index] 磁盘索引号 5.clean 6.create partition prim ...
- web worker原理 && SSE原理
第一部分 什么是 web worker? 我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复 ...
- Linux驱动：LCD驱动框架分析
一直想花时间来整理一下Linux内核LCD驱动,却一直都忙着做其他事情去了,这些天特意抽出时间来整理之前落下的笔记,故事就这样开始了.LCD驱动也是字符设备驱动的一种,框架上相对于字符设备驱动稍微复杂 ...
- phpredisadmin 莫名其妙错误，打开了无法显示任何数据
一直用的好好的,某天突然只有页面基本框架,redis数据看不到了. 查日志嘛... PHP Fatal error: Allowed memory size of 134217728 bytes e ...
- Java基础知识01
1. String,StringBuffer和StringBuilder的区别? String:final修饰,String对象创建后不可修改:StringBuffer和StringBuilder对象 ...
- Fiddler Web Debugger的代理功能（图文详解）
不多说,直接上干货! Fiddler的大部分功能都是在其作为本地代理的基础上实现的,如上面介绍的原理图一样,如果想实现数据包截断功能必须要设置为代理,它的代理功能设置比较简单,Fiddler版本2以后 ...
- C/C++ -- Gui编程 -- Qt库的使用 -- QtWidget
#include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QTextCodec:: ...