웹개발/덕질 사이트 만들기

[덕질하는 웹개발자] 츠카사 사이트 만들기 4일차 | 애니메이션

KwonYongHyeon 2021. 1. 20. 21:34
반응형

별건 아니고(정말 별거 아님) 오늘은 간단한 애니메이션 효과를 추가해 줬다.

대충 클래스를 만들어서 할까 했는데 그러면 클래스 속성 주는 작업이 너무 노가다(???)여가지고 그냥 p에다가 슬라이드인 효과를 줬다.

 

대충 소스 코드 공개

 

index.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>由崎 司</title>
	<link rel="shortcut icon" type="image⁄x-icon" href="top.png">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id='header'>
		<div id='logo'>
			<p class='logo_style'><a href="index.html" style="color: black;">由崎 司 _ fansite</a></p>
		</div>
		<div id='music'>
			<center><p class='lang'>[BGM] Yunomi - ⽉と星空</p></center>
			<br>
			<center>
				<audio autoplay controls>
					<source src="bgmusic.mp3" type="audio/mp3" allow="autoplay" id="audio">
				</audio>
			</center>
		</div>
		<br>
		<div id='lang'>
			<p class="lang">Menu</p>
			<ul>
				<li><a href = 'funfacts.html' style="color: black;">Fun Facts about Tsukasa</a></li>
			</ul>
			<br>
			<p class='lang'>Language</p>
			<ul>
				<li><a href = 'index.html' style="color: black;">English</a></li>
			</ul>
			<br>
			<p class='lang'>Developers</p>
			<ul>
				<li>Developed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Designed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Music by <a href = 'https://www.youtube.com/c/Yunomichannel/featured' target="_blank" style="color: black;">Yunomi</a></li>
				<li>Ads by <a href = 'https://tenping.kr/' target="_blank" style="color: black;">Tenping</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/kitoakari_1016' target="_blank" style="color: black;">鬼頭 明里</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/hatakenjiro' target = "-blank" style="color: black;">畑 健二郎</a></li>
				<li>Special Thanks to <a href = 'https://www.youtube.com/channel/UC-3q6G9q5GsOY2VpC5_LoRQ?app=desktop' target="_blank" style="color: black;">amous</a></li>
			</ul>
		</div>
	</div>
	<div id='contents'>
		<div id='image'>
			<center><img id="cim" src="top.png"></img></center>
			<center><img id="mim" src="mobile.jpg"></center>
		</div>
		<div id='in'>
			<p class='in' class="slidein">Name: 由崎 司(Yuzaki Tsukasa)</p>
			<p class='in' class="slidein">Spouse: 由崎 星空(Yuzaki Nasa)</p>
			<p class='in' class="slidein">Age: 16</p>
			<p class='in' class="slidein">Birthday: April 3rd</p>
			<p class='in' class="slidein">Country: Japan</p>
			<p class='in' class="slidein">Height: 154cm / 5.05249ft</p>
			<p class='in' class="slidein">Weight: 41kg / 90.3895lbs</p>
			<p class='in' class="slidein">Bloodtype: O</p>
			<p class='in' class="slidein">Hobby: watching movies / playing games</p>
		</div>
	</div>
	<div id="footer">
		<p class="copyright">Copyright ⓒ 2020. All Rights Reserved.</p>                                    
	</div>
</body>
</html>

 

 

 

funfacts.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>由崎 司</title>
	<link rel="shortcut icon" type="image⁄x-icon" href="top.png">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id='header'>
		<div id='logo'>
			<p class='logo_style'><a href="index.html" style="color: black;">由崎 司 _ fansite</a></p>
		</div>
		<div id='music'>
			<center><p class='lang'>[BGM] Yunomi - ⽉と星空</p></center>
			<br>
			<center>
				<audio autoplay controls>
					<source src="bgmusic.mp3" type="audio/mp3" allow="autoplay" id="audio">
				</audio>
			</center>
		</div>
		<br>
		<div id='lang'>
			<p class="lang">Menu</p>
			<ul>
				<li><a href = 'funfacts.html' style="color: black;">Fun Facts about Tsukasa</a></li>
			</ul>
			<br>
			<p class='lang'>Language</p>
			<ul>
				<li><a href = 'index.html' style="color: black;">English</a></li>
			</ul>
			<br>
			<p class='lang'>Developers</p>
			<ul>
				<li>Developed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Designed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Music by <a href = 'https://www.youtube.com/c/Yunomichannel/featured' target="_blank" style="color: black;">Yunomi</a></li>
				<li>Ads by <a href = 'https://tenping.kr/' target="_blank" style="color: black;">Tenping</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/kitoakari_1016' target="_blank" style="color: black;">鬼頭 明里</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/hatakenjiro' target = "-blank" style="color: black;">畑 健二郎</a></li>
				<li>Special Thanks to <a href = 'https://www.youtube.com/channel/UC-3q6G9q5GsOY2VpC5_LoRQ?app=desktop' target="_blank" style="color: black;">amous</a></li>
			</ul>
		</div>
	</div>
	<div id='contents'>
		<div id='in'>
			<p class='in'>1. She's cute.</p>
			<p class='in'>2. She's voice actor is 鬼頭 明里.</p>
			<p class='in'>3. She is a big fan of Marvel series.</p>
			<p class='in'>4. She always wears a barrette on the back of her head, made of deer skin.</p>
			<p class='in'>5. Before marrying Nasa, Tsukasa's name was 月読 司(Tsukuyomi Tsukasa).</p>
			<p class='in'>6. Tsukasa calls Nasa 'Husband' or 'Nasa Gun.'</p>
			<p class='in'>7. When asked, "Which animal do you want if you can get any animal as a pet?" she chose a turtle, "Because turtles live long."</p>
			<div style="display:inline-block; width:100%; text-align:center;"><div style="display:inline-block;"><div style="margin:10px; padding:15px; background:#fff; border:1px solid #dae2e3;"><div style="width:100%; max-width:800px;"><a href="http://iryan.kr/t6n96816ur" target="_blank"><img src="http://img.tenping.kr/Content/Upload/Images/2021010816290003_Dis_20210108170139.jpg" width="100%" style="width:100%; height:auto; border-radius:0;" alt=""></a></div><div style="margin:10px;"><div style="margin:5px 0; color:#333; font-size:16px; line-height:1.4em; height:2.6em; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; font-weight:300; text-align:left; overflow:hidden; max-width:400px;">[해커스경찰] 2022년 경찰 합격전략 설명회</div></div><div style="width:100%; margin:20px 0 5px; background-color:#f5fbff; text-align:left;"><a href="http://iryan.kr/t6n96816ur" target="_blank" style="text-decoration:none; display:block;"><div style="padding:17px 0; background-color:#dcf3ff;"><div style="line-height:1.4; margin:0; padding:0 0 0 20px; color:#234f83; font-size:21px; font-weight:300; display:inline-block;">상담 신청하기</div><div style="margin-right:20px; margin-top:-6px; float:right; display:inline-block; color:#234f83; font-size:30px; font-weight:300;">»</div></div></a></div></div></div></div>                                        
		</div>                                  
	</div>
	<div id="footer">
		<p class="copyright">Copyright ⓒ 2020. All Rights Reserved.</p>                                    
	</div>
</body>
</html>

 

 

 

style.css

@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@600&display=swap');

#header {
	width: 400px;
	height: 1000px;
	float: left;
	background-color: #edacb1;
	margin: 5px;
	border: 3px solid black;
}

#logo {
	width: 90%;
	height: 10%;
	background-color: #edacb1;
	float: left;
	margin: 30px;
}

#music {
	width: 90%;
	height: 20%;
	background-color: #edacb1;
	float: left;
	margin: 5px;
}

#lang {
	width: 90%;
	height: 50%;
	background-color: #edacb1;
	float: left;
	margin: 5px;
}

#contents {
	width: 1070px;
	height: 1000px;
	float: left;
	background-color: #edacb1;
	margin: 5px;
	border: 3px solid black;
}

#image {
	width: 1024px;
	height: 500px;
	float: center;
	margin: 28px;
	background-color: white;
}

#in {
	width: 1020px;
	height: 400px;
	float: center;
	margin: 50px;
	background-color: #edacb1;
}

#footer {
	width: 1487px;
	height: 60px;
	margin: 5px;
	background-color: #edacb1;
	float: left;
	border: 3px solid black;
}

#cim {
	display: block;
}

#mim {
	display: none;
}

.logo_style {
	font-family: 'Noto Serif JP', serif;
	color: black;
	font-size: 30px;
}

.song {
	color: black;
	font-family: 'Kosugi', sans-serif;
	text-align: center;
}

.lang {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
}

.in {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
	display: flex;
}

.copyright {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

ul {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Noto Sans JP', sans-serif;
}

a { 
	text-decoration:none 
}

img {
	display: inline-block;
	width: 1024px;
	height: 500px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#header {
		width: 96%;
		height: 120%;
	}

	#logo {
		width: 80%;
	}

	#lang {
		margin: 7px;
	}

	#cim {
		display: none;
	}

	#mim {
		display: block;
	}

	#image {
		width: 370px;
		height: 537px;
		float: center;
		margin: 5px;
		background-color: white;
	}

	#contents {
		width: 96%;
	}

	#in {
		width: 60%;
	}

	#footer {
		width: 96%;
	}

	.logo_style {
		text-align: center;
	}

	img {
		display: inline-block;
		width: 370px;
		height: 537px;
	}
}

 

사실 css만 조금 추가한ㄱ...

 

뭐 암튼 완성물은 이렇다.

 

 

전보다 훨씬 간-지나게 되었다.

 

 

반응형
저작자표시

'웹개발 > 덕질 사이트 만들기' 카테고리의 다른 글

[덕질하는 웹개발자] 츠카사 사이트 만들기 3일차 | 메뉴바, 광고 넣기  (0) 2021.01.16
[덕질하는 웹개발자] 츠카사 사이트 만들기 2일차 | 반응형 웹사이트  (0) 2021.01.01
[덕질하는 웹개발자] 츠카사 사이트 만들기 1일차 | html, css  (0) 2020.12.30

'웹개발/덕질 사이트 만들기'의 다른글

  • 현재글[덕질하는 웹개발자] 츠카사 사이트 만들기 4일차 | 애니메이션

관련글

댓글

티스토리툴바