纯css3制作情侣汤圆亲吻表白代码

寻梦xunm| 773| 收集

3年前

超过1210天温馨提示

本文最后更新于2021年05月28日，已超过1210天没有更新，若内容或图片失效，请留言反馈。

html代码:

<div class='container'>
    <div id='l-ball' class='ball'>
        <div class='face face-l'>
            <div class='eye eye-l'></div>
            <div class='eye eye-r'></div>
            <div class='mouth'></div>
        </div>
    </div><div id='r-ball' class='ball'>
        <div class='face face-r'>
            <div class='eye eye-l eye-r-p'></div>
            <div class='eye eye-r eye-r-p'></div>
            <div class='mouth mouth-r'></div>
            <div class='kiss-m'>
                <div class='kiss'></div>
                <div class='kiss'></div>
            </div>
        </div>
    </div>
</div>

CSS样式:

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-bottom:0px solid;
}

.eye-l{
  left:10px;
}

.eye-r{
  right:5px;
}

.mouth{
  width:30px;
  height:14px;
  border-radius:50%;
  border-bottom:5px solid;
  position:absolute;
  bottom:-5px;
  transform:translate(3px);
  left:0;
  right:0;
  margin: auto;
}

.ball{
  border: 8px solid;
  width:100px;
  height:100px;
  border-radius:50%;
  display:inline-block;
  vertical-align:top;
  position:relative;
}

#r-ball{
  position:relative;
  z-index:40;
}


#l-ball{
  animation: close 4s ease infinite;
  position:relative;
  z-index:50;
  background-color:#fff;
}

.face-l{
  animation: face 4s ease infinite;
}

@keyframes close{
  0%{transform:translate(0)}
  20%{transform:translate(20px)}
  35%{transform:translate(20px)}
  55%{transform:translate(0px)}
  100%{transform:translate(0px)}
}

@keyframes face{
  0%{transform:translate(0) rotate(0);}
  10%{transform:translate(0) rotate(0);}
  20%{transform:translate(5px) rotate(-2deg);}
  28%{transform:translate(0) rotate(0);}
  35%{transform:translate(5px) rotate(-2deg);}
  50%{transform:translate(0) rotate(0);}
  100%{transform:translate(0) rotate(0);}
}

代码来自:http://www.dmaku.com/jquery-2105.html

css 特效 html 表白情侣汤圆

本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。

0 赞 or 打赏

喜欢就打赏一点