Study/HTML5 & CSS3
HTML5 & CSS3 : transition 속성 응용 예제
posey
2022. 11. 3. 09:22
2022.11.03.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 35
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 35
<transition 속성 응용 예제>
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1103/04style.css">
<title>Accordion Menu</title>
</head>
<body>
<div id="wrap">
<ul>
<li class="scene">
<div class="movie">
<div class="poster"></div>
<div class="info">
<header>
<h2>It's a Wonderful Life</h2>
<span>1946 PG 130 minutes</span>
</header>
<p>In Bedford Falls, New York on Christmas Eve, George Bailey is
deeply troubled. Prayers for his well-being from friends and family reach Heaven. Clarence
Odbody, Angel Second Class, is assigned to visit Earth to save George, thereby earning his
wings. Franklin and Joseph, the head angels, review George's life with Clarence.</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie">
<div class="poster"></div>
<div class="info">
<header>
<h2>Vengeance Valley</h2>
<span>1951 NR 83 minutes</span>
</header>
<p>A cattle baron takes in an orphaned boy and raises him, causing his own son to resent the boy. As they get older the resentment festers into hatred, and eventually the real son frames his stepbrother for fathering an illegitimate child that is actually his, seeing it as an opportunity to get his half-brother out of the way so he can have his father's empire all to himself.</p>
</div>
</div>
</li>
<li class="scene">
<div class="movie">
<div class="poster"></div>
<div class="info">
<header>
<h2>The Gold Rush</h2>
<span>1925 NR 95 minutes</span>
</header>
<p>The Tramp travels to the Yukon to take part in the Klondike Gold Rush. He gets mixed up with some burly characters and falls in love with the beautiful Georgia. He tries to win her heart with his singular charm.</p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
color: rgb(34, 33, 33);
}
ul {
list-style: none;
}
body {
font: 1em opensans;
background: #fbc73b;
color: rgb(34, 33, 33);
}
#wrap {
width: 1200px;
margin: 100px auto 0;
}
#wrap ul {
display: flex;
}
li.scene {
width: 33.333%;
height: 400px;
perspective: 1000px;
cursor: pointer;
}
.movie {
position: relative;
width: 260px;
height: 400px;
margin: 0 auto;
transform: translateZ(-130px);
transform-style: preserve-3d;
transition: transform 0.5s;
}
.poster {
transform: translateZ(130px);
border: 1px solid rgba(81, 81, 81, 0.251);
}
.info {
transform: rotateY(90deg) translateZ(130px);
height: 400px;
border: 1px solid rgba(81, 81, 81, 0.251);
}
.info header {
position: relative;
width: 100%;
height: 195px;
padding: 5px 10px;
box-sizing: border-box;
}
.info span {
position: absolute;
left: 10px;
top: 170px;
font-size: 14px;
color: #eee;
text-shadow: 3px 1px 2px rgb(0, 0, 0);
}
.info h2 {
position: absolute;
left: 10px;
top: 135px;
color: #fff;
font-size: 24px;
text-shadow: 3px 1px 2px rgb(0, 0, 0);
}
.info p {
height: 185px;
text-align: justify;
padding: 10px;
font-size: 13px;
background: #eee;
}
.poster, info {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
}
.movie:hover {
transform: rotateY(-78deg) translateZ(20px);
}
li:first-child .poster {
background-image: url(../../images/poster01.jpg);
}
li:nth-child(2) .poster {
background-image: url(../../images/poster02.jpg);
}
li:last-child .poster {
background-image: url(../../images/poster03.jpg);
}
li:first-child .info header {
background-image: url(../../images/still01.jpg);
}
li:nth-child(2) .info header {
background-image: url(../../images/still02.jpg);
}
li:last-child .info header {
background-image: url(../../images/still03.jpg);
}
0
<transition 속성 예제>
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1103/01style.css">
<title>transition</title>
</head>
<body>
<div class="menu">
<h1>Accordion Menu</h1>
<div id="html5" class="content">
<h2><a href="#html5">HTML5</a></h2>
<p>HTML5는 HTML4을 더욱 발전시킨 마크업 언어입니다. 하지만 HTML4에서 단순히 이미지나 텍스트를 표시하던 수준에서 벗어나 화면 상에서 그림을 그리는 등 더 많은 기능을 추가한 마크업 언어입니다. 또한 HTML5는 단순히 마크업 언어로서의 기능 뿐만 아니라 자바스크립트를 사용해 프로그램을 만들 수 있는 API까지 포함하고 있습니다.</p>
</div>
<div id="css3" class="content">
<h2><a href="#css3">CSS3</a></h2>
<p>CSS는 웹 디자인이나 웹 개발에 있어서 핵심적인 요소입니다. 특히 현재 개발 중인 CSS3는 기존의 CSS에서는 할 수 없던 여러 가지 효과를 쉽게 만들 수 있고 CSS3만으로도 간단한 애니메이션을 만들 수도 있고 멋진 내비게이션을 만들 수 있기 때문에 더욱 주목을 받고 있습니다.</p>
</div>
<div id="api" class="content">
<h2><a href="#api">API</a></h2>
<p>HTML5에는 웹 애플리케이션 제작을 위한 API들이 다양하게 제시되고 있습니다. API를 이해하기 위해서는 자바스크립트 문법 뿐만 아니라 DOM(Document Object Model)에 대한 기본 지식이 필요합니다.</p>
</div>
</div>
</body>
</html>- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff);
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #fff;
}
body {
font: 1em opensans;
background: #eee;
}
.menu {
width: 600px;
margin: 0 auto;
padding: 10px;
}
h1 {
color: rgba(34, 33, 33, 0.784);
}
#html5 {
padding-top: 10px;
}
.menu h2 {
width: 100%;
margin: 10px 0;
}
.menu h2 a {
display: block;
background: linear-gradient(rgb(145, 211, 181),rgb(58, 151, 109));
padding: 10px;
border-radius: 5px;
}
.menu p {
padding: 0 10px;
height: 0;
overflow: hidden;
transition: all 1s;
}
.menu h2 a:hover, .menu :target h2 a {
background: linear-gradient(#f8edb7,#d4bc50);
color: rgba(34, 33, 33, 0.784);
}
.menu :target p {
height: 120px;
}
0
<transition 속성 예제2>
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1103/03style.css">
<title>Accordion Menu</title>
</head>
<body>
<div class="container">
<ul>
<li class="tabs">
<div class="links twitter">
<a href="#">Twitter</a>
</div>
<div class="paragraph">
<h2>Twitter</h2>
<p>My thoughts in 140 characters or less. Sometimes, I do not know how to correctly use Twitter.</p>
</div>
</li>
<li class="tabs">
<div class="links facebook">
<a href="#">Facebook</a>
</div>
<div class="paragraph">
<h2>Facebook</h2>
<p>Where I get to stalk my friends and let them stalk me. A place to get people to stroke your ego.</p>
</div>
</li>
<li class="tabs">
<div class="links linkedin">
<a href="#">LinkedIn</a>
</div>
<div class="paragraph">
<h2>LinkedIn</h2>
<p>I act totally professional on this one. It is what the recruiters see, you see.</p>
<li class="tabs">
<div class="links instagram">
<a href="#">Instagram</a>
</div>
<div class="paragraph">
<h2>Instagram</h2>
<p>Where I post my duckface pictures. Occasionally, I would post pictures of my food and my cats.</p>
<li class="tabs">
<div class="links youtube">
<a href="#">Youtube</a>
</div>
<div class="paragraph">
<h2>Youtube</h2>
<p>Just kidding! I do not have a YouTube account. I'm not too fond of the camera.</p>
<li class="tabs">
<div class="links tumblr">
<a href="#">Tumblr</a>
</div>
<div class="paragraph">
<h2>Tumblr</h2>
<p>I have a tumblr but I don't really use it. I still prefer WordPress. I'm quite old-fashioned.</p>
</div>
</li>
<li class="tabs">
<div class="links dribbble">
<a href="#">Dribbble</a>
</div>
<div class="paragraph">
<h2>Dribbble</h2>
<p>I do not have a Dribbble account. Would any of you be so kind and send me an invite?</p>
</div>
</li>
</ul>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
@font-face {
font-family: genericons;
src: url(../fontawesome-free-6.2.0-web/webfonts/genericons-regular-webfont.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: rgb(34, 33, 33);
}
body {
font: 1em opensans;
background: rgb(91, 91, 91);
color: rgb(34, 33, 33);
}
.container ul {
width: 930px;
height: 200px;
list-style: none;
background: #b5ce7d;
}
.container ul li.tabs {
position: relative;
float: left;
width: 80px;
height: 200px;
background: #b5ce7d;
border-right: 1px solid rgba(0,0,0,0.2);
cursor: pointer;
overflow: hidden;
box-sizing: border-box;
transition: all 1s ease-in-out 0.5s;
}
.container ul li.tabs:hover {
width: 450px;
}
.container ul li.tabs .paragraph {
margin-left: 80px;
background: #eee;
width: 370px; /* 450px-80px */
height: 200px;
box-sizing: border-box;
padding: 50px 10px 0 10px;
}
.container ul li.tabs .links a {
display: block;
text-indent: -9999px;
line-height: 0;
}
.container ul li.tabs .links a::before,
.container ul li.tabs .links a::after {
position: absolute;
left: 0;
top: 0;
width: 80px;
font-family: genericons;
font-size: 36px;
display: block;
color: #fff;
text-indent: 0;
line-height: 200px;
text-align: center;
}
.container ul li.tabs .links a::after {
font-size: 36px;
color: rgb(31, 191, 255);
margin-left: -85px;
}
.container ul li.tabs:hover .links a::after {
margin-left: 0;
}
.container ul li.tabs:hover .links a::before {
margin-left: -85px;
}
.container ul li.tabs .twitter a::before,
.container ul li.tabs .twitter a::after {
content: "\f202";
}
.container ul li.tabs .facebook a::after {
color: #1877f2;
}
.container ul li.tabs .facebook a::before,
.container ul li.tabs .facebook a::after {
content: "\f204";
}
.container ul li.tabs .linkedin a::after {
color: #2977c9;
}
.container ul li.tabs .linkedin a::before,
.container ul li.tabs .linkedin a::after {
content: "\f208";
}
.container ul li.tabs .instagram a::after {
background: linear-gradient(to bottom,#3e2dd7, #d03896, #eed49c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container ul li.tabs .instagram a::before,
.container ul li.tabs .instagram a::after {
content: "\f215";
}
.container ul li.tabs .youtube a::after {
color: #e90505;
}
.container ul li.tabs .youtube a::before,
.container ul li.tabs .youtube a::after {
content: "\f213";
}
.container ul li.tabs .tumblr a::after {
color: #000;
}
.container ul li.tabs .tumblr a::before,
.container ul li.tabs .tumblr a::after {
content: "\f214";
}
.container ul li.tabs .dribbble a::after {
color: #ea4c89;
}
.container ul li.tabs .dribbble a::before,
.container ul li.tabs .dribbble a::after {
content: "\f201";
}
0
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1103/05style.css">
<title>Tab Menu</title>
</head>
<body>
<div class="tab">
<input type="radio" name="tab" id="html5" checked>
<input type="radio" name="tab" id="css3">
<div class="title">
<label for="html5">HTML5</label>
<label for="css3">CSS3</label>
</div>
<div class="tab_item">
<ul>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">HTML5</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">HTML5</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">HTML5</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">HTML5</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">HTML5</a>
<span>2022.11.03.</span>
</p>
</li>
</ul>
</div>
<div class="tab_item">
<ul>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">CSS3</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">CSS3</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">CSS3</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">CSS3</a>
<span>2022.11.03.</span>
</p>
</li>
<li>
<img src="https://via.placeholder.com/45" alt="45">
<p>
<a href="#">CSS3</a>
<span>2022.11.03.</span>
</p>
</li>
</ul>
</div>
</div>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
a {
color: #777;
}
ul {
list-style: none;
}
body {
font: 13px opensans;
color: #333;
}
input[type=radio] {
display: none;
}
.tab {
width: 200px;
margin: 50px auto;
border: 1px solid #ccc;
}
.title {
display: flex;
}
.title label {
display: block;
width: 50%;
height: 30px;
line-height: 30px;
background: #eee;
text-align: center;
}
.tab_item ul li {
display: flex;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.tab_item ul li p {
margin-left: 10px;
}
.tab_item ul li a {
display: block;
}
.tab_item ul li:last-child {
border-bottom: none;
}
#html5:checked ~ .title label:first-child {
background: #fff;
border-right: 1px solid #ccc;
}
#html5:checked ~ .title label:last-child {
border-bottom: 1px solid #ccc;
}
#html5:checked ~ div:nth-of-type(3) {
display: none;
}
#css3:checked ~ .title label:first-child {
border-bottom: 1px solid #ccc;
}
#css3:checked ~ .title label:last-child {
background: #fff;
border-left: 1px solid #ccc;
}
#css3:checked ~ div:nth-of-type(2) {
display: none;
}
0
<Banner에 적용하는 transition 속성 예제>
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1103/06style.css">
<title>Banner transition</title>
</head>
<body>
<ul>
<li>
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
</li>
</ul>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
body {
font: 13px opensans;
background: #f0f0f0;
color: #333;
margin: 50px;
}
a {
color: #777;
}
ul {
list-style: none;
}
li {
position: relative;
width: 50%;
height: 200px;
background: #f0f0f0;
}
.line {
position: absolute;
background: #69d09c;
z-index: 1;
}
.line-top {
width: 100%;
height: 5px;
left: 0;
top: 0;
transform: scaleX(0);
transform-origin: 0 0;
transition: transform 0.5s ease-in-out 1.5s;
}
ul li:hover .line-top {
transform: scaleX(1);
transition: transform 0.5s ease-in-out 0s;
}
.line-right {
width: 5px;
height: 100%;
right: 0;
top: 0;
transform: scaleY(0);
transform-origin: 0 0;
transition: transform 0.5s ease-in-out 1s;
}
ul li:hover .line-right {
transform: scaleY(1);
transition: transform 0.5s ease-in-out 0.5s;
}
.line-bottom {
width: 100%;
height: 5px;
left: 0;
bottom: 0;
transform: scaleX(0);
transform-origin: 100% 100%;
transition: transform 0.5s ease-in-out 0.5s;
}
ul li:hover .line-bottom {
transform: scaleX(1);
transition: transform 0.5s ease-in-out 1s;
}
.line-left {
width: 5px;
height: 100%;
left: 0;
top: 0;
transform: scaleY(0);
transform-origin: 100% 100%;
transition: transform 0.5s ease-in-out 0s;
}
ul li:hover .line-left {
transform: scaleY(1);
transition: transform 0.5s ease-in-out 1.5s;
}
0
와 이건 시간 차를 둬야하니 너무 헷갈렸다.
hover 상태에서 transition을 설정하는 것까지는 할 만한데, 마우스를 뗐을 때 line이 사라지는
시간 차까지 생각하니 골치가 아팠다.
차근차근 머리를 굴리며 예제를 완성했다 -
배너에 마우스를 올렸을 때 이렇게 동적인 애니메이션을 넣기 위한 예제인데, 앞으로 유용하게
쓰일 것 같다.
<Banner에 적용하는 transition 속성 예제2>
- HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../1103/07style.css">
<title>Banner transition</title>
</head>
<body>
<ul>
<li>
<span class="line line-top"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
<span class="line line-left"></span>
</li>
</ul>
</body>
</html>
- CSS
@charset "utf-8";
@font-face {
font-family: opensans;
src: url(../fontawesome-free-6.2.0-web/webfonts/OpenSans-Regular.woff) format("woff");
}
* {
padding: 0;
margin: 0;
}
body {
font: 13px opensans;
background: #f0f0f0;
color: #333;
margin: 50px;
}
ul {
list-style: none;
}
li {
position: relative;
width: 50%;
height: 200px;
background: #f0f0f0;
}
.line {
position: absolute;
background: #555555;
z-index: 1;
}
.line-top {
width: 100%;
height: 1px;
left: 0;
top: 0;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
}
.line-right {
width: 1px;
height: 100%;
right: 0;
top: 0;
transform: scaleY(0);
transition: transform 0.5s ease-in-out;
}
.line-bottom {
width: 100%;
height: 1px;
left: 0;
bottom: 0;
transform: scaleX(0);
transition: transform 0.5s ease-in-out;
}
.line-left {
width: 1px;
height: 100%;
left: 0;
top: 0;
transform: scaleY(0);
transition: transform 0.5s ease-in-out;
}
ul li:hover .line {
transform: scaleX(1) scaleY(1);
transition: transform 0.5s ease-in-out;
}
0
이건 바로 위의 예제에 비하면 식은 죽 먹기다.
왜냐하면 마우스를 뗐을 때 시간 차를 두지 않아도 되기 때문 !
예전에 극동건설 메인 페이지를 만들 때 transition 속성을 배우지 않아 이 부분까지는 구현하지
못했는데, 이제는 동적인 배너까지 구현할 수 있을 것 같다.
반응형