写一个炫酷搞怪页面要有动态流行背景代码不限包括htmlcssjs等
<!DOCTYPE html>
<html>
<head>
<title>Cool and Funny Page</title>
<style type="text/css">
body {
background-image: linear-gradient(to right, #FFDAB9, #ADD8E6);
animation: background 10s linear infinite;
font-family: Arial, sans-serif;
color: #333;
}
<pre><code> @keyframes background {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
h1 {
font-size: 60px;
text-align: center;
margin-top: 100px;
text-shadow: 2px 2px #FFF;
animation: title 5s linear infinite;
}
@keyframes title {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
p {
font-size: 20px;
text-align: center;
margin-top: 50px;
animation: text 10s linear infinite;
}
@keyframes text {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #FFF;
border: 2px solid #333;
border-radius: 5px;
font-size: 24px;
text-align: center;
margin-top: 50px;
cursor: pointer;
animation: button 5s linear infinite;
}
@keyframes button {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</code></pre>
</head>
<body>
<h1>Welcome to the Cool and Funny Page!</h1>
<p>This page is designed to make you smile and have fun.</p>
<button class="button">Click Me!</button>
<script type="text/javascript">
document.querySelector('.button').addEventListener('click', function() {
alert('Congratulations! You just won a virtual trophy!');
});
</script>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bBEc 著作权归作者所有。请勿转载和采集!