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

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

代码语言：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);
 .........完整代码请登录后点击上方下载按钮下载查看