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. Scrapy下载器中间件用法示例

    1.爬虫文件httpbin.py # -*- coding: utf-8 -*- import scrapy class HttpbinSpider(scrapy.Spider): name = 'h ...

  2. 使用scrapy爬取的数据保存到CSV文件中，不使用命令

    pipelines.py文件中 import codecs import csv # 保存到CSV文件中 class CsvPipeline(object): def __init__(self): ...

  3. BZOJ 1452 Count 【模板】二维树状数组

    对每种颜色开一个二维树状数组 #include<cstdio> #include<algorithm> using namespace std; ; ][maxn][maxn] ...

  4. 7.2.1 代码测试 doctest

    Python标准库 doctest 可以搜索程序中类似于交互式Python代码的文本片段,并运行这些交互式代码来验证是否符合预期结果和功能,常用于Python程序的模块测试. 使用doctest模块测 ...

  5. bootstrap下的双选时间插件使用方法

    bootstrap画的页面很漂亮,能自动适应网页端,移动端.实现一个双选时间控件: 要得jar包自己去下 一.页面 二.JS var $createTime=$('#createTime');$cre ...

  6. Servlet的HttpServletResponse输出

    了解其中的一些字符设置,PrintWriter输出等.. form.html: <!DOCTYPE html> <html> <head> <title> ...

  7. [ javascript ] getElementsByClassName与className和getAttribute!

    对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题. 那么须要模拟出getElementsByClassName  须要採用className属性 ...

  8. Linux - Virsh

    virsh命令 suspend resume dumpxml   KVM平台以存储池的形式对存储进行统一管理,所谓存储池能够理解为本地文件夹.通过远端磁盘阵列(iSCSI.NFS)分配过来磁盘或文件夹 ...

  9. 飘逸的python - 实现glob style pattern

    一说起通配符,大家非常快就会想起*和? 号,有了通配符,使得表达能力大大增强,非常多linux命令都支持这个东西,事实上就是glob style pattern. 就连redis的keys命令都支持g ...

  10. Java 两个整数相除保留两位小数，将小数转化为百分数

    Java 两个整数相除保留两位小数,将小数转化为百分数 源于:http://blog.sina.com.cn/s/blog_624d755d0101cvuq.html 后来学习了:http://blo ...