Embedded Files
๊ตฌ๊ธ ์ฌ์ดํธ ๋๊ตฌ์ ์ฌ์ฉํ ์ ์๋ Html + Css ํจ๊ณผ ๋ชจ์์ ๋๋ค.
๐์์ค์ฝ๋
ย ย <body>
ย <div class="main">
<span>L</span>
<span>E</span>
<span>A</span>
<span>R</span>
<span>N</span>
<span class="letter"></span>
<span>M</span>
<span>O</span>
ย ย ย ย ย ย ย ย <span>R</span>
ย ย ย ย ย ย ย ย <span>E</span>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Quicksand', sans-serif;
font-size: 42px;
background: #f7f7f7;
}
span{
margin: 0 15px;
line-height: .7;
text-shadow: 0 0 2px rgba(0, 0, 0, .45);
animation: span 3s ease-in infinite alternate;
}
.main{
display: flex;
justify-content: center;
align-items: flex-start;
ย ย
ย ย
@media(max-width: 600px){ transform: scale(.65); }
}
.letter{
display: inline-flex;
height: 30px;
width: 27px;
/* border: 2.5px solid #FF1EAD; */
border: 2.35px solid black;
border-radius: 14px;
box-shadow:
0 0 2px rgba(0, 0, 0, .75),
inset 0 0 2px rgba(0, 0, 0, .45);
animation: letter 3s ease-in-out infinite alternate;
}
@keyframes span {
0%,30%{ margin: 0 15px; }
70%,100%{ margin: 0 5px; }
}
@keyframes letter {
0%,30%{ width: 27px; }
70%,100%{ width: 30vw; }
}
</style>
</div>
ย ย </body>
Page updated
Google Sites
Report abuse