<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
@keyframes ani1 {
0% {
left: 0px;
}
25% {
left: 100px;
transform:rotate(90deg);
background: blue;
}
50% {
left: 200px;
background: yellow
transform:rotate(180deg);
}
75% {
left: 300px;
background: orange;
transform:rotate(270deg);
}
100% {
left: 400px;
background: silver;
transform:skewX(360deg);
}
}
.div1 {
width: 100px;
height: 100px;
animation-name: ani1;
animation-duration: 2s;
animation-iteration-count: infinite;
/*애니메이션의 속도 조절/ linear : 일정, ease-in : 가다 멈추고 가다 멈추고
ease-out : 중간에 잠깐 빨라짐, ease-in-out : 처음에 빠르다 일정해짐*/
animation-timing-function: ease-in-out;
/*위치를 이동하려면 해당 테그의 포지션값을 변경해줘야 한다.*/
position: relative;
}
.div2 {
width: 100px;
height: 100px;
animation-name: ani1;
animation-duration: 2s;
animation-iteration-count: infinite;
/*애니메이션의 속도 조절/ linear : 일정, ease-in : 가다 멈추고 가다 멈추고
ease-out : , ease-in-out : */
animation-timing-function: ease-out;
/*위치를 이동하려면 해당 테그의 포지션값을 변경해줘야 한다.*/
position: relative;
}
</style>
</head>
<body>
<div class="div1">
</div><br><br>
<div class="div2">
</div>
</body>
</html>
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
@keyframes ani {
0% {
transform: rotate(0deg);
}
25% {
border-radius: 50% 0% 0% 0%;
transform: rotate(90deg);
}
50% {
border-radius: 50% 50% 0% 0%;
transform: rotate(180deg);
}
75% {
border-radius: 50% 50% 50% 0%;
transform: rotate(270deg);
}
100% {
border-radius: 50% 50% 50% 50%;
transform: rotate(360deg);
}
}
@keyframes ani2 {
0% {opacity: 0;}
100% {opacity: 1;}
}
.div2 {
animation-name: ani;
animation-duration: 10s;
animation-iteration-count: infinite;
width: 800px;
height: 800px;
margin: 0 auto;
background: black;
padding-top: 300px;
box-sizing: border-box;
}
span {
animation-name: ani2;
animation-duration: 2s;
animation-delay: 8s;
animation-iteration-count: infinite;
color: white;
font-size: 100px;
margin-bottom: : 0;
opacity: 0;
}
.div1 {
width: 200px;
height: 200px;
background: white;
border-radius: 100px 100px 100px 100px;
}
.div2 >.div1 {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">
</div>
<span>Welcom</span>
</div>
</body>
</html>
-----------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
@import url('https://fonts.googleapis.com/css?family=Anton');
body {
padding: 0px;
margin: 0px;
font-family: 'Anton', sans-serif;
}
div {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 70px;
}
#dH2 {
font-size: 40px;
}
#wrapper {
width: 100%;
height: 1700px;
margin: 0px;
padding: 0px;
}
#divTop {
width: 100%;
height: 3%;
margin: 0px;
padding: 0px;
background: #000000;
font-size: 12px;
font-family: sans-serif;
}
#divTop>ul {
list-style-type: none;
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-align: center;
padding-right: 10px;
}
#divTop>li {
float: left;
}
#spotify {
margin: 0px;
padding: 0px;
float: left;
}
#divTop>ul>li>a {
text-decoration: none;
color: #ffffff;
float: right;
display: block;
padding-left: 20px;
line-height: 50px;
}
#display {
width: 100%;
height: 37%;
background-size: 100% 100%;
background-image: url('img/display.jpg');
background-repeat: no-repeat;
text-align: center;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#main {
width: 100%;
height: 42%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#footer {
width: 100%;
height: 18%;
box-sizing: border-box;
text-align: center;
}
#display>h1{
margin: 0px;
padding: 30px;
color: white;
}
#display h2{
color: white;
margin: 0px;
margin-bottom: 10px;
}
#display a {
text-decoration: none;
font-size: 5px;
color: white;
}
#display>input {
width: 150px;
height: 30px;
margin-top: 50px;
margin-right: 10px;
}
#dA {
padding-top: 50px;
font-family: sans-serif;
}
#span {
color: white;
width: 110px;
height: 30px;
border: 1px solid #1db954;
border-radius: 30px 30px 30px 30px;
background-color: #1db954;
display: inline-block;
line-height: 30px;
}
#span:HOVER {
background-color: #1ed760;
}
#mainsection1>h1 {
font-size: 50px;
text-align: center;
margin: 0px;
padding: 0px;
}
#mainsection2>table>tr>td img {
width: 100%;
height: 300px;
}
#mainsection2 {
width: 100%;
margin: 0px;
padding: 0px;
}
#mainsection2 table{
width: 100%;
padding: 0px;
}
#mainsection2>table tr {
text-align: center;
}
#mainsection2>table>tbody>tr>td>img {
width: 100%;
height: 300px;
}
#footer>table {
width: 100%;
height: 100%;
font-size: 10px;
font-family: sans-serif;
background-color: black;
color: white;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="divTop">
<ul>
<li id="spotify"><a href="#"><img src="img/spotify_main.jpg" alt="spotify"></a></li>
<li><a href="#"><b>Log in</b></a></li>
<li><a href="#"><b>Sign up</b></a></li>
<li><a href="#"><b>Download</b></a></li>
<li><a href="#"><b>Help</b></a></li>
<li><a href="#"><b>Premium</b></a></li>
</ul>
</div>
<div id="display">
<br><h1>Not available in locale</h1>
<h2 id="dH2">Be the first to know when we launch.</h2>
<input type="text" autocomplete="">
<span id="span">SIGN UP</span><br><br><br><br>
<a href="#" id="dA">Sign up with Facebook</a>
</div>
<div id="main">
<div id="mainsection1">
<h1>Spotify gives you instant access to millions of songs from <br>
old favorites to the latest hits. Just hit play to stream anything <br>
you like.</h1>
</div>
<div id="mainsection2">
<table>
<tr>
<td><img src="img/main1.jpg" alt="main1"></td>
<td><img src="img/main2.jpg" alt="main2"></td>
<td><img src="img/main3.jpg" alt="main3"></td>
<td><img src="img/main4.jpg" alt="main4"></td>
</tr>
<tr>
<td><h2>Listen everywhere</h2></td>
<td><h2>Unlimited, ad-free musci</h2></td>
<td><h2>Download music & listen offiline</h2></td>
<td><h2>Premium sounds better</h2></td>
</tr>
<tr>
<td><b>Spotify works on your computer,<br>mobile, tablet and TV.</b></td>
<td><b>No ads. No interruptions. Just <br>music.</b></td>
<td><b>Keep playing. even when you dont't <br> have a connection.</b></td>
<td><b>Get ready for incredible sound <br> quality</b></td>
</tr>
</table>
</div>
</div>
<div id="footer">
<table>
<tr>
<td rowspan="4"><img src="img/spotify_main.jpg"></td>
<td><b>company</b></td>
<td><b>communitites</b></td>
<td><b>useful links</b></td>
<td rowspan="4"><img src="img/sns.jpg"></td>
</tr>
<tr>
<td>Aboit</td>
<td>Artists</td>
<td>Help</td>
</tr>
<tr>
<td>Jobs</td>
<td>Labels</td>
<td>Gift</td>
</tr>
<tr>
<td>Press</td>
<td>Developers</td>
<td>Web player</td>
</tr>
</table>
</div>
</div>
</body>
</html>
'노트필기' 카테고리의 다른 글
| [Web] JSP class0719-1 (0) | 2017.07.19 |
|---|---|
| [Web] Servlet class07-19 (0) | 2017.07.19 |
| [Web] JSP class 0717-1 (0) | 2017.07.17 |
| [Web] CSS class0717-2 (0) | 2017.07.17 |
| [Web] class0717-1 (0) | 2017.07.17 |
