<HTML>
<body>
<h2>transition2</h2>
<div id="ex">
<div id="no-delay" class="box">
<p>(～￣▽￣)～</p>
</div>
<div id="delay" class="box">
<p>༼ つ ◕_◕ ༽つ</p>
</div>
</div>
</body>
<CSS>
<style>
h2 {
text-align: center;
}
#ex {
position: relative;
width: 800px;
height: 400px;
margin: 0 auto;
border: 5px solid black;
padding: 30px;
}
p {
text-align: center;
padding-top: 50px;
font-weight: bold;
}
.box {
font-size: 20px;
position: relative;
width: 140px;
height: 140px;
margin-bottom: 50px;
background-color: gold;
}
#ex:hover > .box {
transform: rotate(720deg);
margin-left: 650px;
}
#no-delay {
transition-duration: 3s;
}
#delay {
transition-delay: 1s;
transition-duration: 2s;
}
</style>
'HTML,CSS' 카테고리의 다른 글
| (49)CSS_CSS 우선순위 (0) | 2023.04.10 |
|---|---|
| (48)CSS_CSS animation (0) | 2023.04.10 |
| (46)CSS_CSS transition2 (0) | 2023.04.10 |
| (45)CSS_CSS transform1 (0) | 2023.04.10 |
| (44)CSS_미디어 쿼리 연습 (0) | 2023.04.10 |
