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. Nodejs介绍及其安装

    一.Nodejs介绍 Nodejs英文网:https://nodejs.org/en/ Nodejs中文网:http://nodejs.cn/ Node.js 是一个基于 Chrome V8 引擎的 ...

  2. ganlgia-rrdcached

    一.介绍 rrdcached是一个高性能的RRD缓存守护进程,在不带来大量磁盘读/写文件i/o负荷的情况下,允许gmetad实例维护多个RRD文件.rrdcached可通过命令套接字控制,并且包含在大 ...

  3. VScode使用简介

    1.1 VSCode简介 VSCode官网:https://code.visualstudio.com/ 支持语音: 速度较快,对超大文件读写速度飞快(打开10M代码不到1s,Subline原生会卡近 ...

  4. CF410div2 D. Mike and distribution

    /* CF410div2 D. Mike and distribution http://codeforces.com/contest/798/problem/D 构造 题意:给出两个数列a,b,求选 ...

  5. 最小生成树prime算法模板

    #include<stdio.h> #include<string.h> using namespace std; int map[505][505]; int v, e; i ...

  6. mode-c++

    /*感谢机房JYW的友情馈赠*/#include <iostream> #include <cstdio> #include <cstring> #include ...

  7. nyoj_218_Dinner_201312021434

    Dinner 时间限制:100 ms  |           内存限制:65535 KB 难度:1   描述 Little A is one member of ACM team. He had j ...

  8. 容器+AOP实现动态部署（三）

    上节咱们谈到容器的基本特性,这次继续说容器怎样与AOP进行结合.增强咱们的对象.为对象加入额外的方法. 咱们下面方图为说明 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  9. Apache OFbiz service engine 源代码解读

    上一篇看完了ofbiz entity engine,这篇再来过一下ofbiz的service engine.service engine层在设计模式的使用上跟entity engine有些相似,最典型 ...

  10. [字典树] poj 2418 Hardwood Species

    题目链接: id=2418">http://poj.org/problem?id=2418 Hardwood Species Time Limit: 10000MS   Memory ...