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 ...
随机推荐
- 双向一对一映射@OneToOne
双向一对一的实例我已经上传到GitHub,entrance项目上了,感兴趣的可以下载下来跑跑,这里讲两个在运行过程中遇到的问题. 问题一:上一篇博客的最后我留下了问题.一对一关联查询注解@OneToO ...
- postgresql子查询优化(提升子查询)
问题背景 在开发项目过程中,客户要求使用gbase8s数据库(基于informix),简单的分页页面响应很慢.排查发现分页sql是先查询出数据在外面套一层后再取多少条,如果去掉嵌套的一层,直接获取则很 ...
- POJ 1089
#include <iostream> #include <algorithm> #define MAXN 50005 using namespace std; struct ...
- J01-Java IO流总结一 《异常捕获》
下面演示java中处理I/O操作时的异常的正确方式,总结自书籍,书名忘啦~ 先看一种不正确的方式 方式一: import java.io.FileInputStream; import java.io ...
- Java虚拟机（六）：JVM调优工具
工具做为图形化界面来展示更能直观的发现问题,另一方面一些耗费性能的分析(dump文件分析)一般也不会在生产直接分析,往往dump下来的文件达1G左右,人工分析效率较低,因此利用工具来分析jvm相关问题 ...
- android studio启动和项目编译问题
第一次安装完成后,不要立刻启动,首先在Android Studio安装目录下的 bin 目录下,找到 idea.properties 文件,在文件最后追加disable.android.first.r ...
- Linux中终端和控制台的一些不成熟的理解
首先声明,这仅仅是在下一些不成熟的想法.是通过看网上的一些资料和自己实践的一些心得,应该都是些很不成熟甚至是不太正确的想法.但是我还是想记录下来,算是一个心路历程吧.等以后成熟了,再来修改. 首先说一 ...
- Eclipse svn 中文转成英文
- Java运用第三方开源jar包sigar.jar获取服务器信息
通过使用第三方开源jar包sigar.jar我们可以获得本地的信息 一.准备工作 (1)下载jar包和相关文件 资源链接:百度云:链接:https://pan.baidu.com/s/1nxccJHJ ...
- [Hive]HiveSQL解析原理
Hive是基于Hadoop的一个数据仓库系统,在各大公司都有广泛的应用.美团数据仓库也是基于Hive搭建,每天执行近万次的Hive ETL计算流程,负责每天数百GB的数据存储和分析.Hive的稳定性和 ...