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;}
}

.........完整代码请登录后点击上方下载按钮下载查看