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

代码语言：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
{
  transform-box: fill-box;
    transform-origin: center;
  -webkit-animation: rotate-scale-down-diag-2 1s linear infinite both;
	        animation: rotate-scale-down-diag-2 1s linear infinite both;
}



/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}





/**
 * ----------------------------------------
 * animation rotate-scale-down-diag-2
 * ----------------------------------------
 */
@-webkit-keyframes rotate-scale-down-diag-2 {
  0% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
            transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
            transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 360deg);
            transform: scale(1) rotate3d(-1, 1, 0, 360deg);
  }
}
@keyframes rotate-scale-down-diag-2 {
  0% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 0deg);
            transform: scale(1) rotate3d(-1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
            transform: scale(0.5) rotate3d(-1, 1, 0, 180deg);
  }
  100% {
    -webkit-transform: scale(1) rotate3d(-1, 1, 0, 360deg);
            transform: scale(1) rotate3d(-1, 1, 0, 360deg);
  }
}



#_checkbox
{
    display: none;
}

label
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: #f72414;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: 0 7px 10px #ffbeb8;
    cursor: pointer;
    transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
    overflow: hidden;
    z-index: 1;
  border: 2px solid rgba(0, 0, 0, 0.44);
}

label:before
{
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    background-color: #fff;
    transform: translateY(-50%);
    border-radius: 50%;
    box-shadow: inset 0 7px 10px #ffbeb8;
    transition: 0.2s ease width, 0.2s ease height;
     border: 1px solid black;
}

label:hover:before
{
    width: 55px;
    height: 55px;
    box-shadow: inset 0 7px 10px #ff9d96;
}

label:active
{
    transform: translateY(-50%) scale(0.9);
}

#tick_mark
{
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    width: 60px;
    height: 60px;
    m.........完整代码请登录后点击上方下载按钮下载查看