首先先看看原网站的这条小龙：https://virmach.me/
是不是特别阔爱，又去网站上把gif搞来，然后开始写一个 崩腾的小牛 与 阔爱的小龙 相遇 相知的故事，哈哈，源代码如下,按需获取，请勿传播！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.WjAMH {
position: fixed;
height: 80px;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
z-index: 99999;
pointer-events: none;
}
._2yEGo {
width: 100px;
position: fixed;
animation: _2yEGo 20s linear infinite;
transform: translate3d(0, 0, 0);
pointer-events: none;
}
._2yEGoUp {
width: 100px;
position: fixed;
animation: _2yEGoUp 20s linear infinite;
transform: translate3d(0, 0, 0);
pointer-events: none;
}
@keyframes _2yEGoUp {
0% {
right: -100px;
transform: scaleX(1)
}
50% {
right: 100%;
transform: scaleX(1)
}
50.001% {
transform: scaleX(-1)
}
100% {
right: -100px;
transform: scaleX(-1)
}
}
@keyframes _2yEGo {
0% {
left: -100px;
transform: scaleX(-1)
}
50% {
left: 100%;
transform: scaleX(-1)
}
50.001% {
transform: scaleX(1)
}
100% {
left: -100px;
transform: scaleX(1)
}
}
@media screen and (max-device-width: 1080px) {
._2yEGoUp {
width: 60px;
bottom: 0;
}
._2yEGo {
width: 60px;
bottom: 0;
}
}
</style>
</head>
<body>
<div class="WjAMH">
<img src="dinosaur.gif" class="_2yEGoUp"/>
<img src="buffalo.gif" class="_2yEGo"/>
</div>
</body>
</html>
效果图如下：
