checkbox选中动画效果-html代码-BFW代码库

checkbox选中动画效果

代码语言：html

代码描述：checkbox选中动画效果

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body
{
  background-color:#f3f3f3;
}

.bg-container
{
      position: absolute;
    top: 20%;
    width: 100%;
}

.box
{
    position: absolute;
    top: 0;
    transform: rotate(80deg);
    left: 20%;
}

.wave {
    position: absolute;
    opacity: .4;
    width: 1200px;
    height: 1000px;
    border-radius: 43%;
}

.wave.one {
    animation: rotate 7000ms infinite linear;
    opacity: .1;
    background: rgba(149, 84, 255, 0.31);
}

.wave.two {
    animation: rotate 3000ms infinite linear;
    opacity: .1;
    background: rgba(149, 84, 255, 0.31);
}

.wave.three {
    animation: rotate 7500ms infinite linear;
    background-color: rgba(149, 84, 255, 0.31);
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}


#shape10,#shape9,#shape8,#shape1
{
      transform-box: fill-box;
    transform-origin: center;
  -webkit-animation: rotate-center 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate both;
	        animation: rotate-center 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite alternate both;
}

#cir1,#cir2,#cir3
{
  transform-box: fill-box;
    transform-origin: center;
  -webkit-animation: rotate-scale-down-diag-2 2s linear infinite both;
	        animation: rotate-scale-down-diag-2 2s linear infinite both;
}

#cir4,#cir5,#cir6
.........完整代码请登录后点击上方下载按钮下载查看