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 ...
随机推荐
- 【LeetCode】390. 消除游戏
题目 给定一个从1 到 n 排序的整数列表. 首先,从左到右,从第一个数字开始,每隔一个数字进行删除,直到列表的末尾. 第二步,在剩下的数字中,从右到左,从倒数第一个数字开始,每隔一个数字进行删除,直 ...
- 【BZOJ2082】【POI2010】Divine divisor 假的pollard-rho
题目大意:给你$m$个数$a_i$,定义$n=\Pi_{i=1}^{m}a_i$.将$n$分解质因数为$\Pi p_i^{k_i} $,$p_i$是质数.请输出$2^{max(k_i)}-1$,以及存 ...
- 使用Hive UDF和GeoIP库为Hive加入IP识别功能
Hive是基于Hadoop的数据管理系统,作为分析人员的即时分析工具和ETL等工作的执行引擎,对于如今的大数据管理与分析.处理有着非常大的 意义.GeoIP是一套IP映射数据库,它定时更新,并且提供了 ...
- (转)MySQL 加锁处理分析
MySQL 加锁处理分析 原文:http://hedengcheng.com/?p=771 1 背景 1 1.1 MVCC:Snapshot Read vs Current Read ...
- java数据结构之二叉树遍历的非递归实现
算法概述递归算法简洁明了.可读性好,但与非递归算法相比要消耗更多的时间和存储空间.为提高效率,我们可采用一种非递归的二叉树遍历算法.非递归的实现要借助栈来实现,因为堆栈的先进后出的结构和递归很相似.对 ...
- DotNetOpenAuth 使用指南
这几天一直在研究DotNetOpenAuth,源码处处是坑啊!写此文只为大家更顺利掌握DotNetOpenAuth使用方法,尽量少走弯路. 说明一下:我的环境是Win7 64 VS2015 upd ...
- html的css选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- C/C++ -- Gui编程 -- Qt库的使用 -- QtWidget
#include<QtGui> int main(int argc, char * argv[]) { QApplication app(argc, argv); QTextCodec:: ...
- python中不可变数据类型和可变数据类型
在学习python过程中我们一定会遇到不可变数据类型和可变数据类型. 1.名词解释 以下所有的内容都是基于内存地址来说的. 不可变数据类型: 当该数据类型的对应变量的值发生了改变,那么它对应的内存地址 ...
- idea 错误: -source 1.6 中不支持 diamond 运算符的解决办法
在取一段github代码时,发现说是支持jdk 7 ,但是使用MAVEN编译不过去. 报错信息为错误: -source 1.6 中不支持 diamond 运算符 我使用的环境是1.7 + intel ...