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);
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="M36.1 51.5l6.5 88.6c15.4 4.9 30.5 5 45.1.4l7-87.6-58.6-1.4z" /><path fill="#503B36" d="M37.7 75.5l2.4 34.3a102 102 0 0 0 50.6.4l3-33.3c-19 6.1-56 2-56-1.4z" /><path fill="#C9AB8D" d="M82.3 137c.1.2-.3.6-1 1.2l-1.6 1c-.4 0-.7.2-1 .4l-1.2.4a46.9 46.9 0 0 1-26.8 0c-1.6-.4-2.9-1-3.7-1.4-1-.4-1.4-.8-1.3-1s.6-.1 1.5 0l4 .7a73.4 73.4 0 0 0 27-.3l1-.2 1.6-.5c.8-.3 1.4-.4 1.5-.3z" /><path fill="#503B36" d="M38.5 46.1l-.3-5.6s-.6-3.5 11.9-5.2c12.4-1.6 34.2-.5 40.6 3.7 0 0 1.2.1 1.6 7.7 0 0 9.3 6.7 3 10.4-14.6 8.6-36.6 7.6-48.9 5-4.7-1-9-3.1-12.5-6.6v-1.3c0-2.4 1-4.6 2.7-6.2l1.9-1.9z" /><path fill="#352624" d="M81.5 42.1c1.7 0 3.4-.2 5-.5.3-.1.6-.2.7-.5 0-.3-.3-.5-.6-.6-.6-.3-1.2-.5-1.8-.2-.2 0-.3.2-.5.3a2 2 0 0 1-.9 0h-2.9l-.4.1c-.2.2-.2.5 0 .8.1.2.4.3.6.3a5 5 0 0 0 2 .1" /><path fill="#352624" d="M88.7 41.8v-.5c-.1-.3-.3-.7-.7-1-.9-.5-2.9-.5-5.2-.8C78 38.9 71.7 38 64.6 38h-5.2l-4.9.1-4.3.4-1 .1-1 .1-1.8.3-3 .4a3 3 0 0 0-1.1.5l-.2.2v.1c-.1.4.2.8.4.9h.5v.3l-.5.2c-.5 0-1.2-.3-1.5-1.2l.1-.9.2-.2.2-.4c.4-.4.9-.6 1.4-.8l1.5-.5 1.7-.4 1.8-.4 1-.2 1-.2 4.4-.6 5-.4h5.3a99 99 0 0 1 21.6 3 5 5 0 0 1 2.4 1.2c.6.6.7 1.3.5 1.7-.1.5-.4.5-.4.5z" /><path fill="#352624" d="M88.9 42.3c0 .2-.6.5-1.7.9a24 24 0 0 1-5 .8 262.7 262.7 0 0 1-33-.3c-2.2-.3-4-.8-5-1.3-1.2-.5-1.7-1-1.6-1.1 0-.2.7 0 1.9.1 1 .2 2.7.4 4.8.5l7.3-.1a387.3 387.3 0 0 1 25.5.4 67 67 0 0 0 6.8.1zM89.9 47c0 .4-2.7 1-7.3 1.8-1.2.2-2.4.5-3.8.6l-4.3.4-4.7.4h-1.3l-.7.1h-.6l-2.6.1a59 59 0 0 1-18.1-1.9c-2.3-.7-4-1.4-5.2-2.1-1.1-.6-1.7-1-1.6-1.2 0-.2.8 0 2 .3l5.2 1.3a83 83 0 0 0 17.6 1H68.3a399.3 399.3 0 0 0 10.4-.5l3.7-.3c4.6-.3 7.4-.3 7.5 0zM94.3 52.6l-.3.6-.4.7-.8.7a16.6 16.6 0 0 1-6.2 3.1c-2.7.8-5.9 1.7-9.6 2.5l-2.9.5-2.9.4c-2.1.2-4.2.4-6.4.3-4.4 0-8.5-.4-12.2-1.3-1.9-.3-3.6-.9-5.2-1.3L43 57l-3.5-1.6c-1-.5-1.8-1-2.5-1.6l-1.3-1.4c-.1-.4-.2-.6-.1-.7 0 0 .2 0 .6.4l1.4 1 2.5 1 3.6 1.2 4.3 1.3c1.6.3 3.2.8 5 1 3.6.7 7.6 1.1 11.8 1.1l6-.2 3-.4c1 0 1.9-.3 2.8-.4l9.6-1.8c2.7-.6 4.7-1.4 6-2.2l.8-.5.6-.4c.4-.3.6-.4.7-.3z" /><path fill="#462D41" class="eyebrow" d="M85.7 70.1c-.4.1-.9-.5-1.5-1.3a4 4 0 0 0-..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0