文章目录
- 1. 演示效果
- 2. 分析思路
- 3. 代码实现
1. 演示效果
2. 分析思路
- 先编写动画,让风扇先转起来。
- 使用 js 控制动画的持续时间。
- 监听按钮的点击事件,在事件中修改元素的
animation-duration
属性。
3. 代码实现
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8" />
meta name="viewport" content="width=device-width, initial-scale=1.0" />
title>手持小风扇/title>
style>
html,
body {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box {
position: relative;
width: 220px;
height: 420px;
}
.top-part {
width: 220px;
height: 220px;
box-sizing: border-box;
position: relative;
}
.top-part .left-box {
width: 220px;
height: 220px;
box-sizing: border-box;
border-radius: 50%;
border: 8px solid #333;
animation: myRotate infinite linear;
}
@keyframes myRotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.top-part .left-box .leaf {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 100px;
margin-left: -25px;
border-radius: 50%;
background-服务器托管color: rgb(106, 106, 235);
margin-top: -100px;
}
.top-part .left-box .leaf:nth-child(2) {
transform: rotate(120deg);
transform-origin: 50% 100%;
}
.top-part .left-box .leaf:nth-child(3) {
transform: rotate(240deg);
transform-origin: 50% 100%;
}
.line-box .line {
position: absolute;
top: 50%;
left: 0px;
width: 212px;
height: 2px;
background-color: #333;
z-index: 10;
}
.line-box .line:nth-child(2) {
transform: rotate(30deg);
}
.line-box .line:nth-child(3) {
transform: rotate(60deg);
}
.line-box .line:nth-child(4) {
transform: rotate(90deg);
}
.line-box .line:nth-child(5) {
transform: rotate(120deg);
}
.line-box .line:nth-child服务器托管(6) {
transform: rotate(150deg);
}
.line-box .mid-dot {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
background-color: #333;
z-index: 11;
border-radius: 50%;
}
.bom-part {
width: 50px;
height: 200px;
background-color: #333;
position: absolute;
top: 215px;
left: 50%;
margin-left: -25px;
}
.bom-part .item {
color: white;
width: 22px;
height: 22px;
background-color: rgb(106, 106, 235);
border-radius: 50%;
font-size: 13px;
display: flex;
justify-content: center;
align-items: center;
margin: 0px auto;
margin-top: 15px;
cursor: pointer;
}
/style>
/head>
body>
div class="box">
div class="top-part">
div class="line-box">
div class="line">/div>
div class="line">/div>
div class="line">/div>
div class="line">/div>
div class="line">/div>
div class="line">/div>
div class="mid-dot">/div>
/div>
div class="left-box">
div class="leaf">/div>
div class="leaf">/div>
div class="leaf">/div>
/div>
/div>
div class="bom-part">
div class="item" onclick="run(1)">1/div>
div class="item" onclick="run(0.5)">2/div>
div class="item" onclick="run(0.2)">3/div>
div class="item" onclick="run(0)">关/div>
/div>
/div>
script>
// 设置动画持续时间
function run(num) {
document.querySelector(".left-box").style.animationDuration = num + "s";
}
/script>
/body>
/html>
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
服务器托管网 1. 题意 给二进制串,求重新排列后的最大串。 2. 题解 统计1个数,将 C n t − 1 Cnt-1 Cnt−1个1放开头,其他除第0位都是0。 class Solution { public: string maximumOddBinar…