CSS 애니메이션 기울기, 비율, 이동
2019. 11. 7. 11:40
Programing/Web Programming
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
H1{
text-shadow: 5px 5px 5px;
color:blue;
text-align: center;
width:30%;
height:50px;
margin-left:25%;
border:2px solid black;
box-shadow: 2px 2px 0px black;
}
img{
padding:20px;
margin-bottom:20px;
margin-right:25px;
}
img.shadow1{
width:300px;
box-shadow: 5px 5px 10px black;
padding:10px;
float:left;
transition: transform 1s;
}
img.shadow1:hover{
transform: rotate(10deg);
}
img.shadow2{
width:300px;
box-shadow: -5px 5px 10px black;
padding:10px;
float:left;
transition: transform 1s;
}
img.shadow2:hover{
transform: scale3d(1.1 1.1 1.1);
transform: scaleX(1.1) scaleY(1.1);
}
img.shadow3{
width:300px;
box-shadow: 5px -5px 10px black;
padding:10px;
float:left;
transition: transform 1s;
}
img.shadow3:hover{
transform: translateX(30px) translateY(20px);
}
div:hover{
background:gray;
margin:20px;
}
div.a{
border:2px solid;
float:left;
width:270px;
margin: 10px;
border-radius: 0px 0px 0px 25px;
padding:15px;
margin-right:25px;
}
div.b{
border:2px solid;
float:left;
width:270px;
margin: 10px;
padding:15px;
margin-right:40px;
}
div.c{
border:2px solid;
float:left;
width:270px;
margin: 10px;
border-radius: 0px 0px 25px 0px;
padding:15px;
}
</style>
</head>
<body>
<H1>전주 가을을 입다</H1>
<img class="shadow1" src="Flower1.jpg"></img>
<img class="shadow2" src="Flower2.jpg"></img>
<img class="shadow3" src="Flower3.jpg"></img>
<p>
<div class="a">
전주 19번도로 완주 국도변을 지나가 보세요. 빨강, 분홍, 흰 물결이 하늘거리는 코스모스 꽃길을 만날 수 있읍니다.
어제 귀경길 뜻밖에 행운(?)을 접하고,먼 옛날 비포장 코스모스 꽃길로 기억을 되돌려 보았읍니다.
</div>
<div class="b">
정말 줄 세워놓은 것처럼 곧게 자란 나무들이 저를 반깁니다^^
우리나라에서 이렇게 나무들이 반듯하게 심어진 곳으로 사람들이 걸어 다닐 수 있는 곳이 또 얼마나 되려는지 모르겠습니다.
정말 아름답습니다.
</div>
<div class="c">
우리 나라의 제주도와 일본이 원산지인 목련은 잎은 달걀 모양이며 꽃은 이른 봄 잎이 돋아나기 전에
다른 꽃보다 먼저 핀다. 3월에 흰꽃이 피는 백목련과 3~4월에 붉은색 꽃이 피는 자목련, 일본목련 등이 있다.
</div>
</body>
</html>
'Programing > Web Programming' 카테고리의 다른 글
| JavaScript prompt로 값 받아 계산하는 함수 (0) | 2019.11.21 |
|---|---|
| PHP에서 외부 주소 JSON 언파싱 (0) | 2019.11.17 |
| CSS 기울기 색 변형효과 transform, 레이아웃 설정 (0) | 2019.11.05 |
| HTML 공 튕기기 (0) | 2019.10.31 |
| HTML 좌우 움직임 (0) | 2019.10.31 |