css3 animation实现风车转动
项目中经常有用到动画效果，比如Loading、风车转动等等。最简单的办法是使用gif，但是gif在半透明背景下有白边，体验不友好，好在现在可以使用css3的anmiation来实现动画效果，极大的提升了用户体验。下面是风车转动效果实现demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>风车 - css3动画示例</title>
<style type="text/css">
.windmill {
width: 110px;
height: 160px;
overflow: hidden;
background: url(http://115.29.225.190/fiddle/css3/windmill.png) no-repeat;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-animation: earthDay 2.5s linear infinite;
animation: earthDay 2.5s linear infinite;
}
@keyframes earthDay {
7.99% {
background-position: 0 0;
}
8% {
background-position: 0 -160px;
}
15.99% {
background-position: 0 -160px;
}
16% {
background-position: 0 -320px;
}
23.99% {
background-position: 0 -320px;
}
24% {
background-position: 0 -480px;
}
31.99% {
background-position: 0 -480px;
}
32% {
background-position: 0 -640px;
}
39.99% {
background-position: 0 -640px;
}
40% {
background-position: 0 -800px;
}
47.99% {
background-position: 0 -800px;
}
48% {
background-position: 0 -960px;
}
55.99% {
background-position: 0 -960px;
}
56% {
background-position: 0 -1120px;
}
63.99% {
background-position: 0 -1120px;
}
64% {
background-position: 0 -1280px;
}
71.99% {
background-position: 0 -1280px;
}
72% {
background-position: 0 -1440px;
}
79.99% {
background-position: 0 -1440px;
}
80% {
background-position: 0 -1600px;
}
87.99% {
background-position: 0 -1600px;
}
88% {
background-position: 0 -1760px;
}
99.99% {
background-position: 0 -1760px;
}
100% {
background-position: 0 -160px;
}
}
@-webkit-keyframes earthDay {
7.99% {
background-position: 0 0;
}
8% {
background-position: 0 -160px;
}
15.99% {
background-position: 0 -160px;
}
16% {
background-position: 0 -320px;
}
23.99% {
background-position: 0 -320px;
}
24% {
background-position: 0 -480px;
}
31.99% {
background-position: 0 -480px;
}
32% {
background-position: 0 -640px;
}
39.99% {
background-position: 0 -640px;
}
40% {
background-position: 0 -800px;
}
47.99% {
background-position: 0 -800px;
}
48% {
background-position: 0 -960px;
}
55.99% {
background-position: 0 -960px;
}
56% {
background-position: 0 -1120px;
}
63.99% {
background-position: 0 -1120px;
}
64% {
background-position: 0 -1280px;
}
71.99% {
background-position: 0 -1280px;
}
72% {
background-position: 0 -1440px;
}
79.99% {
background-position: 0 -1440px;
}
80% {
background-position: 0 -1600px;
}
87.99% {
background-position: 0 -1600px;
}
88% {
background-position: 0 -1760px;
}
99.99% {
background-position: 0 -1760px;
}
100% {
background-position: 0 -160px;
}
}
</style>
</head>
<body>
<div class="windmill"> </div>
</body>
</html>
css3 Animation目前浏览器的支持情况：
IE10+
FF31+
Chrome31 - 42支持带-webkit-前缀的，Chrome43+支持标准
Safari7 - 8 支持带-webkit-前缀的
Opera28 - 29支持带-webkit-前缀的，Opera30+支持
iOS Safari7.1 - 8.3支持带-webkit-前缀的
最新文章
- Mac下配置Apache + Php + Mysql环境
- 腾讯网2016回响中国：华清远见荣获2016年度知名IT培训品牌
- 解决“HTTP/1.1 405 Method not allowed”问题
- FIFO深度
- HDU 2277 Change the ball
- python笔记一
- PHP clone
- DevSecOps 简介（一）
- []cp,转载]提示MyEclipse Trial Expired，如何手动获取MyEclipse 注册码！很牛！
- python开发环境安装
- 男性在下一100层【第三层】——高仿手机银行client接口
- Swift - 多线程实现方式（1） - NSThread
- Android本地视频播放器开发--视频解码
- slf4j与logback对接是如何将日志写到控制台的
- 微信小程序之页面下拉刷新
- HTTPS的原理解析
- 笔记：XML-解析文档
- entity framework codefirst 用户代码未处理DataException，InnerException基础提供程序在open上失败，数据库生成失败
- L2-008. 最长对称子串（思维题）*
- Ymodem协议(参考STM32)