웹프로그래밍 기초/B반소스자료
위치속성과 변형,애니메이션
이데렐라
2023. 5. 11. 16:17
반응형
위치
<!DOCTYPE html>
<html>
<head>
<title>위치속성 테스트</title>
<style>
div{width: 300px; height: 150px;}
.redBox{background-color: red;}
.blueBox{background-color:blue;
/*position: relative;*/
}
.small{width:50px; height: 50px;
background-color: pink;
position: absolute;
top:1000px;
left:10px;
}
.header{width: 100%;height: 80px;
background-color: orange;
position: fixed; top:0px; left:0px;
box-shadow: 10px 10px 3px 6px red;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */
background: #ffaf4b; /* Old browsers */
background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.header ul{list-style: none;}
.header ul li{float: right;padding: 10px 20px;}
.clear{clear: both;}
</style>
</head>
<body>
<div class="header">
<ul>
<li>Home</li>
<li>Profile</li>
<li>Contact</li>
</ul>
</div>
<div class="clear"></div>
<div class="redBox">
</div>
<div class="blueBox">
<div class="small">TEST</div>
</div>
</body>
</html>변형/애니메이션
<!DOCTYPE html>
<html>
<head>
<title>변형속성</title>
<style>
.bar{width: 100px; height: 100px;
background-color: red;
transition: width 2s, height 1s;
transition-timing-function: ease-in-out;
/*
transition-property: width;
transition-duration: 2s;
transition-delay: 0s; */
}
.bar:hover{background-color: orange;
width: 500px;height: 150px;}
.circle{width:100px; height:100px;
background-color: pink;
border-radius:100px;
animation-name: circleAni;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes circleAni{
0%{
margin-left: 0px;
}
100%{
margin-left: 500px;
background-color: red;
}
}
</style>
</head>
<body>
<div class="bar"></div>
<div class="circle"></div>
</body>
</html>반응형