暂时没有做任何的适配，
一个练手的案例。
主要联系变化线条。
根据 我玩游戏的风格制造。
<!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;
overflow-y: hidden;
overflow-x: scroll;
background-attachment: fixed;
width: 100vw;
min-width: 100vw;
}
h1 {
text-shadow: 0 0 10px white, 0 0 20px white;
}
.flex {
text-align: center;
width: auto;
}
.incomplete {
background-image: linear-gradient(#000000AA 10%, #00000033);
padding: 20px;
color: white;
position: relative;
border: 20px solid transparent;
background-clip: padding-box;
margin: 40px 60px;
width: 300px;
display: inline-block;
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;
height: 500px;
}
.content {
height: 500px;
padding: 1rem;
box-sizing: border-box;
overflow-y: scroll;
text-shadow: 0 0 10px white;
}
.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% - 1px), 2px 100%, 100% 100%, 100% 0%);
}
p {
position: relative;
}
p::after {
content: "";
display: block;
width: 100%;
transition: all ease-in .3s;
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 .3s;
}
.cube::before {
content: '';
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
animation: rotate 2s linear infinite;
background: conic-gradient(transparent, rgb(220, 179, 220), transparent 30%);
}
@keyframes rotate {
100% {
transform: rotate(1turn);
}
}
@keyframes opacityChange {
50% {
opacity: 1;
}
100% {
opacity: .5;
}
}
::-webkit-scrollbar {
display: none;
}
</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)
}
</script>
</head>
<body>
<div class="flex">
<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>
<div class="btn">listen</div>
</div>
</div>
<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 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>
<pre id="txt" title="这里编辑dom，初始化就会有格式化的歌词"></pre>
</body>
</html>
160
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
