前几天面试遇到写动画效果;于是今天就再想写个时钟效果分享。
<!DOCTYPE html>
<html lang="en">
<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>animation</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#wrap{
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
position:relative;
margin: 100px auto;
}
#hour{
height: 120px;
width: 10px;
/* border: 1px solid red; */
background-color: red;
position: absolute;
top:30px;
left: 145px;
transform-origin: 5px 120px;
/* transform: rotate(45deg); */
animation: move 6s linear infinite;
}
#minute{
height: 100px;
width: 10px;
background-color: red;
position: absolute;
top:50px;
left: 145px;
transform-origin: 5px 100px;
animation: move 60s linear infinite;
}
@keyframes move{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
ul li{
display: block;
width: 200px;
height: 200px;
position: absolute;
left: 45px;
top: 40px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="number">
<ul>
<li style="transform: rotate(75deg);"><div style="width:0; height:0; transform: rotate(-75deg);">1</div></li>
<li style="transform: rotate(105deg);"><div style="width:0; height:0; transform: rotate(-105deg);">2</div></li>
<li style="transform: rotate(135deg);"><div style="width:0; height:0; transform: rotate(-135deg);">3</div></li>
<li style="transform: rotate(165deg);"><div style="width:0; height:0; transform: rotate(-165deg);">4</div></li>
<li style="transform: rotate(195deg);"><div style="width:0; height:0; transform: rotate(-195deg);">5</div></li>
<li style="transform: rotate(225deg);"><div style="width:0; height:0; transform: rotate(-225deg);">6</div></li>
<li style="transform: rotate(255deg);"><div style="width:0; height:0; transform: rotate(-255deg);">7</div></li>
<li style="transform: rotate(285deg);"><div style="width:0; height:0; transform: rotate(-285deg);">8</div></li>
<li style="transform: rotate(315deg);"><div style="width:0; height:0; transform: rotate(-315deg);">9</div></li>
<li style="transform: rotate(345deg);"><div style="width:0; height:0; transform: rotate(-345deg);">10</div></li>
<li style="transform: rotate(375deg);"><div style="width:0; height:0; transform: rotate(-375deg);">11</div></li>
<li style="transform: rotate(45deg);"><div style="width:0; height:0; transform: rotate(-45deg);">12</div></li>
</ul>
</div>
<div id="hour"></div>
<div id="minute"></div>
</div>
</body>
<script>
</script>
</html>
另外再分享一个案例给大伙(一个旋转的类似“八卦”的布局以及控制旋转速度)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无敌风火轮</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.ding {
position:absolute;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 50%;
background-color: rgba(255,255,0,0.1);
box-shadow: 5px 5px 180px 0px darkred;
}
.wrap{
width: 280px;
height: 280px;
border: 1px solid lightsteelblue;
border-radius: 50%;
margin: 110px 110px;
background-color: white;
position: relative;
box-shadow: 0px 0px 25px 15px red;
transform-origin: 141px 141px;
animation:xuanzhuan 20s linear infinite;
}
@keyframes xuanzhuan {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.lis{
position: absolute;
border: 1px solid brown;
background-color: cornsilk;
/*设置旋转圆心*/
}
.li1{
width: 85px;
height: 85px;
left: 40px;
top: 40px;
border-top-width:5px;
border-bottom-width:5px;
border-top-right-radius: 90%;
border-bottom-left-radius:90%;
}
.li2{
width: 85px;
height: 85px;
left: 155px;
top: 40px;
border-right-width:5px;
border-left-width:5px;
border-top-left-radius: 90%;
border-bottom-right-radius:90%;
}
.li3{
width: 85px;
height: 85px;
top: 155px;
left: 40px;
border-left-width:5px;
border-right-width:5px;
border-top-left-radius: 90%;
border-bottom-right-radius:90%;
}
.li4{
width: 85px;
height: 85px;
left: 155px;
top: 155px;
border-top-width:5px;
border-bottom-width:5px;
border-top-right-radius: 90%;
border-bottom-left-radius: 90%;
}
.cen{
position: absolute;
left: 119px;
top: 119px;
width: 40px;
height: 40px;
border:1px solid brown;
background-color: bisque;
border-radius: 50%;
}
span{
text-align: center;
width: 100px;
line-height: 30px;
float: left;
margin-left: 40px;
/*设置3D艺术字*/
-webkit-text-stroke:4px orange;
color:white;
font-size:60px;
font-weight:bolder;
text-shadow:5px 4px 4px red;
cursor:pointer;
}
.tip1 {
position: absolute;
left: 139px;
top: 120px;
height: 20px;
width: 10px;
border-bottom: 1px solid brown;
border-right: 1px solid brown;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/*clip: rect(0px,0px,0px,0px);*/
}
.tip2 {
position: absolute;
left: 131px;
top: 140px;
height: 20px;
width: 10px;
border-top: 1px solid brown;
border-left: 1px solid brown;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.tip3 {
position: absolute;
left:138px;
top: 128px;
width: 4px;
height: 4px;
border: 1px solid black;
border-radius: 50%;
background-color: red;
}
.tip4 {
position: absolute;
left:138px;
top: 148px;
width: 4px;
height: 4px;
border: 1px solid black;
border-radius: 50%;
background-color: #27b0f6;
}
</style>
</head>
<body>
<div class="ding"></div>
<div class="wrap">
<ul>
<li><div class="lis li1"></div></li>
<li><div class="lis li2"></div></li>
<li><div class="lis li3"></div></li>
<li><div class="lis li4"></div></li>
</ul>
<div class="cen"></div>
<div class="tip1"></div>
<div class="tip2"></div>
<div class="tip3"></div>
<div class="tip4"></div>
</div>
<div class="speed">
<h2>加速器</h2><br>
<span οnclick="speed_Quick(10,0)">1挡</span>
<span οnclick="speed_Quick(5,1)">2挡</span>
<span οnclick="speed_Quick(1,2)">3挡</span>
<span οnclick="speed_Quick(0.5,3)">4挡</span>
<span οnclick="speed_Quick(0.01,4)">5挡</span>
</div>
</body>
<script>
var wrap=document.querySelector(".wrap");
var ding=document.querySelector(".ding");
//wrap.style.animationDuration="20s";
var color = ["5px 5px 180px 20px darkred","5px 5px 150px 30px darkred","10px 10px 80px 30px darkred","10px 10px 50px 35px darkred","10px 10px 15px 10px darkred"];
function speed_Quick(e,f){
wrap.style.animationDuration = e +"s";
ding.style.boxShadow = color[f];
}
</script>
</html>