摘自: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>
分享到：
相关推荐
**WebKit CSS3 动画基础** WebKit 是一个开源的网页渲染引擎，被广泛应用于苹果的 Safari 和谷歌的 Chrome 浏览器中。CSS3 动画是 Web 开发中的一个重要组成部分，它允许开发者通过时间序列控制元素的视觉变化，...
1. **@keyframes 规则**：CSS3动画的基础是`@keyframes`规则，它定义了一个动画从开始到结束的各个阶段。例如： ```css @keyframes slideIn { 0% { transform: translateX(-100%); } 100% { transform: ...
1. **@keyframes 规则**：这是CSS3动画的核心，定义了一个动画的过程，即从一个样式变化到另一个样式。它由一个名称和一系列百分比关键帧组成，每个关键帧代表动画过程中的一个状态。 ```css @keyframes example { ...
CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它引入了许多新的特性和功能，其中最引人注目的就是动画效果。在本主题“CSS3动画图标效果”中，我们将深入探讨如何利用CSS3来创建富有动态感的图标...
CSS3 Animation是通过`@keyframes`规则定义动画过程，并结合`animation`属性来应用动画。`@keyframes`定义了动画从开始到结束的状态变化，而`animation`属性则控制动画的执行方式，如时长、延迟、次数、方向等。 ##...
**CSS3 动画源码详解** 在网页设计领域，CSS3的引入为开发者提供了前所未有的动态效果制作能力。无需依赖像Flash这样的外部插件，我们可以通过CSS3的`animation`属性来创建丰富的动画效果，使得网页更具交互性和...
在网页设计中，CSS3（层叠样式表第三版）为开发者带来了许多创新特性，其中鼠标悬停动画就是一种增强用户体验的重要方式。通过利用CSS3的:hover伪类和各种动画属性，我们可以创建出丰富多彩的交互效果，使得用户在...
CSS3动画通过`@keyframes`规则定义，它允许我们创建从一种样式到另一种样式的平滑过渡。例如，我们可以创建一个简单的淡入淡出动画： ```css @keyframes fadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } ...
1. `@keyframes` 规则：CSS3动画的核心是`@keyframes`，它定义了一个动画的过程，从起始状态到结束状态的各个阶段。例如： ```css @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } ``` 上述例子...
在网页设计领域，CSS3（层叠样式表第三版）为开发者带来了许多创新特性，其中动画效果是增强用户体验的关键部分。本主题将深入探讨“div CSS3动画带有的按钮”这一概念，以及如何利用CSS3样式表属性创建动态、吸引人...
在这个例子中，`border-radius`创建了一个圆形，不同颜色的边框创建了旋转动画的视觉效果，`animation`属性结合了我们之前定义的`rotating`关键帧动画，`2s`是动画的持续时间，`linear`表示匀速执行，`infinite`则让...
animate.css是一个非常强大的开源CSS3动画库，它集合了大约50种预定义的动画效果，为开发者提供了极大的便利。在本文中，我们将深入探讨animate.css的功能、用法以及如何将其应用于实际项目中。 ### 1. 动画种类与...
在“css3鼠标悬停动画效果”这个主题中，我们将深入探讨如何利用CSS3实现当鼠标悬停在元素上时产生动态效果的技术。 首先，让我们了解CSS3中的关键帧动画（@keyframes）。关键帧动画允许开发者定义一个动画过程中的...
1. **@keyframes规则**：CSS3动画的核心是`@keyframes`规则，它定义了一个动画的过程，从初始状态到最终状态。例如： ```css @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { ...
这个例子定义了一个淡入动画，元素在开始时透明度为0，结束时透明度为1。 2. **动画属性**：要应用动画，需要设置`animation`属性，包括`animation-name`、`animation-duration`、`animation-timing-function`、`...
在CSS3中，动画是通过关键帧（@keyframes）规则来定义的。关键帧定义了动画从一个状态过渡到另一个状态的过程。例如，我们可以定义一个元素从左向右移动的动画： ```css @keyframes slideInFromLeft { 0% { ...
在CSS3中，`animation`属性是一个强大的工具，它允许我们创建复杂的动态效果，比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力，还能提供更好的交互体验。接下来，我们将深入...
在本文中，我们将深入探讨如何使用CSS3来创建一个引人注目的动画效果：圆形从中心向四周扩散。这个效果可以用于网站加载指示器、按钮激活反馈等多种应用场景，为用户界面增添动态美感。 首先，我们需要了解CSS3中的...
标题"css3动画效果"直指这一技术的核心，即通过CSS3实现的各种视觉变换和动效。描述中提到“不支持ie10以下的ie浏览器”，意味着我们需要关注兼容性问题，尤其是针对那些不再更新或市场份额较低的浏览器，如Internet...
通过实践这些CSS3的例子，你将掌握现代网页设计的关键技巧，并能创建出更具吸引力和交互性的网页。无论是新手还是经验丰富的开发者，深入理解和熟练运用CSS3都是提升设计能力的必备步骤。在学习过程中，不断尝试和...