html页面：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css动画</title>
<link rel="stylesheet" type="text/css" href="css动画.css">
</head>
<body>
<div id="d1"></div>
</body>
</html>

Css代码：

*{
padding: 0px;
margin:0px;
}
#d1{
width: 200px;
height: 200px;
background-color: #E47373;
position: absolute;
box-shadow: 2px;

transform:translate(30px,30px);
transform:skew(-30deg,20deg);
/*全部平滑过渡一秒匀速*/
transition: all 1s linear;
background-color: #84AE86;
border-radius: 100%;
animation: donghua 10s 1 linear;
/*兼容性处理
-ms-transform:;
-o-transform:;
-moz-transform:;
-webkit-transform:;*/
}
@keyframes donghua{
0%{
top: 10px;
left: 100px;
}
25%{
top: 100px;
right: 20px;
}
50%{
top: 300px;
left: 300px;
}
75%{
top: 10px;
right: 100px;
}
100%{
top: 300px;
left: 400px;
}
}

Css小动画的更多相关文章

  1. CSS3-实现单选框radio的小动画

    在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下.一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容.加上各种浏览器前缀后就好了.但是旋转那个效果,在HB里 ...

  2. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...

  3. css小细节罗列

    有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...

  4. 利用jQuery实现用户名片小动画

    我爱撸码,撸码使我感到快乐!大家好,我是Counter.下面给大家介绍利用jQuery实现的小动画,非常的简便,如果有原生js操作的话,那么就不止这么多行了.至于CSS,个人觉得,这边CSS布局也蛮重 ...

  5. 前端动画小记---bilibili ( ゜-゜)つロ客户下载小动画

    逛哔哩哔哩 ( ゜-゜)つロPC版的时候看到一个蛮有意思的动画,指导用户去下载客户端,于是摸索实现了一个. 原动画效果 可以看到,一个静止的小电视人,当鼠标移动到电视人身上时,电视人慢慢变身成为一个小 ...

  6. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  7. 【CSS】352- 有趣的CSS弹跳动画

    点击上方"前端自习课"关注,学习起来~ 这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴 ...

  8. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. jquery实现一些小动画一

    jquery实现小动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. CF36E Two Paths (欧拉回路+构造)

    题面传送门 题目大意:给你一张可能有重边的不保证联通的无向图,现在要在这个图上找出两条路径,恰好能覆盖所有边一次,根据边的编号输出方案,无解输出-1 一道很不错的欧拉路径变形题 首先要知道关于欧拉路径 ...

  2. 【codeforces 508B】Anton and currency you all know

    [题目链接]:http://codeforces.com/contest/508/problem/B [题意] 给你一个奇数; 让你交换一次数字; 使得这个数字变成偶数; 要求偶数要最大; [题解] ...

  3. 手动扩栈#pragma comment(linker, "/STACK:1024000000,1024000000")

    #pragma comment(linker, "/STACK:1024000000,1024000000")

  4. 【ACM】NYOJ_69_数的长度_20130725

    数的长度时间限制:3000 ms  |  内存限制:65535 KB 难度:1描述     N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出 ...

  5. B - Oulipo

    The French author Georges Perec (1936�C1982) once wrote a book, La disparition, without the letter ' ...

  6. v$open_cursor中的相同record

    之前在查看v$open_cursor的时候,发现很多相同的record. 让我很疑惑, sid saddr sql_id 都相同,我就想 这不是一个cursor吗? 那为什么在open_cursor中 ...

  7. Maven 的dependency 的 classifier的作用

    直接看一个例子,maven中要引入json包,于是使用了 <dependency> <groupId>net.sf.json-lib</groupId> <a ...

  8. HDU5526/BestCoder Round #61 (div.1)1004 Lie 背包DP

    Lie   问题描述 一个年级总共有N个学生,每个人属于唯一一个班级.现在他们站在一排,同班同学并不一定会站在一起,但每个人都会说一句话:“站在我左边的有Ai个同班同学,右边有Bi个同班同学”.然而并 ...

  9. C++重载运算符简单总结

    当运算符作用于类类型的运算对象时,可以通过运算符重载重新定义该运算符的含义.明智的使用运算符重载能令我们的程序更易于编写和阅读. 一.基本概念 什么是运算符重载?重载的运算符是具有特殊名字的函数:它们 ...

  10. System.IO.Path 操作

    System.IO.Path 分类: C#2011-03-23 10:54 1073人阅读 评论(0) 收藏 举报 扩展磁盘string2010c System.IO.Path提供了一些处理文件名和路 ...