css+svg实现猫与狗的爱情表白动画效果代码
代码语言：html
所属分类：表白
代码描述：采用css结合svg实现猫与狗的暧昧一线牵表白动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;
background: #0c2987;
}
.table-line {
width: 4vh;
max-width: 0.4rem;
height: 100vh;
background-color: #c45c75;
position: absolute;
}
.table-line:nth-child(0) {
left: 0%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(1) {
left: 3.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(2) {
left: 7%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(3) {
left: 10.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(4) {
left: 14%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(5) {
left: 17.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(6) {
left: 21%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(7) {
left: 24.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(8) {
left: 28%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(9) {
left: 31.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(10) {
left: 35%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(11) {
left: 38.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(12) {
left: 42%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(13) {
left: 45.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(14) {
left: 49%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(15) {
left: 52.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(16) {
left: 56%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(17) {
left: 59.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(18) {
left: 63%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(19) {
left: 66.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(20) {
left: 70%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(21) {
left: 73.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(22) {
left: 77%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(23) {
left: 80.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(24) {
left: 84%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(25) {
left: 87.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(26) {
left: 91%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(27) {
left: 94.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(28) {
left: 98%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(29) {
left: 101.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(30) {
left: 105%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(31) {
left: 108.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(32) {
left: 112%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(33) {
left: 115.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(34) {
left: 119%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(35) {
left: 122.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(36) {
left: 126%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(37) {
left: 129.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(38) {
left: 133%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(39) {
left: 136.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(40) {
left: 140%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(41) {
left: 143.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(42) {
left: 147%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(43) {
left: 150.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(44) {
left: 154%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(45) {
left: 157.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(46) {
left: 161%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(47) {
left: 164.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(48) {
left: 168%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.table-line:nth-child(49) {
left: 171.5%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(-60deg);
bottom: -100%;
}
.table-line:nth-child(50) {
left: 175%;
margin-left: -10rem;
margin-top: -10rem;
transform: rotate(40deg);
bottom: -50%;
}
.tramp,
.lady {
position: absolute;
height: 100vh;
transform: translate(-50%, -50%);
top: 50%;
z-index: 10;
}
.lady {
left: 70%;
transform-origin: 0% 50%;
animation: lady-animation 4s infinite;
}
@keyframes lady-animation {
0% {
transform: rotate(5deg) translate(-50%, -50%);
}
20% {
transform: rotate(0deg) translate(-50%, -50%);
}
50% {
transform: rotate(0deg) translate(-50%, -50%);
}
100% {
transform: rotate(5deg) translate(-50%, -50%);
}
}
@keyframes tramp-animation {
10% {
transform: rotate(-2deg) translate(-50%, -50%);
}
20% {
transform: rotate(0deg) translate(-50%, -50%);
}
80% {
transform: rotate(0deg) translate(-50%, -50%);
}
}
.tramp {
left: 30%;
transform-origin: 0% 50%;
animation: tramp-animation 4s infinite;
}
.table {
position: absolute;
background-color: #dadce8;
width: 100vw;
height: 27vh;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 25;
}
.semi-circle {
position: absolute;
left: 50%;
top: 43.5%;
width: 40%;
height: 5%;
border-radius: 0% 0% 50% 50%/0% 0% 100% 100%;
border: 2vh solid #ebdbb9;
border-top: 0;
z-index: 1;
transform: translate(-50%, -50%);
transition: height 1s;
animation: noodle-animation 4s infinite;
}
@keyframes noodle-animation {
0% {
height: 5%;
}
10% {
height: 0%;
}
15% {
height: 5%;
}
20% {
height: 0%;
}
25% {
height: 5%;
}
30% {
height: 0%;
}
100% {
height: 5%;
}
}
p {
text-align: center;
color: #eee;
}
</style>
</head>
<body>
<svg class="tramp" width="100%" height="100%" viewBox="0 0 2481 3508" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.830492,-0.362708,0.384808,0.881096,-72.3511,171.341)">
<rect x="699.138" y="810.067" width="834.175" height="943.87" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(1.33768,-1.66533e-16,-5.55112e-17,1,-770.586,588.064)">
<path d="M1769.58,2107.14L955.67,2107.14L1431.24,766.67L1618.19,766.67L1769.58,2107.14Z" style="fill:rgb(217,184,165);" />
</g>
<g transform="matrix(1.33768,0,0,1,-656.233,588.064)">
<path d="M1769.58,2107.14L955.67,2107.14L1362.63,766.67L1618.19,766.67L1769.58,2107.14Z" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(0.891947,-0.427701,0.426252,0.888927,-310.833,329.338)">
<rect x="699.138" y="810.067" width="834.175" height="943.87" style="fill:rgb(217,184,165);" />
</g>
<g transform="matrix(0.906507,-0.395906,0.400233,0.916414,-261.658,258.899)">
<rect x="699.138" y="810.067" width="834.175" height="943.87" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(0.736075,0,0,0.736075,623.64,398.699)">
<circle cx="1568.82" cy="1298.83" r="498.405" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.46213,-0.148921,0.153135,0.475207,264.223,766.091)">
<rect x="1309.38" y="1940.78" width="571.108" height="1118.66" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.42975,0.0758877,-0.0225765,0.12785,1566.64,800.1)">
<rect x="506.025" y="1074.8" width="549.982" height="679.136" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(0.873668,0.302938,-0.0425326,0.122663,1120.72,619.433)">
<rect x="506.025" y="1074.8" width="549.982" height="679.136" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(0.744983,-0.240071,0.217114,0.673745,-237.998,1037.31)">
<rect x="1309.38" y="1940.78" width="571.108" height="1118.66" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.483688,0.141564,-0.146979,0.502189,1154.1,258.505)">
<rect x="1309.38" y="1940.78" width="571.108" height="1118.66" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(1.02679,-0.332239,0.415688,1.28469,-23.8703,-165.237)">
<circle cx="949.085" cy="1166.04" r="163.97" style="fill:rgb(173,172,190);" />
</g>
<g transform="matrix(0.246721,0.697768,-0.667915,0.236166,2116.09,-35.7701)">
<path d="M1295.16,1547.98C1351.06,1509.13 1384.14,1446.96 1384.14,1380.79C1384.14,1276 1302.27,1187.83 1193.69,1175.68L1185.76,1240.79C1259.87,1249.08 1315.76,1309.27 1315.76,1380.79C1315.76,1425.96 1293.17,1468.39 1255.02,1494.91L1295.16,1547.98Z" />
</g>
<g transform="matrix(-1.60136,-0.822464,0.787276,-1.53285,2368.67,4185.91)">
<path d="M1295.16,1547.98C1351.06,1509.13 1384.14,1446.96 1384.14,1380.79C1384.14,1356.92 1379.83,1333.24 1371.39,1310.79L1341.82,1321C1349.03,1340.17 1352.72,1360.4 1352.72,1380.79C1352.72,1437.31 1324.46,1490.41 1276.71,1523.59L1295.16,1547.98Z" />
</g>
<g transform="matrix(0.265844,1.11829,-1.07045,0.25447,3049.73,-297.087)">
<path d="M1168.7,1587.29C1287.69,1587.29 1384.14,1494.84 1384.14,1380.79C1384.14,1337.25 1369.79,1294.83 1343.13,1259.58L1317.68,1277.26C1340.45,1307.37 1352.72,1343.6 1352.72,1380.79C1352.72,1478.2 1270.33,1557.17 1168.7,1557.17L1168.7,1587.29Z" />
</g>
<g transform="matrix(0.265844,1.11829,-1.07045,0.25447,3323.89,-313.954)">
<path d="M1295.16,1547.98C1313.58,1535.17 1329.77,1519.66 1343.13,1502L1317.68,1484.32C1306.28,1499.4 1292.45,1512.65 1276.71,1523.59L1295.16,1547.98Z" />
</g>
<g transform="matrix(0.734201,-0.632764,0.563649,0.654007,-454.773,749.844)">
<rect x="926.305" y="886.965" width="247.66" height="331.169" style="fill:rgb(102,32,68);" />
</g>
<g transform="matrix(0.730446,-0.181186,0.144129,0.58105,149.794,425.956)">
<path d="M1075.82,133.269L1240.16,782.311L582.789,782.311L1075.82,133.269Z" style="fill:rgb(154,187,223);" />
</g>
<g transform="matrix(0.739154,-0.183346,0.066171,0.266766,205.53,676.373)">
<path d="M680.902,133.269L1240.16,782.311L582.789,782.311L680.902,133.269Z" style="fill:rgb(217,184,165);" />
</g>
<g transform="matrix(0.675058,-0.0990401,0.0673957,0.459369,278.514,419.779)">
<path d="M935.88,133.269L1240.16,782.311L582.789,782.311L935.88,133.269Z" style="fill:rgb(122,113,140);" />
</g>
<g transform="matrix(-0.731751,-0.107358,-0.0970982,0.661821,2238.6,94.626)">
<path d="M1098.76,133.269L1240.16,782.311L582.789,782.311L1098.76,133.269Z" style="fill:rgb(154,187,223);" />
</g>
<g tr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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