博客信息
程序员自制风扇源码，夏天送清凉
发布时间：『 2020-07-14 21:06』 博客类别：Java核心基础 阅读(1850) 评论(0)
夏天太热，需要风扇，来一段Html5风扇源码；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@keyframes leafRotate {
0% {
transform: rotate(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}
#fan {
width: 230px;
position: absolute;
z-index: 10;
margin: auto;
left: 0;
right: 0;
top: 150px
}
#fan .header {
width: 230px;
height: 230px;
position: absolute;
left: -15px;
top: -15px;
background: #42c7ea;
border-radius: 50%;
z-index: 10;
border: 2px solid #0e6873;
}
#fan .mask {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px solid #0e6873;
position: relative;
background: #e4ecef;
z-index: 11;
}
#fan .mask .logo {
border: 2px solid #0e6873;
border-radius: 50%;
position: absolute;
width: 80px;
height: 90px;
text-align: center;
line-height: 90px;
color: #0e6873;
font-size: 14px;
top: 53px;
left: 58px;
background: #42c7ea;
z-index: 3;
}
#fan .mask .line {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
}
#fan .mask .line_1 {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
}
#fan .mask .line_2 {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
transform: rotate(30deg);
}
#fan .mask .line_3 {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
transform: rotate(60deg);
}
#fan .mask .line_4 {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
transform: rotate(90deg);
}
#fan .mask .line_5 {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
transform: rotate(120deg);
}
#fan .mask .line_6 {
width: 200px;
height: 2px;
background: #3c8a93;
position: absolute;
top: 99px;
z-index: 2;
transform: rotate(150deg);
}
#fan .mask .leafs {
z-index: 1;
position: absolute;
animation: leafRotate 0s infinite linear;
transform-origin: center center;
width: 200px;
height: 200px;
}
#fan .mask .leafs .leaf {
width: 72px;
height: 60px;
border-radius: 20% 40%;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
left: 100px;
top: 100px;
transform-origin: left top;
}
#fan .mask .leafs .leaf_1 {
width: 72px;
height: 60px;
border-radius: 20% 40%;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
left: 100px;
top: 100px;
transform-origin: left top;
}
#fan .mask .leafs .leaf_2 {
width: 72px;
height: 60px;
border-radius: 20% 40%;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
left: 100px;
top: 100px;
transform-origin: left top;
transform: rotate(120deg);
}
#fan .mask .leafs .leaf_3 {
width: 72px;
height: 60px;
border-radius: 20% 40%;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
left: 100px;
top: 100px;
transform-origin: left top;
transform: rotate(240deg);
}
#fan .neck {
width: 40px;
height: 70px;
border: 2px solid #0e6873;
background: #42c7ea;
position: absolute;
left: 80px;
z-index: 9;
border-radius: 0 0 5% 5%;
}
#fan .neck_footer {
width: 50px;
height: 20px;
border: 2px solid #0e6873;
background: #77e1f1;
position: absolute;
top: 263px;
left: 75px;
border-radius: 50%;
z-index: 8;
}
#fan .bottom {
width: 200px;
height: 80px;
border-radius: 50%;
border: 2px solid #0e6873;
background: #42c7ea;
position: absolute;
top: 250px;
left: 0px;
z-index: 7;
}
#fan .bottom_footer {
width: 20px;
height: 20px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 40%;
z-index: 6;
top: 310px;
}
#fan .bottom_footer_1 {
width: 20px;
height: 20px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 40%;
z-index: 6;
top: 310px;
left: 20px;
}
#fan .bottom_footer_2 {
width: 20px;
height: 20px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 40%;
z-index: 6;
top: 310px;
left: 160px;
}
#fan .switch {
position: absolute;
width: 24px;
height: 24px;
top: 296px;
z-index: 13;
opacity: 0;
cursor: pointer;
}
#fan .switch_btn {
display: inline-block;
text-align: center;
width: 18px;
height: 20px;
line-height: 20px;
font-size: 12px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 50%;
color: #0e6873;
cursor: pointer;
top: 296px;
z-index: 12;
transform: rotateX(45deg);
}
#fan .switch_0 {
position: absolute;
width: 24px;
height: 24px;
top: 296px;
z-index: 13;
opacity: 0;
cursor: pointer;
left: 50px;
}
#fan .switch_0:checked + div + input + div + input + div + input + div + .mask .leafs {
animation-play-state:paused;
}
#fan .switch_1 {
position: absolute;
width: 24px;
height: 24px;
top: 296px;
z-index: 13;
opacity: 0;
cursor: pointer;
left: 75px;
}
#fan .switch_1:checked + div {
background: #a9af27;
color: #0e6873;
}
#fan .switch_1:checked + div + input + div + input + div + .mask .leafs {
animation-duration: 0.7s;
}
#fan .switch_2 {
position: absolute;
width: 24px;
height: 24px;
top: 296px;
z-index: 13;
opacity: 0;
cursor: pointer;
left: 100px;
}
#fan .switch_2:checked + div {
background: #a9af27;
color: #0e6873;
}
#fan .switch_2:checked + div + input + div + .mask .leafs {
animation-duration: 0.4s;
}
#fan .switch_3 {
position: absolute;
width: 24px;
height: 24px;
top: 296px;
z-index: 13;
opacity: 0;
cursor: pointer;
left: 125px;
}
#fan .switch_3:checked + div {
background: #a9af27;
color: #0e6873;
}
#fan .switch_3:checked + div + .mask .leafs {
animation-duration: 0.3s;
}
#fan .switch_btn_0 {
display: inline-block;
text-align: center;
width: 18px;
height: 20px;
line-height: 20px;
font-size: 12px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 50%;
color: #0e6873;
cursor: pointer;
top: 296px;
z-index: 12;
transform: rotateX(45deg);
left: 50px;
}
#fan .switch_btn_1 {
display: inline-block;
text-align: center;
width: 18px;
height: 20px;
line-height: 20px;
font-size: 12px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 50%;
color: #0e6873;
cursor: pointer;
top: 296px;
z-index: 12;
transform: rotateX(45deg);
left: 75px;
}
#fan .switch_btn_2 {
display: inline-block;
text-align: center;
width: 18px;
height: 20px;
line-height: 20px;
font-size: 12px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 50%;
color: #0e6873;
cursor: pointer;
top: 296px;
z-index: 12;
transform: rotateX(45deg);
left: 100px;
}
#fan .switch_btn_3 {
display: inline-block;
text-align: center;
width: 18px;
height: 20px;
line-height: 20px;
font-size: 12px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 50%;
color: #0e6873;
cursor: pointer;
top: 296px;
z-index: 12;
transform: rotateX(45deg);
left: 125px;
}
#fan .on_off {
position: absolute;
width: 40px;
height: 20px;
top: 296px;
z-index: 13;
left: 80px;
opacity: 0;
cursor: pointer;
}
#fan .on_off:checked + div {
box-shadow: none;
}
#fan .on_off:checked + div + .mask .leafs {
animation: leafRotate 2s 1 ease-out;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#fan .on_off_btn {
display: inline-block;
text-align: center;
width: 40px;
height: 20px;
line-height: 20px;
font-size: 12px;
background: #bdcc2b;
border: 2px solid #0e6873;
position: absolute;
border-radius: 50%;
color: #0e6873;
cursor: pointer;
top: 296px;
z-index: 12;
left: 80px;
box-shadow: inset 2px 2px 6px #555;
}
</style>
</head>
<body>
<div id="fan">
<input type="radio" name="switch">
<div>0</div>
<input type="radio" checked="" name="switch">
<div>1</div>
<input type="radio" name="switch">
<div>2</div>
<input type="radio" name="switch">
<div>3</div>
<div>
<div>风扇</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>大伙可以运行试试看哈，贼爽...
关键字：
无
关注Java1234微信公众号
博主信息
Java1234_小锋
(知识改变命运，技术改变世界)
按日志类别
- Java核心基础(145)
- 007项目(5)
- SVN(22)
- QQ第三方登录(6)
- mybatis-plus(20)
- Mycat(30)
- Layui(2)
- Mysql(2)
- Docker(35)
- Dubbo(7)
- Git(50)
- SpringCloud(33)
- Tomcat(6)
- 支付宝接口(3)
- NodeJs(1)
- IDEA(24)
- SpringBoot(11)
- 微信扫码登录(4)
- Nginx(24)
- Vue.js(50)
- jsoup(6)
- shiro(1)
- webservice(10)
- CAS单点登录(7)
- elasticsearch(31)
- Redis(17)
- maven(6)
- 活动(20)
- hibernate(1)
- EhCache缓存框架(4)
- log4j日志(8)
- IT之路(26)
- activiti(26)
- centos(25)
- 随心生活(19)
- java爬虫技术(14)
- 网站SEO(2)
- httpclient(7)
- htmlunit(10)
按日志日期
- 2022年12月(1)
- 2021年10月(1)
- 2021年02月(3)
- 2020年11月(3)
- 2020年10月(4)
- 2020年09月(7)
- 2020年08月(18)
- 2020年07月(21)
- 2020年06月(37)
- 2020年05月(17)
- 2020年04月(12)
- 2020年03月(10)
- 2020年02月(14)
- 2020年01月(12)
- 2019年12月(15)
- 2019年11月(27)
- 2019年10月(5)
- 2019年09月(1)
- 2019年08月(4)
- 2019年07月(28)
- 2019年06月(16)
- 2019年05月(4)
- 2019年04月(3)
- 2019年03月(2)
- 2019年02月(7)
- 2019年01月(20)
- 2018年12月(2)
- 2018年11月(5)
- 2018年10月(30)
- 2018年09月(16)
- 2018年08月(5)
- 2018年07月(9)
- 2018年06月(4)
- 2018年05月(4)
- 2018年04月(3)
- 2018年03月(7)
- 2018年02月(6)
- 2018年01月(13)
- 2017年12月(3)
- 2017年11月(10)
- 2017年10月(1)
- 2017年09月(9)
- 2017年08月(12)
- 2017年07月(19)
- 2017年06月(21)
- 2017年05月(1)
- 2017年04月(12)
- 2017年03月(13)
- 2017年02月(12)
- 2017年01月(14)
- 2016年12月(8)
- 2016年11月(25)
- 2016年10月(16)
- 2016年09月(13)
- 2016年08月(20)
- 2016年07月(12)
- 2016年06月(36)
- 2016年05月(10)
- 2016年04月(19)
- 2016年03月(14)
- 2016年02月(23)
- 2016年01月(1)
友情链接
Powered by Java1234 V3.0
Copyright © 2012-2016 Java知识分享网 版权所有