摘自:http://www.css88.com/archives/4381
第一个例子是滚动条:(简化版chrome & safari)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.progress-bar {
background-color: #1A1A1A;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display:inline-block;
height:100%;
background-color:#34C2E3;
border-radius : 3px;
/**定义宽度变化的动画效果**/
-webkit-transition: width .4s ease-in-out;
-webkit-background-size: 30px 30px;
/**定义边框的质感**/
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
background-size: 30px 30px;
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite;
}
@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
</style>
</head>
<body>
<div class="progress-bar blue">
<span style="width: 40%"></span>
</div>
</body>
</html>
第二个例子是旋转:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: red;
/* 定义动画的过程 */
-webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
-moz-transition: -moz-transform .5s ease-in, background .5s ease-in;
-o-transition: -o-transform .5s ease-in, background .5s ease-in;
transition: transform .5s ease-in, background .5s ease-in;
}
div:hover {
/* 定义动画的状态 */
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-transform: rotate(180deg) scale(2);
background: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
分享到：
相关推荐
JFXAnimationTemplate的建筑结构基于CSS关键帧动画，这些动画具有一些优点：特征基于与总动画持续时间或默认的绝对时间有关的不同百分比值，以相对方式定义动画。每个动作有多个目标观察者以完整的延迟评估方式定义...
3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ ...
CSS 用于定义网页的样式，包括不同设备和屏幕尺寸的设计、布局和显示变化。 CSS 旨在允许网络专业人员将网站代码的内容和结构与视觉设计分开。 CSS 可用于文档文本样式——例如更改标题和链接的颜色和大小。 它可...
必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 下面的例子演示 animate() ...
沿曲线动画对象，为了定义曲线，我们需要起点、切线第一点、切线第二点和终点。 简单使用： $ ( obj ) . animateCurve ( [ start , tan1 , tan2 , end ] , options , time , callback ) ; 暂停、播放、停止工作： $...
必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 下面的例子演示 animate() ...
文献资料打字稿TypeScript定义是通过发布的，可以通过以下命令进行安装： npm install @types/react-transition-group例子首先克隆仓库： git@github.com:reactjs/react-transition-group.git然后运行npm install ...
它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX...
它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX...
• 美元符号定义 jQuery • 选择符（selector）“查询”和“查找” HTML 元素 • jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - ...
4.2 css变换、过渡和动画43 4.2.1 变换函数43 4.2.2 过渡函数44 4.2.3 动画函数47 4.3 webkit数据库48 4.3.1 加载数据库48 4.3.2 运行事务48 4.3.3 一个示例数据库49 4.4 调整chrome51 4.5 识别...
第3章 类型、值和变量 3.1 数字 3.2 文本 3.3 布尔值 3.4 null和undefined 3.5 全局对象 3.6 包装对象 3.7 不可变的原始值和可变的对象引用 3.8 类型转换 3.9 变量声明 3.10 变量作用域 第4章 表达式和运算符 4.1 ...
除此之外，本书还包括大量的实例，不仅每个知识点都配有小例子，而且还有两个综合性的案例。对于初学者而言，本书应该是学习jQuery的首选。——jQuery中文用户组 jQuery因为易于使用和功能强大著称，是所有Web开发者...
14、修复了内部$.newId方法的一处错误，特定情况下导致定义了ID的对话框无法弹出 15、删除脚本对IE6 png bug内置支持，之前测试版本自动修复ie6 png皮肤是因为作者偷懒 16、修改aero皮肤CSS、针对IE6单独兼容，...
第3章 类型、值和变量 3.1 数字 3.2 文本 3.3 布尔值 3.4 null和undefined 3.5 全局对象 3.6 包装对象 3.7 不可变的原始值和可变的对象引用 3.8 类型转换 3.9 变量声明 3.10 变量作用域 第4章 表达式和运算符 4.1 ...
第3章 类型、值和变量 3.1 数字 3.2 文本 3.3 布尔值 3.4 null和undefined 3.5 全局对象 3.6 包装对象 3.7 不可变的原始值和可变的对象引用 3.8 类型转换 3.9 变量声明 3.10 变量作用域 第4章 表达式和运算符 4.1 ...