如何使用html5与css3完成google涂鸦动画
今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来
这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。
我们先来看html代码。
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/google-doodle-animation-in-css3-without-javascript.css"/> </head> <body> <p id="logo"> <p class="frame"> <img src="img/muybridge12-hp-v.png"/> </p> <label for="play_button" id="play_label"></label> <input type="checkbox" id="play_button" name="play_button"/> <span id="play_image"> <img src="img/muybridge12-hp-p.jpg"/> </span> <p class="horse"></p> <p class="horse"></p> <p class="horse"></p> </p> </body> </html>
下面是部分css。
*{margin:0px;padding:0px;}
#logo{position: relative;}
.horse{
width:469px;
height:54px;
background:
url('../img/muybridge12-hp-f.jpg');
}
.frame{position:absolute;left:0;top:0;z-index: 1;}
#play_button{display:
none;}
#play_label{
width:67px;
height:54px;
display:block;
position: absolute;
left:201px;
top:54px;
z-index: 2;
}
#play_image{
position: absolute;
left:201px;
top:54px;
z-index: 0;
overflow: hidden;
width: 68px;
height: 55px;
}
#play_image img{
position: absolute;
left: 0;
top: 0;
}这部分代码没太大难度，我就不做详细讲解了。css基础不是很扎实的读者，也许会疑惑【开始】按钮是如何实现定位的。可以自行阅读position属性，了解absolute具体作用。
下面是上述html和css代码完成的页面效果。
下面我们来介绍如何产生动画效果。我们首先需要定义关键帧，他规定动画在不同阶段的效果。
我们创建了一个名为horse-ride的关键帧，针对chrome和firefox需要在前面添加-webkit-或者是-moz-前缀。0%和100%分别代码开始和结束，可以根据需要增加新的case，比如50%时的动画效果。
@-webkit-keyframes horse-ride {
% {background-position: 0 0;}
%
{background-position: -804px 0;}
}
@-moz-keyframes horse-ride {
%
{background-position: 0 0;}
% {background-position: -804px 0;}
}下面，我们来为horse添加css3的动画效果。
#play_button:checked ~.horse{
-webkit-animation:horse-ride 0.5s
steps(12,end) infinite;
-webkit-animation-delay:2.5s;
-moz-animation:horse-ride 0.5s steps(12,end) infinite;
-moz-animation-delay:2.5s;
background-position: -2412px 0;
-webkit-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 2.5s cubic-bezier(0.550, 0.055, 0.675, 0.190);
}这里首先介绍:checked和~，:checked是伪类，指当#play_button选中时的css效果，~指的是#play_button的兄弟节点。
接下来介绍.horse相关的css属性。animation中我们使用了4个值，依次代表：关键帧（我们上面定义的horse-ride），动画间隔时间，动画效果和执行次数。之后我们又通过animation-delay设置动画延迟时间。通过transition和background-position集合起来，设置背景的过渡动画。
最后我们为【开始】按钮添加动画效果。
#play_button:checked ~#play_image img{
left:-68px;
-webkit-transition:
all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
}
大家可以自己动手尝试开发了。
相关文章：
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
h5项目怎么运行
Apr 06, 2025 pm 12:21 PM
运行 H5 项目需要以下步骤：安装 Web 服务器、Node.js、开发工具等必要工具。搭建开发环境，创建项目文件夹、初始化项目、编写代码。启动开发服务器，使用命令行运行命令。在浏览器中预览项目，输入开发服务器 URL。发布项目，优化代码、部署项目、设置 Web 服务器配置。
H5页面制作究竟指什么
Apr 06, 2025 am 07:18 AM
H5 页面制作是指使用 HTML5、CSS3 和 JavaScript 等技术，创建跨平台兼容的网页。其核心在于浏览器解析代码，渲染结构、样式和交互功能。常见技术包括动画效果、响应式设计和数据交互。为避免错误，应使用开发者工具调试；而性能优化和最佳实践则包括图像格式优化、减少请求和代码规范等，以提高加载速度和代码质量。
h5怎么制作点击图标
Apr 06, 2025 pm 12:15 PM
制作 H5 点击图标的步骤包括：在图像编辑软件中准备方形源图像。在 H5 编辑器中添加交互性，设置点击事件。创建覆盖整个图标的热点。设置点击事件的操作，如跳转页面或触发动画。导出 H5 文档为 HTML、CSS 和 JavaScript 文件。将导出的文件部署到网站或其他平台。
H5页面制作适合哪些应用场景
Apr 05, 2025 pm 11:36 PM
H5（HTML5）适合应用于轻量级应用，如营销活动页面、产品展示页面和企业宣传微网站。它优势在于跨平台性和丰富的交互性，但局限性在于复杂的交互和动画、本地资源访问和离线功能。
H5指的是什么？探索上下文
Apr 12, 2025 am 12:03 AM
H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo
H5页面制作是前端开发吗
Apr 05, 2025 pm 11:42 PM
是的，H5页面制作是前端开发的重要实现方式，涉及HTML、CSS和JavaScript等核心技术。开发者通过巧妙结合这些技术，例如使用<canvas>标签绘制图形或使用JavaScript控制交互行为，构建出动态且功能强大的H5页面。
h5怎么制作弹窗
Apr 06, 2025 pm 12:12 PM
H5 弹窗制作步骤：1. 确定触发方式（点击式、时间式、退出式、滚动式）；2. 设计内容（标题、正文、行动按钮）；3. 设置样式（大小、颜色、字体、背景）；4. 实现代码（HTML、CSS、JavaScript）；5. 测试和部署。
什么是H5编程语言？
Apr 03, 2025 am 12:16 AM
H5不是独立编程语言，而是HTML5、CSS3和JavaScript的集合，用于构建现代Web应用。1.HTML5定义网页结构和内容，提供新标签和API。2.CSS3控制样式和布局，引入动画等新特性。3.JavaScript实现动态交互，通过DOM操作和异步请求增强功能。
