css实现情侣亲嘴秀恩爱动画效果代码-html代码-BFW代码库

css实现情侣亲嘴秀恩爱动画效果代码

代码语言：html

所属分类：表白

代码描述：css实现情侣亲嘴秀恩爱动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta charset="UTF-8">
<style>
    body{
  background-color:#78e08f;
  margin:0;
}

.container{
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width:232px;
}

.face{
  width:70px;
  height:30px;
  position:absolute;
  right:0;
  top:30px;
  border-top-right-radius:15px;
}

#r-ball{
  animation: kiss 4s ease infinite;
  background-color:white;
}

@keyframes kiss{
  40%{transform:translate(0px);}
  50%{transform:translate(30px) rotate(20deg);}
  60%{transform:translate(-33px);}
  67%{transform:translate(-33px);}
  77%{transform:translate(0px);}
}

.kiss{
  background-colo:red;
  width:13px;
  height:10px;
  background-color:white;
  border-radius:50%;
  border-left:5px solid;
}

.kiss-m{
  position:absolute;
  left:20px;
  top:22px;
  opacity:0;
  animation:kiss-m 4s ease infinite;
}

@keyframes kiss-m{
  0%{opacity:0;}
  55%{opacity:0;}
  55.1%{opacity:1;}
  66%{opacity:1;}
  66.1%{opacity:0;}
}

.mouth-r{
  animation:mouth-m 4s ease infinite;
}

@keyframes mouth-m{
  0%{opacity:1;}
  54.9%{opacity:1;}
  55%{opacity:0;}
  66%{opacity:0;}
  66.1%{opacity:1;}
}

.face:after{
  position:absolute;
  content:"";
  width:18px;
  height:8px;
  background-color:#badc58;
  left:-5px;
  top:20px;
  border-radius:50%;
}

.face:before{
  position:absolute;
  content:"";
  width:18px;
  height:8px;
  background-color:#badc58;
  right:-8px;
  top:20px;
  border-radius:50%;
  z-index:-1;
}

.face-r{
  left:0;
  top:37px;
}

.face-r:after{
  width:10px;
  height:10px;
  left:5px;
}

.face-r:before{
  width:10px;
  height:10px;
  right:-4px;
}
.eye{
  width:15px;
  height:14px;
  border-radius:50%;
  border-bottom:5px solid;
  position:absolute;
}

.eye-r-p{
  border-top:5px solid;
  border-bo.........完整代码请登录后点击上方下载按钮下载查看