http://www.oschina.net/code/snippet_2671046_55494
css文件
@charset "utf-8";
.loading{background:url(http://hovertree.com/texiao/css3/9/images/fcbg.png);width:320px;height:500px;margin:auto;position:relative;margin-top:200px;z-index:2}
.pic{
background:url(http://hovertree.com/texiao/css3/9/images/fc.png);position:absolute;z-index:1;right:60px;width:427px;height:430px;top:-170px;
-webkit-animation:load 2s linear 1s infinite;
-moz-animation:load 2s linear 1s infinite;
-ms-animation:load 2s linear 1s infinite;
-o-animation:load 2s linear 1s infinite;
animation:load 2s linear 1s infinite;
}
.fcc{background:url(http://hovertree.com/texiao/css3/9/images/fcc.png);position:absolute;z-index:3;right:230px;width:90px;height:97px;top:0}
@-webkit-keyframes load{
0%{
transform: rotate(0);
-ms-transform: rotate(0); /* IE 9 */
-webkit-transform: rotate(0); /* Safari and Chrome */
-o-transform: rotate(0); /* Opera */
-moz-transform: rotate(0); /* Firefox */
}
100%{
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-o-transform: rotate(360deg); /* Opera */
-moz-transform: rotate(360deg); /* Firefox */
}
}
<!DOCTYPE html>
<html>
<head>
<!-- 效果：http://hovertree.com/texiao/css3/9/ -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3转动的大风车 - 何问起</title><base target="_blank" />
<link href="http://hovertree.com/texiao/css3/9/hovertreefc/hovertreedfc.css" rel="stylesheet" type="text/css" />
<style>a{color:blue;}</style>
</head>
<body>
<div class="loading">
<div class="pic"></div>
<div class="fcc"></div>
</div>
<div><a href="http://hovertree.com/h/bjaf/h9tb5itb.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>
</body>
</html>
分享到：
相关推荐
在本项目中，“css3实现旋转风车动画特效.zip”是一个包含使用CSS3技术创建的动态风车动画的资源包。这个特效适用于网页设计和开发，可以为网站增添互动性和趣味性，尤其适合儿童或者游戏类网站。接下来，我们将详细...
【纯CSS3简单旋转风车动画特效】 在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了丰富的样式和动画效果，使得网页更加生动、有趣。本教程将深入讲解如何利用CSS3实现一个简单的旋转风车动画特效。通过...
【CSS3简单旋转风车动画特效】是一种利用现代浏览器支持的CSS3技术来实现的动态效果，它无需JavaScript，仅通过CSS3的属性和规则就能创建出富有视觉吸引力的旋转风车动画。在这个实例中，我们将深入探讨CSS3的关键...
这个压缩包文件“css3实现的旋转风车动画特效源码.zip”显然包含了一个利用CSS3技术实现的旋转风车动画的示例代码。通过分析这个源码，我们可以深入理解CSS3中的关键特性，特别是与动画相关的部分。 首先，CSS3中的...
【标题】"纯CSS3山村风车动画特效.zip"是一个以CSS3技术为核心的动画效果，旨在创建一个具有乡村风情的风车转动场景。这个动画特效不仅展示了CSS3的强大功能，还体现了设计师对细节的精细处理，让网页元素栩栩如生。...
在这个大风车动画中，Canvas被用作画布，JavaScript负责计算和更新风车叶片的旋转角度、速度以及与用户的交互。开发者可能使用了`requestAnimationFrame`方法来平滑地刷新动画，确保在每帧之间进行正确的计算，以...
【CSS3简单旋转风车动画特效详解】 在网页设计中，CSS3的引入极大地丰富了网页的视觉效果，其中动画效果就是一大亮点。本篇将详细介绍如何利用纯CSS3实现一个简单而有趣的旋转风车动画特效。 首先，我们需要了解...
在本资源中，我们主要探讨的是如何利用纯CSS3技术来创建一个简单的旋转风车动画特效。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它引入了许多新的特性和功能，极大地扩展了网页设计的可能性，特别是...
在大风车动画中，HTML5主要负责构建页面结构，通过`<div>`标签定义风车的各个部分，如叶片、轴心等，并使用`class`或`id`属性为每个元素赋予特定的标识，以便于CSS3选择器进行样式设置。 CSS3是级联样式表的第三次...
在本项目中，“css3绘制的风车小屋动画特效.rar”是一个包含使用CSS3技术创建的风车小屋动画效果的压缩包。这个压缩包里有两个主要文件：`style.css`是样式表文件，负责定义元素的外观和布局；`index.html`是HTML...
综上所述，这个"CSS3仿对啊网蓝色圆形大风车旋转特效"涉及到的关键CSS3知识点包括：关键帧动画（@keyframes）、`transform`的`rotate`、`border-radius`、颜色处理（包括渐变）、伪元素、布局定位以及浏览器兼容性...
在本资源中，我们拥有一个使用纯CSS3技术构建的小山村风车动画旋转场景特效的源码。这个项目展示了如何利用CSS3的强大功能来创建动态、引人入胜的前端视觉效果，无需依赖JavaScript或其他复杂的编程语言。接下来，...
在本项目"CSS3实现蓝色圆形风车旋转特效.zip"中，主要涉及的是前端开发中的CSS3技术，用于创建一个动态的、具有视觉吸引力的蓝色圆形风车旋转效果。这个效果通常会在网页中作为装饰元素或者互动效果使用，能够吸引...
【压缩包子文件的文件名称列表】"CSS3_fengche"表明文件可能包含了实现风车动画的核心CSS3代码。通常，这样的CSS文件会包含以下关键部分： 1. **选择器**：定义风车元素的样式，可能使用类名（class）或ID（id）...
【纯CSS3山村风车动画特效】是一种利用现代Web技术，特别是CSS3的强大功能，创建出的具有视觉吸引力的网页动态效果。这个特效主要展示了在静谧的山村夜晚，风车在微风中缓缓转动的场景，为网页增添了一丝宁静与诗意...
这是一款通过CSS animation创建的类似gif加载图片的纯css3加载loading动画插件。这个css3加载loading动画插件集成了5种炫酷效果，有旋转、放大缩小、风车效果和太阳系9大行星效果。
最后，压缩包中的文件"jiaoben4768"可能包含了实现这个特效的HTML、CSS和JavaScript代码，通过查看和分析这些文件，可以更直观地学习和理解这个风车动画的实现过程。记住，实践是最好的老师，动手尝试并不断优化，将...
CSS3（层叠样式表第三版）则进一步扩展了网页设计的可能性，尤其是其丰富的选择器、过渡、动画和特效功能。在风车网页中，CSS3可能应用了以下技术： 1. `transform` 属性：通过旋转、缩放、平移等变换，实现风车...
【午夜风车插画CSS3特效】是一个集创意与实用性于一体的网页特效资源。这个压缩包包含了一组基于CSS3技术实现的动态插画效果，适用于网页设计和开发。CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它极大...