1、打开题目
右键打开查看网页源码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一起来撸猫</title>
<style>
@keyframes tail {
6.6666666667% {
transform: rotate(0);
}
10% {
transform: rotate(10deg);
}
16.6666666667% {
transform: rotate(-5deg);
}
20% {
transform: rotate(30deg);
}
26.6666666667% {
transform: rotate(-2deg);
}
46.6666666667% {
transform: rotate(10deg);
}
53.3333333333% {
transform: rotate(-5deg);
}
56.6666666667% {
transform: rotate(10deg);
}
}
@keyframes body {
6.6666666667% {
transform: scaleY(1);
}
10% {
transform: scaleY(1.15);
}
16.6666666667% {
transform: scaleY(1);
}
20% {
transform: scaleY(1.25);
}
26.6666666667% {
transform: scaleY(1);
}
46.6666666667% {
transform: scaleY(1.15);
}
53.3333333333% {
transform: scaleY(1);
}
56.6666666667% {
transform: scaleY(1.15);
}
}
@keyframes left-whisker {
6.6666666667% {
transform: rotate(0);
}
10% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(-5deg);
}
20% {
transform: rotate(0deg);
}
26.6666666667% {
transform: rotate(0deg);
}
46.6666666667% {
transform: rotate(10deg);
}
53.3333333333% {
transform: rotate(-5deg);
}
56.6666666667% {
transform: rotate(10deg);
}
}
@keyframes right-whisker {
6.6666666667% {
transform: rotate(180deg);
}
10% {
transform: rotate(190deg);
}
16.6666666667% {
transform: rotate(180deg);
}
20% {
transform: rotate(175deg);
}
26.6666666667% {
transform: rotate(190deg);
}
46.6666666667% {
transform: rotate(180deg);
}
53.3333333333% {
transform: rotate(185deg);
}
56.6666666667% {
transform: rotate(175deg);
}
}
@keyframes left-ear {
0% {
transform: rotate(-20deg);
}
6.6666666667% {
transform: rotate(-6deg);
}
13.3333333333% {
transform: rotate(-15deg);
}
26.6666666667% {
transform: rotate(-15deg);
}
33.3333333333% {
transform: rotate(-30deg);
}
40% {
transform: rotate(-30deg);
}
46.6666666667% {
transform: rotate(0deg);
}
53.3333333333% {
transform: rotate(0deg);
}
60% {
transform: rotate(-15deg);
}
80% {
transform: rotate(-15deg);
}
93.3333333333% {
transform: rotate(-6deg);
}
100% {
transform: rotateZ(-6deg);
}
}
@keyframes right-ear {
0% {
transform: rotateZ(-16deg);
}
6.6666666667% {
transform: rotateZ(-16deg);
}
13.3333333333% {
transform: rotateZ(-19deg);
}
26.6666666667% {
transform: rotateZ(-19deg);
}
33.3333333333% {
transform: rotateZ(-30deg);
}
36.6666666667% {
transform: rotateZ(-19deg);
}
37.3333333333% {
transform: rotateZ(-30deg);
}
38% {
transform: rotateZ(-19deg);
}
40% {
transform: rotateZ(-19deg);
}
40.6666666667% {
transform: rotateZ(-30deg);
}
41.3333333333% {
transform: rotateZ(-19deg);
}
46.6666666667% {
transform: rotateZ(-9deg);
}
53.3333333333% {
transform: rotateZ(-9deg);
}
60% {
transform: rotateZ(-19deg);
}
60.6666666667% {
transform: rotateZ(-30deg);
}
61.3333333333% {
transform: rotateZ(-19deg);
}
62.6666666667% {
transform: rotateZ(-19deg);
}
63.3333333333% {
transform: rotateZ(-30deg);
}
64% {
transform: rotateZ(-19deg);
}
80% {
transform: rotateZ(-19deg);
}
93.3333333333% {
transform: rotateZ(-16deg);
}
100% {
transform: rotateZ(-16deg);
}
}
body {
background-color: #abe7db;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main {
height: 400px;
width: 400px;
position: relative;
}
.main .stand {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
height: 20px;
width: 200px;
border-radius: 20px;
background-color: #fd6e72;
z-index: 2;
}
.main .stand::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translate(-50%);
height: 10px;
width: 50px;
border-radius: 20px;
background-color: #fdf9de;
box-shadow: 0 10px 0 #fdf9de, 0 20px 0 #fdf9de, 0 30px 0 #fdf9de, 0 40px 0 #fdf9de, 0 50px 0 #fdf9de, 0 60px 0 #fdf9de, 0 70px 0 #fdf9de, 0 80px 0 #fdf9de, 0 90px 0 #fdf9de, 0 100px 0 #fdf9de, 0 110px 0 #fdf9de, 0 120px 0 #fdf9de, 0 130px 0 #fdf9de, 0 140px 0 #fdf9de, 0 150px 0 #fdf9de, 0 160px 0 #fdf9de, 0 170px 0 #fdf9de;
}
.main .cat {
width: 110px;
height: 50px;
position: absolute;
top: calc(50% - 50px);
right: 130px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}
.main .cat .body {
width: 110px;
height: 50px;
background-color: #745260;
position: absolute;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
animation: body 12s none infinite;
}
.main .cat .head {
content: "";
width: 70px;
height: 35px;
background-color: #745260;
position: absolute;
top: calc(50% - 10px);
left: -40px;
border-top-left-radius: 80px;
border-top-right-radius: 80px;
}
.tail-container {
position: absolute;
right: 0;
bottom: -13px;
z-index: 3;
}
.tail {
position: absolute;
height: 30px;
width: 14px;
bottom: -10px;
right: 0;
border-bottom-right-radius: 5px;
background: #745260;
z-index: 0;
}
.tail > .tail {
animation: tail 12s none infinite;
height: 100%;
width: 14px;
transform-origin: left;
border-bottom-left-radius: 20px 20px;
border-bottom-right-radius: 20px 20px;
border-top-right-radius: 40px;
}
.ear {
position: absolute;
left: 4px;
top: -4px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 20px solid #745260;
transform: rotate(-30deg);
animation: left-ear 12s both infinite;
}
.ear + .ear {
animation: right-ear 12s both infinite;
top: -12px;
left: 30px;
}
.nose {
position: absolute;
bottom: 10px;
left: -10px;
background-color: #fd6e72;
height: 5px;
width: 5px;
border-radius: 50%;
}
.whisker-container {
position: absolute;
bottom: 5px;
left: -36px;
width: 20px;
height: 10px;
transform-origin: right;
animation: left-whisker 12s both infinite;
}
.whisker-container:nth-child(2) {
left: -20px;
bottom: 12px;
transform-origin: right;
transform: rotate(180deg);
animation: right-whisker 12s both infinite;
}
.whisker {
position: absolute;
top: 0;
width: 100%;
border: 1px solid #fdf9de;
transform-origin: 100% 0;
transform: rotate(10deg);
}
.whisker:last-child {
top: 0;
transform: rotate(-20deg);
}
</style>
</head>
<body>
<div class="main">
<span class="stand"></span>
<div class="cat">
<div class="body"></div>
<div class="head">
<div class="ear"></div>
<div class="ear"></div>
</div>
<div class="face">
<div class="nose"></div>
<div class="whisker-container">
<div class="whisker"></div>
<div class="whisker"></div>
</div>
<div class="whisker-container">
<div class="whisker"></div>
<div class="whisker"></div>
</div>
</div>
<div class="tail-container">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail">
<div class="tail"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
$cat=$_GET['cat'];
echo $cat;
if($cat=='dog'){
echo 'Syc{cat_cat_cat_cat}';
}
-->
<div style="position: absolute;bottom: 0;width: 99%;"><p align="center" style="font:italic 15px Georgia,serif;color:black;"> Syclover @ cl4y</p></div>
</body>
</html>
<!--
$cat=$_GET['cat'];
echo $cat;
if($cat=='dog'){
echo 'Syc{cat_cat_cat_cat}';
}
-->
我们仔细看这段代码
我们可以尝试在网址后面加上?cat=dog
view-source:http://848cbdd5-15f5-4d6b-b178-842275b47743.node4.buuoj.cn:81/?cat=dog
此时我们获得flag