这个只是练手。
有canvas，背景。
还有之前的动态效果。
canvas会跟随窗口大小变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-image: linear-gradient(#8c273c, #420713);
background-repeat: no-repeat;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
flex-flow: column;
overflow: hidden;
background-attachment: fixed;
width: 100vw;
min-width: 100vw;
}
.title{
padding: 10px 0 ;
background-color: #00000099;
color: white;
text-align: center;
font-size: 40px;
font-weight: bolder;
}
h1 {
text-shadow: 0 0 10px white, 0 0 20px white;
}
.back {
text-align: center;
overflow: hidden;
display: flex;
flex: 1;
}
.lab {
margin: 30px 0;
flex: 1;
display: flex;
flex-flow: column;
}
.incomplete {
float: left;
flex: 1;
overflow: hidden;
background-image: linear-gradient(#00000099 10%, #00000033);
padding: 20px;
color: white;
display: flex;
flex-flow: column;
position: relative;
border: 20px solid transparent;
background-clip: padding-box;
width: 300px;
margin: 0 auto;
text-align: center;
}
.incomplete::after {
right: -20px;
top: -20px;
border-top: 1px dashed white;
border-right: 1px dashed white;
}
.incomplete:hover::after {
right: -1px;
top: -1px;
}
.incomplete:hover::after, .incomplete:hover::before {
width: 100%;
height: 100%;
transition: all ease-in .2s;
}
.incomplete:hover::before {
bottom: -1px;
left: -1px;
}
.incomplete::after, .incomplete::before {
pointer-events: none;
content: '';
display: block;
position: absolute;
width: 50%;
height: 20%;
transition: all ease-in .2s;
}
.incomplete::before {
bottom: -20px;
left: -20px;
border-left: 1px dashed white;
border-bottom: 1px dashed white;
}
.btn {
display: inline-block;
color: white;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-image: linear-gradient(90deg, #FFF 50%, transparent 0),
linear-gradient(90deg, #FFF 50%, transparent 0), linear-gradient(0deg, #FFF 50%, transparent 0),
linear-gradient(0deg, #FFF 50%, transparent 0);
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: 0 0, 0 100%, 0 0, 100% 0;
outline: 1px solid #FFF;
padding: 10px 30px;
user-select: none;
cursor: pointer;
outline-offset: -1px;
}
.btn:hover {
outline: none;
animation: linearGradientMove .3s infinite linear;
box-shadow: inset 0 0 8px 3px #FFFFFF55;
}
.btn:active {
text-shadow: 0 0 10px white;
}
.info {
padding: 10px 0;
color: #FFFFFF88;
user-select: none;
}
.info:hover {
text-shadow: 0 0 10px white;
}
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
.box {
position: relative;
flex: 1;
flex-flow: column;
overflow: hidden;
display: flex;
}
.content {
flex: 1;
padding: 1em;
box-sizing: border-box;
overflow-y: scroll;
text-shadow: 0 0 10px white;
}
p {
position: relative;
}
p::after {
content: "";
display: block;
width: 100%;
transition: all ease-in .1s;
position: absolute;
bottom: -9px;
left: 0;
background-image: linear-gradient(90deg, transparent 10%, white, transparent 90%);
height: 2px;
opacity: 0;
}
p:hover::after {
opacity: 1;
transition: all ease-in .1s;
}
.cube {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 0;
overflow: hidden;
clip-path: polygon(0% 0%, 0% 100%, 2px 100%, 2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px), 2px 100%, 100% 100%, 100% 0%);
}
.cube::before {
content: '';
position: absolute;
z-index: -2;
/*left: -50%;*/
/*top: -50%;*/
/*width: 200%;*/
/*height: 200%;*/
left: 0;
top: 0;
width: 100%;
height: 100%;
/*在长方形下这是一个糟糕的方法*/
/*animation: rotate 1s linear infinite;*/
/*animation: run 2s ease-out infinite;*/
animation: colorful 2s ease-out infinite;
background: conic-gradient(#00ffd1, #ff003a, #0000ff, #00ff00, #00ffd1);
/*background-image: linear-gradient(white, white),*/
/*linear-gradient(#00ffa7, #00ffa7),*/
/*linear-gradient(#003cff, #003cff),*/
/*linear-gradient(#ff87d0, #ff87d0);*/
background-size: 100% 100%;
background-repeat: no-repeat;
/*background:white;*/
}
@keyframes colorful {
100% {
filter: hue-rotate(360deg);
}
}
@keyframes run {
0% {
left: 0;
top: 0;
}
30% {
left: 99%;
top: 0;
}
50% {
left: 99%;
top: 99%;
}
80% {
left: 0;
top: 99%;
}
100% {
left: 0;
top: 0;
}
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
@keyframes opacityChange {
50% {
opacity: 1;
}
100% {
opacity: .5;
}
}
::-webkit-scrollbar {
display: none;
}
.galaxy{
position: fixed;
z-index: -12;
}
</style>
<script>
// let tObj
// window.onload = () => {
// tObj = document.getElementById('txt')
// let txt = tObj.innerText
// txt = txt.replaceAll(' ', '')
//
// let krr = txt.split('\n')
// let brr = krr.filter(item => item)
// console.log(brr)
// let html = ''
// brr.forEach(item => {
// html = html.concat('<p>' + item + '</p>')
// })
// console.log(html)
//
// }
let c=null;
let ctx;
let star=[];
let galaxy;
let galaxyWidth,galaxyHeight;
function createStar(){
for(let i=0;i<99;i++){
star.push({
x:Math.floor(Math.random()*galaxyWidth),
y: Math.floor(Math.random()*galaxyHeight),
})
}
}
function starS(p){
ctx.beginPath();
//设置是个顶点的坐标，根据顶点制定路径
for (let i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18+i*72)/180*Math.PI)*20+p.x,
-Math.sin((18+i*72)/180*Math.PI)*20+p.y);
ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*8+p.x,
-Math.sin((54+i*72)/180*Math.PI)*8+p.y);
}
ctx.closePath();
//设置边框样式以及填充颜色
ctx.lineWidth="1";
ctx.fillStyle = "rgba(249,192,255,0.33)";
ctx.strokeStyle = "rgba(168,1,196,0.9)";
ctx.fill();
ctx.stroke();
}
function starMove(){
for(let i=0;i<star.length;i++){
star[i].y+=3;
if(star[i].y>galaxyHeight){
star[i].y=0;
star[i].x=Math.floor(Math.random()*galaxyWidth);
}
starS(star[i])
}
}
function drawStar(){
}
window.onload=()=>{
galaxy=document.getElementById('galaxy')
galaxy.height=document.body.clientHeight
galaxy.width=document.body.clientWidth
galaxyHeight=galaxy.height;
galaxyWidth=galaxy.width;
ctx=galaxy.getContext('2d');
ctx.fillStyle="rgba(88,209,255,0.65)"
createStar();
setInterval(()=>{
ctx.clearRect(0,0,galaxy.width,galaxy.height);
starMove();
},10)
}
window.onresize=()=>{
galaxy.height=document.body.clientHeight
galaxy.width=document.body.clientWidth
galaxyHeight=galaxy.height;
galaxyWidth=galaxy.width;
}
</script>
</head>
<body>
<canvas class="galaxy" id="galaxy"></canvas>
<div class="title">
Katy Perry
</div>
<div class="back">
<div class="lab">
<div class="incomplete">
<h1>Listen the music</h1>
<div class="box">
<div class="content">
<h2>Rise</h2>
<h5>Katy Perry</h5>
<p>I won't just survive</p>
<p>Oh, you will see me thrive</p>
<p>Can't write my story</p>
<p>I'm beyond the archetype</p>
<p>I won't just conform</p>
<p>No matter how you shake my core</p>
<p>Cause my roots, they run deep, oh</p>
<p>Oh ye of so little faith</p>
<p>Don't doubt it, don't doubt it</p>
<p>Victory is in my veins</p>
<p>I know it, I know it</p>
<p>And I will not negotiate</p>
<p>I'll fight it, I'll fight it</p>
<p>I will transform</p>
<p>When, when the fire's at my feet again</p>
<p>And the vultures all start circling</p>
<p>They're whispering, "you're out of time."</p>
<p>But still, I rise</p>
<p>This is no mistake, no accident</p>
<p>When you think the final end is in, think again</p>
<p>Don't be surprised, I will still rise</p>
<p>I must stay conscious</p>
<p>Through the menace and chaos</p>
<p>So I call on my angels</p>
<p>They say...</p>
<p>Oh ye of so little faith</p>
<p>Don't doubt it, don't doubt it</p>
<p>Victory is in your veins</p>
<p>You know it, you know it</p>
<p>And you will not negotiate</p>
<p>Just fight it, just fight it</p>
<p>And be transformed</p>
<p>Cause when, when the fire's at my feet again</p>
<p>And the vultures all start circling</p>
<p>They're whispering, "you're out of time."</p>
<p>But still, I rise</p>
<p>This is no mistake, no accident</p>
<p>When you think the final end is in, think again</p>
<p>Don't be surprised, I will still rise</p>
<p>Don't doubt it, don't doubt it</p>
<p>Oh oh, oh oh</p>
<p>You know it, you know it</p>
<p>Still rise</p>
<p>Just fight it, just fight it</p>
<p>Don't be surprised, I will still rise</p>
</div>
<div class="cube"></div>
</div>
<div class="info">Judging whether you are a robot...</div>
<div class="foot">
<div class="btn">listen</div>
</div>
</div>
</div>
<div class="lab">
<div class="incomplete">
<h1>Listen the music</h1>
<div class="box">
<div class="content">
<h2>Rise</h2>
<h5>Katy Perry</h5>
<p>I used to bite my tongue and hold my breath</p>
<p>Scared to rock the boat and make a mess</p>
<p>So I sat quietly, agreed politely</p>
<p>I guess that I forgot I had a choice</p>
<p>I let you push me past the breaking point</p>
<p>I stood for nothing, so I fell for everything</p>
<p>You held me down, but I got up</p>
<p>Already brushing off the dust</p>
<p>You hear my voice, your hear that sound</p>
<p>Like thunder, gonna shake your ground</p>
<p>You held me down, but I got up</p>
<p>Get ready cause I've had enough</p>
<p>I see it all, I see it now</p>
<p>I got the eye of the tiger, a fighter, dancing through the fire</p>
<p>Cause I am a champion and you're gonna hear me ROAR</p>
<p>Louder, louder than a lion</p>
<p>Cause I am a champion and you're gonna hear me ROAR</p>
<p>Oh oh oh oh oh oh</p>
<p>You're gonna hear me roar</p>
<p>Now I'm floating like a butterfly</p>
<p>Stinging like a bee I earned my stripes</p>
<p>I went from zero, to my own hero</p>
<p>You held me down, but I got up</p>
<p>Already brushing off the dust</p>
<p>You hear my voice, your hear that sound</p>
<p>Like thunder, gonna shake your ground</p>
<p>You held me down, but I got up</p>
<p>Get ready 'cause I've had enough</p>
<p>I see it all, I see it now</p>
<p>I got the eye of the tiger, a fighter, dancing through the fire</p>
<p>'Cause I am a champion and you're gonna hear me ROAR</p>
<p>Louder, louder than a lion</p>
<p>'Cause I am a champion and you're gonna hear me ROAR</p>
<p>Oh oh oh oh oh oh</p>
<p>You're gonna hear me roar</p>
<p>You're gonna hear me roar</p>
<p>Roar-or, roar-or, roar-or</p>
<p>I got the eye of the tiger, a fighter, dancing through the fire</p>
<p>'Cause I am a champion and you're gonna hear me ROAR</p>
<p>Louder, louder than a lion</p>
<p>'Cause I am a champion and you're gonna hear me ROAR</p>
<p>Oh oh oh oh oh oh</p>
<p>You're gonna hear me roar</p>
<p>You're gonna hear me roar</p>
</div>
<div class="cube"></div>
</div>
<div class="info">Judging whether you are a robot...</div>
<div>
<div class="btn">listen</div>
</div>
</div>
</div>
<div class="lab">
<div class="incomplete">
<h1>Listen the music</h1>
<div class="box">
<div class="content">
<h2>E.T.</h2>
<h5>Katy Perry</h5>
<p>You're so hypnotizing</p>
<p>Could you be the devil?</p>
<p>Could you be an angel?</p>
<p>Your touch magnetizing</p>
<p>Feels like I am floating</p>
<p>Leaves my body glowing</p>
<p>They say be afraid</p>
<p>You're not like the others</p>
<p>Futuristic lover</p>
<p>Different DNA</p>
<p>They don't understand you</p>
<p>You're from a whole 'nother world</p>
<p>A different dimension</p>
<p>You open my eyes</p>
<p>And I'm ready to go</p>
<p>Lead me into the light</p>
<p>Kiss me, k-k-kiss me</p>
<p>Infect me with your love</p>
<p>And fill me with your poison</p>
<p>Take me, t-t-take me</p>
<p>Wanna be your victim</p>
<p>Ready for abduction</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>extraterrestrial</p>
<p>You're so supersonic</p>
<p>Wanna feel your power</p>
<p>Stun me with your laser</p>
<p>Your kiss is cosmic</p>
<p>Every move is magic</p>
<p>You're from a whole 'nother world</p>
<p>A different dimension</p>
<p>You open my eyes</p>
<p>And I'm ready to go</p>
<p>Lead me into the light</p>
<p>Kiss me, k-k-kiss me</p>
<p>Infect me with your love</p>
<p>And fill me with your poison</p>
<p>Take me, t-t-take me</p>
<p>Wanna be your victim</p>
<p>Ready for abduction</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>extraterrestrial</p>
<p>This is transcendental</p>
<p>On another level</p>
<p>Boy, you're my lucky star</p>
<p>I wanna walk on your wavelength</p>
<p>and be there when you vibrate</p>
<p>For you I'll risk it all</p>
<p>Kiss me, k-k-kiss me</p>
<p>Infect me with your love</p>
<p>And fill me with your poison</p>
<p>Take me, t-t-take me</p>
<p>Wanna be a victim</p>
<p>Ready for abduction</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>Extraterrestrial</p>
<p>Extraterrestrial</p>
<p>Extraterrestrial</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>Extraterrestrial</p>
</div>
<div class="cube"></div>
</div>
<div class="info">Judging whether you are a robot...</div>
<div>
<div class="btn">listen</div>
</div>
</div>
</div>
<div class="lab">
<div class="incomplete">
<h1>Listen the music</h1>
<div class="box">
<div class="content">
<h2>E.T.</h2>
<h5>Katy Perry</h5>
<p>You're so hypnotizing</p>
<p>Could you be the devil?</p>
<p>Could you be an angel?</p>
<p>Your touch magnetizing</p>
<p>Feels like I am floating</p>
<p>Leaves my body glowing</p>
<p>They say be afraid</p>
<p>You're not like the others</p>
<p>Futuristic lover</p>
<p>Different DNA</p>
<p>They don't understand you</p>
<p>You're from a whole 'nother world</p>
<p>A different dimension</p>
<p>You open my eyes</p>
<p>And I'm ready to go</p>
<p>Lead me into the light</p>
<p>Kiss me, k-k-kiss me</p>
<p>Infect me with your love</p>
<p>And fill me with your poison</p>
<p>Take me, t-t-take me</p>
<p>Wanna be your victim</p>
<p>Ready for abduction</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>extraterrestrial</p>
<p>You're so supersonic</p>
<p>Wanna feel your power</p>
<p>Stun me with your laser</p>
<p>Your kiss is cosmic</p>
<p>Every move is magic</p>
<p>You're from a whole 'nother world</p>
<p>A different dimension</p>
<p>You open my eyes</p>
<p>And I'm ready to go</p>
<p>Lead me into the light</p>
<p>Kiss me, k-k-kiss me</p>
<p>Infect me with your love</p>
<p>And fill me with your poison</p>
<p>Take me, t-t-take me</p>
<p>Wanna be your victim</p>
<p>Ready for abduction</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>extraterrestrial</p>
<p>This is transcendental</p>
<p>On another level</p>
<p>Boy, you're my lucky star</p>
<p>I wanna walk on your wavelength</p>
<p>and be there when you vibrate</p>
<p>For you I'll risk it all</p>
<p>Kiss me, k-k-kiss me</p>
<p>Infect me with your love</p>
<p>And fill me with your poison</p>
<p>Take me, t-t-take me</p>
<p>Wanna be a victim</p>
<p>Ready for abduction</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>Extraterrestrial</p>
<p>Extraterrestrial</p>
<p>Extraterrestrial</p>
<p>Boy, you're an alien</p>
<p>Your touch so foreign</p>
<p>It's supernatural</p>
<p>Extraterrestrial</p>
</div>
<div class="cube"></div>
</div>
<div class="info">Judging whether you are a robot...</div>
<div>
<div class="btn">listen</div>
</div>
</div>
</div>
</div>
<!--<pre id="txt" title="这里编辑dom，初始化就会有格式化的歌词"></pre>-->
</body>
</html>
895
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
