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. Django Template（模板系统）

    一.Django模板 内置模板标签和过滤器 二.常用操作 两种特殊符号: {{  }}  和 {%  %} 变量相关的用: {{  }} 逻辑相关的用: {%  %} 2.1 变量 在Django的模 ...

  2. 针对mdadm的RAID1失效测试

    背景 对软RAID(mdadm)方式进行各个场景失效测试. 一.初始信息 内核版本: root@omv30:~# uname -a Linux omv30 4.18.0-0.bpo.1-amd64 # ...

  3. PAT 1098. Insertion or Heap Sort

    According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...

  4. Mysql双主自增长冲突处理

    Mysql双主自增长冲突处理   多主互备和主从复制有一些区别,因为多主中都可以对服务器有写权限,所以设计到自增长重复问题   出现的问题(多主自增长ID重复)  1:首先我们通过A,B的test表结 ...

  5. mongoDB全文索引

    相关文章:php使用Coreseek实现全文索引 Introduction Mongo provides some functionality that is useful for text sear ...

  6. backup script

    #!/bin/bash ##################################################### # export the whole database use ex ...

  7. iOS：让标题栏背景图片适应iOS7

    From google: If your app uses a custom image as the background of the bar, you'll need to provide a ...

  8. Unity3d-反编译C#和提取资源

    使用MonoDevelop查看代码 1.解压缩一个Ipa文件,找到如下目录 2.拖拽一个Assembly-CSharp.dll文件到MonoDevelop工具栏,即可查看C#代码 其他C#反编译工具: ...

  9. shell中eval命令

    原文:http://www.cnblogs.com/xdzone/archive/2011/03/15/1984971.html 语法:eval cmdLine eval会对后面的cmdLine进行两 ...

  10. springmvc 中开发Server Send Event

    springmvc 中开发Server Send Event 学习了:http://blog.csdn.net/leiliz/article/details/55195203 https://www. ...