css+svg实现两个咖啡杯相爱表白效果代码-html代码-BFW代码库

代码语言：html

所属分类：表白

代码描述：css+svg实现两个咖啡杯相爱表白效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Quicksand'>
    <style>
        body {
        background:#b79483;
        overflow:hidden;
        font-family:"Quicksand";
    }
    .header {
        position:absolute;
        left:10px;
        top:10px;
    }
    .header h1,.header h2 {
        margin:0;
    }
    .header h1 {
        color:#352624;
    }
    .header .number {
        color:#FFF;
    }
    .header .type {
        color:#503b36;
    }
    .header .social a img {
        margin-top:10px;
        height:1.5em;
    }
    .content {
        margin-top:100px;
    }
    .content .description {
        color:#EEE;
        text-align:center;
    }
    .content svg {
        position:absolute;
        bottom:0;
        height:80%;
        width:80%;
        left:10%;
    }
    .content svg #rightLip {
        -webkit-transform-origin:center;
        transform-origin:center;
        -webkit-animation:kissLeft 3s linear infinite alternate;
        animation:kissLeft 3s linear infinite alternate;
    }
    .content svg #leftLip {
        -webkit-transform-origin:center;
        transform-origin:center;
        -webkit-animation:kissRight 3s linear infinite alternate;
        animation:kissRight 3s linear infinite alternate;
    }
    .content svg #heart {
        -webkit-transform-origin:center;
        transform-origin:center;
        -webkit-animation:heart 3s linear infinite alternate;
        animation:heart 3s linear infinite alternate;
    }
    .content svg .cheek {
        -webkit-transform-origin:center;
        transform-origin:center;
        -webkit-animation:blush 3s linear infinite alternate;
        animation:blush 3s linear infinite alternate;
    }
    .content svg .eyebrow {
        -webkit-transform-origin:center;
        transform-origin:center;
        -webkit-animation:eyebrow 3s linear infinite alternate;
        animation:eyebrow 3s linear infinite alternate;
    }
    text {
        font-weight:bold;
        fill:#FFF;
    }
    text:hover {
        cursor:pointer;
    }
    @-webkit-keyframes heart {
        0% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:0.6;
    }
    100% {
        -webkit-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0.8;
    }
    }@keyframes heart {
        0% {
        -webkit-transform:scale(1);
        transform:scale(1);
        opacity:0.6;
    }
    100% {
        -webkit-transform:scale(0.8);
        transform:scale(0.8);
        opacity:0.8;
    }
    }@-webkit-keyframes kissLeft {
        0% {
        -webkit-transform:scale(0.9) rotate(0);
        transform:scale(0.9) rotate(0);
    }
    100% {
        -webkit-transform:scale(1) rotate(-5deg) translateX(-2px);
        transform:scale(1) rotate(-5deg) translateX(-2px);
    }
    }@keyframes kissLeft {
        0% {
        -webkit-transform:scale(0.9) rotate(0);
        transform:scale(0.9) rotate(0);
    }
    100% {
        -webkit-transform:scale(1) rotate(-5deg) translateX(-2px);
        transform:scale(1) rotate(-5deg) translateX(-2px);
    }
    }@-webkit-keyframes kissRight {
        0% {
        -webkit-transform:scale(0.9) rotate(0);
        transform:scale(0.9) rotate(0);
    }
    100% {
        -webkit-transform:scale(1) rotate(5deg) translateX(2px);
        transform:scale(1) rotate(5deg) translateX(2px);
    }
    }@keyframes kissRight {
        0% {
        -webkit-transform:scale(0.9) rotate(0);
        transform:scale(0.9) rotate(0);
    }
    100% {
        -webkit-transform:scale(1) rotate(5deg) translateX(2px);
        transform:scale(1) rotate(5deg) translateX(2px);
    }
    }@-webkit-keyframes blush {
        0% {
        opacity:0.4;
    }
    100% {
        opacity:1;
    }
    }@keyframes blush {
        0% {
        opacity:0.4;
    }
    100% {
        opacity:1;
    }
    }@-webkit-keyframes eyebrow {
        0% {
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
    }
    100% {
        -webkit-transform:translateY(1px);
        transform:translateY(1px);
    }
    }@keyframes eyebrow {
        0% {
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
    }
    100% {
        -webkit-transform:translateY(1px);
        transform:translateY(1px);
    }
    }
    </style>
</head>

<body>
    <div class="content">
        <h2 class="description">Click on the letters to change them!</h2><svg id="draw" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 150"><path fill="#D5C6AD" d=&.........完整代码请登录后点击上方下载按钮下载查看