CSS3——动画效果
CSS3动画在Style里面就实现了以往我们用JQ写的动画效果,着实简便了不少~
简单Demo:
html代码:
<div id="dv1"></div>
CSS3代码:
<style type="text/css">
#dv1{width:100px;height:100px;border:1px solid blue;-webkit-animation:myfirst 3s;position:relative;}
@webkit-keyframes{
0%{left:0px;top:0px;}
25%{left:200px;top:0px;}
50%{left:200px;top:200px;}
75%{left:0px;top:200px;}
100%{left:0px;top:0px;}
}
</style>
--------------------下面演示一个让圆持续旋转的Demo
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#dv1{
width:100px;height:100px;border:100px solid green;
border-left-color:yellow;border-top-color:red;border-bottom-color:blue;
border-radius:%;
-webkit-animation:myAnimation 3s infinite linear;
}
@-webkit-keyframes myAnimation{
%{transform:rotate(0deg);}
%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div id="dv1"></div>
</body>
</html>
CSS3——动画效果的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 第八十三节,CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一.动画简介 CSS3提 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 35个让人惊讶的CSS3动画效果
1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- 第 26 章 CSS3 动画效果
学习要点: 1.动画简介 2.属性详解 3.简写和版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 的动画效果,可以通过类似 Flash 那样的关键帧模式控制运行. 一.动画简介 CSS ...
随机推荐
- Merge Two Sorted Lists
Merge Two Sorted Lists https://leetcode.com/problems/merge-two-sorted-lists/ Merge two sorted linked ...
- Codeforces Round #267 Div2 C George and Job --DP
题意:把长度为n的序列分成k个m长的连续小序列,这些连续小序列的和最大是多少. 解法:显然DP. 定义: dp[i][j] 为前 i 个元素分成j个m端,且 i 是第j个的末尾的最大和. 那么有: d ...
- HDU 4568 Hunter 最短路+状压DP
题意:给一个n*m的格子,格子中有一些数,如果是正整数则为到此格子的花费,如果为-1表示此格子不可到,现在给k个宝藏的地点(k<=13),求一个人从边界外一点进入整个棋盘,然后拿走所有能拿走的宝 ...
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
- document.write和innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open.每次写完关闭之后重新调用该函数,会导致页面被重写. innerHTML ...
- java 8-7 接口
1. 接口的特点: A:接口用关键字interface表示 interface 接口名 {} B:类实现接口用implements表示 class 类名 implements 接口名 {} C:接口不 ...
- 关联:objc_getAssociatedObject和objc_setAssociatedObject使用
为UIButton的category添加属性 UIButton+subTitle.h #import <UIKit/UIKit.h> #import <objc/runtime.h& ...
- jquery中$("#afui").get(0)为什么要加get(0)呢?
jquery中$("#afui").get(0)为什么要加get(0)呢? 2015-04-13 17:46SYYZZ3 | 浏览 509 次 Jquery $("#a ...
- usb驱动开发1之学习准备
此系列是http://blog.csdn.net/fudan_abc/博文的整理,同时加入了自己的理解.很敬佩fudan_abc的文章,仔细学习和分析受益很多.注:fundan_abc所分析linux ...
- 【WPF】WPF中调用Winform
1.添加两个引用:WindowsFormsIntegration.dll(负责整合WPF和Windows).System.Windows.Forms.2.在 XAML文件中添加两个引用(粗体部分): ...