<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>钮祜禄·川川回宫！</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<style>
@import url('https://fonts.googleapis.com/css?family=Sacramento');
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
}
body {
display: none;
background-image: linear-gradient(
to bottom,
rgb(176, 255, 244) 0%,
rgb(70, 165, 219) 80%
);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
width: 100%;
height: 100%;
display: block;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
h4 {
font-family: 'Sacramento', cursive;
color: white;
font-size: calc(40px + (50 - 40) * (100vw - 400px) / (1000 - 400));
position: fixed;
width: 100%;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
}
.trump-face {
width: 150px;
height: 150px;
border-radius: 50%;
-webkit-box-shadow: 0px 7px 15px 5px rgba(100, 120, 180, 0.6) inset;
box-shadow: 0px 7px 15px 5px rgba(100, 120, 180, 0.6) inset;
position: absolute;
top: 50%;
left: calc(50% - 75px);
}
.trump-face {
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 64%
),
url('https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/trump.png')
center center no-repeat;
background-size: 150px;
background-position: -5px 100%;
}
.trump-face.scared {
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 64%
),
url('https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/trump2.png')
center center no-repeat;
background-size: 150px;
background-position: -5px 100%;
}
.bubble {
position: absolute;
-webkit-box-shadow: 0px 5px 13px 0px rgba(100, 120, 180, 0.6) inset;
box-shadow: 0px 5px 13px 0px rgba(100, 120, 180, 0.6) inset;
border-radius: 50%;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 64%
);
border-radius: 50%;
z-index: 2;
-webkit-transform: translateY(100vh);
-ms-transform: translateY(100vh);
transform: translateY(100vh);
-webkit-animation: floatBubble 20s -10s infinite, moveBubble 5s ease
infinite alternate;
animation: floatBubble 20s -10s infinite, moveBubble 5s ease infinite
alternate;
}
.bubble:nth-child(1) {
left: 5%;
width: 45px;
height: 45px;
}
.bubble:nth-child(2) {
left: 12%;
width: 20px;
height: 20px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.bubble:nth-child(3) {
left: 15%;
width: 35px;
height: 35px;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.bubble:nth-child(4) {
left: 30%;
width: 60px;
height: 60px;
-webkit-animation-delay: 13s;
animation-delay: 13s;
}
.bubble:nth-child(5) {
left: 47%;
width: 50px;
height: 50px;
-webkit-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.bubble:nth-child(6) {
left: 53%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
}
.bubble:nth-child(7) {
left: 60%;
width: 80px;
height: 80px;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.bubble:nth-child(8) {
left: 65%;
width: 40px;
height: 40px;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.bubble:nth-child(9) {
left: 80%;
width: 30px;
height: 30px;
-webkit-animation-delay: 3.2s;
animation-delay: 3.2s;
}
.bubble:nth-child(10) {
left: 90%;
width: 90px;
height: 90px;
-webkit-animation-delay: 10.6s;
animation-delay: 10.6s;
}
@-webkit-keyframes floatBubble {
100% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
}
@keyframes floatBubble {
100% {
-webkit-transform: translateY(-100vh);
transform: translateY(-100vh);
}
}
@-webkit-keyframes moveBubble {
10% {
margin-left: 75px;
}
}
@keyframes moveBubble {
10% {
margin-left: 75px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="trump-face"></div>
<div class="bubbles">
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://fecoder-pic-1302080640.cos.ap-nanjing.myqcloud.com/jquery.throwable.js"></script>
<script>
$(document).ready(function () {
trump = $('.trump-face')[0];
setInterval(function () {
var trumpPosition = trump.getBoundingClientRect();
var clw = window.innerWidth || document.documentElement.clientWidth;
var clh = window.innerHeight || document.documentElement.clientHeight;
if (
trumpPosition.top >= 10 &&
trumpPosition.bottom <= clh &&
trumpPosition.left >= 10 &&
trumpPosition.right <= clw
) {
$('.trump-face').removeClass('scared');
} else {
$('.trump-face').addClass('scared');
}
}, 100);
$('.trump-face').addClass('throwable');
$('body').fadeIn();
$('.throwable').throwable({
gravity: { x: 0, y: 0.2 },
autostart: true,
shape: 'circle',
bounce: 0.5,
damping: 0.3,
collisionDectection: true,
});
});
</script>
</body>
</html>