Java风车动画代码_纯DOM+CSS3实现简单的小风车动画
html>
小风车-转啊转
html {
font-size: 10px;
}
html * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.windmill {
width: 25rem;
min-height: 30rem;
height: auto;
margin: 3rem auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* 头部 */
.windmill-head {
height: 20rem;
width: 20rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: rotate-windmill 1s linear infinite;
animation: rotate-windmill 1s linear infinite;
border-radius: 50%;
border: 0.1rem solid #DBE526;
-webkit-transition: border-radius 2s linear;
transition: border-radius 2s linear;
}
/* 两片叶子的包裹层 */
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
height: 135%;
width: 50%;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/* 包裹层对称 */
.wrapper1 {
-webkit-transform: rotate(-45deg) translate(5rem);
transform: rotate(-45deg) translate(5rem);
-webkit-transform-origin: right center;
transform-origin: right center;
}
.wrapper2 {
-webkit-transform: rotate(45deg) translate(-5rem);
transform: rotate(45deg) translate(-5rem);
-webkit-transform-origin: left center;
transform-origin: left center;
}
/* 扇叶的形状及底色 */
.leaf {
height: 13rem;
width: 5rem;
border-radius: 5rem/ 5rem 5rem 20rem 20rem;
-webkit-box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);
box-shadow: 0.1rem 0.1rem 1rem rgba(64, 56, 56, .35) inset, 0.2rem 0.2rem 0.05rem rgba(0, 0, 0, .65);
}
.leaf1 {
border: 0.05rem solid #D1A23A;
-webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0);
background-color: rgba(230, 0, 100, 5);
background: -webkit-gradient(linear, left top, left bottom, from(#D02CE4), to(#f5f5f5));
background: -webkit-linear-gradient(top, #D02CE4, #f5f5f5);
background: linear-gradient(180deg, #D02CE4, #f5f5f5);
-webkit-transition: background 2s linear;
transition: background 2s linear;
}
.leaf2 {
border: 0.05rem solid #49D13A;
background-color: rgba(230, 0, 150, 5);
-webkit-transform: rotate(-180deg) translate(0);
transform: rotate(-180deg) translate(0);
background: -webkit-gradient(linear, left top, left bottom, from(#B91717), to(#f5f5f5));
background: -webkit-linear-gradient(top, #B91717, #f5f5f5);
background: linear-gradient(180deg, #B91717, #f5f5f5);
-webkit-transition: background 2s linear 2s;
transition: background 2s linear 2s;
}
.leaf3 {
border: 0.05rem solid #C6079D;
background-color: rgba(130, 0, 100, 5);
-webkit-transform: rotate(0deg) translate(0);
transform: rotate(0deg) translate(0);
background: -webkit-gradient(linear, left top, left bottom, from(#1CBA9F), to(#f5f5f5));
background: -webkit-linear-gradient(top, #1CBA9F, #f5f5f5);
background: linear-gradient(180deg, #1CBA9F, #f5f5f5);
-webkit-transition: background 2s linear;
transition: background 2s linear;
-webkit-transition: background 2s linear 4s;
transition: background 2s linear 4s;
}
.leaf4 {
border: 0.05rem solid #3A5FD1;
background-color: rgba(230, 100, 100, 5);
-webkit-transform: rotate(-180deg) translate(0);
transform: rotate(-180deg) translate(0);
background: -webkit-gradient(linear, left top, left bottom, from(#335642), to(#f5f5f5));
background: -webkit-linear-gradient(top, #335642, #f5f5f5);
background: linear-gradient(180deg, #335642, #f5f5f5);
-webkit-transition: background 2s linear 6s;
transition: background 2s linear 6s;
}
/* 尾部 */
.windmill-pillar {
-webkit-transform: translateZ(0);
transform: translateZ(0);
width: 3rem;
height: 20rem;
background: #FFF;
-webkit-transform: translateY(-52%);
transform: translateY(-52%);
position: relative;
z-index: -2;
border-radius: 50% 50% 0 0;
-webkit-animation: cd 2s linear infinite;
animation: cd 2s linear infinite;
}
@-webkit-keyframes rotate-windmill {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-windmill {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes cd {
0% {
background: #F5F5F5;
}
50% {
background: #E1CB82;
}
75% {
background: #F1F358;
}
100% {
background: #FFFC00;
}
}
@keyframes cd {
0% {
background: #F5F5F5;
}
50% {
background: #E1CB82;
}
75% {
background: #F1F358;
}
100% {
background: #FFFC00;
}
}
Java风车动画代码_纯DOM+CSS3实现简单的小风车动画相关推荐
- 如何用css3实现简单旋转的风车
如何用css3实现简单旋转的风车 在DW中想要实现旋转的风车就要使用关键帧keyframes来设置旋转,其实也没什么难度的.先设置它的样式,然后要用定位把它放到合适的位置就可以了. HTML的代码如下 ...
- Java制作二级导航菜单_纯CSS实现超简单的二级下拉导航菜单代码
本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且 ...
- java电子日记本代码_计算法日记将规则的价值视为无需计算机的代码
java电子日记本代码 I've been preparing a presentation for the Canadian Institute for the Administration of ...
- 用java写穿越火线代码_编写可测试的 JavaSript 代码
无论我们使用和Node配合在一起的测试框架,例如Mocha或者Jasmine,还是在像PhantomJS这样的无头浏览器中运行依赖于DOM的测试,和以前相比,我们有更好的方式来对JavaScript进 ...
- java三目运算符简化代码_如何使用传播运算符简化代码
java三目运算符简化代码 by Matt Granmoe 通过Matt Granmoe 如何使用传播运算符简化代码 (How to simplify your code with the sprea ...
- java 测试用例核心代码_核心Java测验
java 测试用例核心代码 Welcome to Core Java Quiz. Java is an object-oriented programming language. 欢迎来到Core J ...
- java局域网聊天代码_简单的局域网聊天程序（java版本的）
局域网聊天程序,首先我已经默认你的电脑已经配置好的java开发的一些环境,所需代码有两个java的源代码,他们分别是1:Server_Test.java-------2:Socket_Test.jav ...
- 用css做一个移动射击动画,如何使用纯CSS实现一只移动的小白兔动画效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 代码解读 定义 dom,页面中包含 2 个元素,分 ...
- CSS3制作旋转的小风车
制作旋转小风车 一 我先搭建一个大盒子400x400px大盒子里面嵌套四个小盒子200x200px,放在一起肯定是四个排在一行,我想要的效果是上下各两个, css样式 *{margin:0;paddi ...
最新文章
- ComponentArt TreeView for ASP.NET - Core Features
- Android系统匿名共享内存Ashmem（Anonymous Shared Memory）驱动程序源代码分析
- Java如何查看死锁？
- arcgis出界址点成果表_界址点成果表打印
- mysql志新计划,在使用Perl DBI迭代结果集时更新MySQL表是否安全？
- 台积电预计汽车芯片短缺在下一季度将有明显改善 他们已协调产能支持
- Java来做马里奥[0]—让精灵再次舞动
- 简易python爬虫 - 爬取站长论坛信息
- 汇编语言王爽（第四版）实验一
- 计算机网络原理中子网掩码,计算机网络应用 子网掩码计算器(SubNetMaskCalc)
- python中numpy下载问题
- Jmeter使用HTTP代理服务器无法打开网页问题的解决方法
- 通用数据权限的设计思路
- 【测试】对网易邮箱登录的测试流程
- idea切换Git分支时弹出Git Checkout problem
- 第三阶段应用层——1.8 数码相册—在LCD上显示JPG图片
- 一个40岁程序员的经历
- 计算机毕业设计ssm+vue基本微信小程序的“香草屋”饮料奶茶点单小程序
- 视频编辑工具：添加水印、特效、音乐、导出视频、视频转gif
- 推荐几款实现内网穿透的实用工具(转载）