作者：云沏-茶 | 来源：互联网 | 2023-05-19 09:43
写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下：1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻
写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下：
1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻合）。
2.做出另一组div更换背景色即可实现反方向的旋转。
代码如下：
DOCTYPE html>
<html>
<head>
<style>
.outer{
position:relative;
left:100px;
top:100px;
height:100px;
width:100px;
}
.cont1,.cont2{
position:absolute;
height:100%;
width:100%;
border-radius:50px;
overflow: hidden;
}
.cont1{
background:red;
opacity:1;
animation:hide 4s steps(1,end) infinite;
}
.cont2{
background:blue;
opacity:0;
animation:show 4s steps(1,end) infinite;
}
.rotateDiv{
position:absolute;
left:0;
top:0;
border-radius:50px 0 0 50px;
background:blue;
height:100%;
width:50%;
transform-origin:center right;
animation:rotate 2s infinite linear;
/* transition:transform 2s;*/
}
.right{
position:absolute;
left:50px;
top:0;
border-radius:0 50px 50px 0;
background:blue;
height:100%;
width:50%;
opacity:1;
animation: hide 2s steps(1,end) infinite;
}
.left{
position:absolute;
left:0;
top:0;
border-radius:50px 0 0 50px;
background:red;
height:100%;
width:50%;
opacity:0;
animation: show 2s steps(1,end) infinite;
}
/* .left-rotate:hover{
transform:rotate(180);*/
.cont2 .rotateDiv, .cont2 .right{
background:red;
}
.cont2 .left{
background:blue;
}
/*css动画*/
@keyframes rotate
{
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
@keyframes show
{
0% {opacity:0;}
50%,100% {opacity:1;}
}
@keyframes hide
{
0% {opacity:1;}
50%,100% {opacity:0;}
}
style>
head>
<body>
//css3动画
<div class="outer">
<div class="cont1">
<div class="rotateDiv">div>
<div class="right">div>
<div class="left">div>
div>
<div class="cont2">
<div class="rotateDiv">div>
<div class="right">div>
<div class="left">div>
div>
div>
body>
html>
其中用到了一个css3,动画的step(1,end)，不太理解。。。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 