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=&.........完整代码请登录后点击上方下载按钮下载查看