[CSS] 22. Animation
5862 ワード
1）反応式グリッドシステム
2) Multiple-column layout
一つをいくつかに分けたい時に使います.
一部のブラウザでは使用できません.
上と一緒にやりましょう
<div class="multi-col-box">
(1절)
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라만세
(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
(2절)
남산위에 저 소나무 철갑을 두른듯
바람서리 불변함은 우리기상 일세
(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
(3절)
가을하늘 공활한데 높고 구름없이
밝은달은 우리가슴 일편단심일세
(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
(4절)
이 기상과 이 맘으로 충성을 다하여
괴로우나 즐거우나 나라사랑하세
(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이보전하세
</div>.multi-col-box{
column-count: 3;
column-width: 200px;
column-gap: 40px;
column-rule: 3px dotted blueviolet;
}
3)CS 3アニメーション
Transitionとは?属性値の変更プロセスの効果を表示
2つの値の変化(値(初期値)から2つの値)を指定する必要があります.
時間の変化を表す.
Transitionを適用しないと瞬時に変化します.
transition-durationだけで実現できます.Transition-propertyはターゲットを指定します.
Transition-drationは変化の時間を決定する.
適用を試みる
.top-menu>ul>li>a {
text-align: center;
color:#fff;
background-color: #0009;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0px; (초기값)
transition-duration: 400ms ; -> 시간만 정할거면
transition은 한번에 지정할때
}
.top-menu>ul>li:hover>a{
position: relative;
top: -100px;
}transition-duration: 400ms ; -> 時間を決めるならこれを使いましょう
lihover>aにwidth:200%を追加すると、top値の影響だけでなく、他の影響も受けます.
topに限定するにはtransition-property:top;追加
transitionは、すべてのコンテンツを指定します.
transition: top 1s, width 5s;を使用すると、上向きの幅が1 s,5 s変化します.マウスをクリーンアップすると、一気に消えてしまいます.アニメーションを指定したい場合は...
4）CSSに拡張する変換属性
既存のプロパティを使用できないのはなぜですか?
1)初期値の指定が必要な不便さ.
2)他の属性も、他の要素の問題を修正または影響します.
適用を試みる
.top-menu>ul>li>a {
text-align: center;
color:#fff;
background-color: #0009;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 0%;
transition: 1s ;
}
.top-menu>ul>li:hover>a{
position: relative;
margin-top: -100%;
}.top-menu>ul>li>a {
text-align: center;
color:#fff;
background-color: #0009;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
transition: 1s ;
}
.top-menu>ul>li:hover>a{
transform: translateY(-100px); -> Y방향만 적용
}transformにtransformを適用する場合は、transformを使用するだけです.
初期値を気にする必要はありません.
5）実習
.rland{
padding: 10px 0; 위 아래 간격을 위해 패딩을 준다.
}
.rland>div{
display: grid;
grid-template: 100px/ repeat(auto-fill, minmax(360px,auto));
}
.rland>article{
padding: 10px 27px; 좌우위아래 영역을 확보해 넓힌다.
display: grid;
grid-template:
"img title" 35px
"img content" 65px
/ 100px 1fr;
column-gap: 20px;
cursor: pointer; 마우스가 올라가면 클릭할 수 있는 모양으로 바뀐다.
transition: background-color 5s; 마우스를 올리면 영역 배경이 바뀐다.
}
.rland>article:hover{
background-color: yellowgreen; 영역 배경색
}
.rland>article:nth-child(2n+1){ n은 0부터 시작하므로 2n+1은 1부터 시작한다.
grid-template:
"title img" 35px
"content img" 65px
/ 1fr 100px;
column-gap: 20px;
}
.rland>article>h1{
/* text */
font-family: 'Nanum Pen Script', cursive;
font-weight: normal;
font-size: 22px;
white-space: nowrap; 글자가 wrapping 되지 않게 한다.
overflow: hidden; 밀린 글자를 숨긴다.
text-overflow: ellipsis; 숨긴 글자가 있음을 나타낸다.
grid-area: title;
align-self: center;
}
.rland>article>div{
grid-area: img;
}
.rland>article>div>img{
border-radius: 20px 0 0 20px;
width: 100%;
height: 100%;
object-fit: cover;
transition: border-radius 600ms; transition을 적용한다.
}
.rland>article:nth-child(2n+1)>div>img{
border-radius: 0 20px 20px 0;
}
.rland>article:hover>div>img{
border-radius: 0 ; 접힌 부분이 펴지는 효과
}
.rland>article>p{
/* text */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
grid-area: content;
}
.rland>article>p{
/* text */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
grid-area: content;
}Reference
この問題について([CSS] 22. Animation), 我々は、より多くの情報をここで見つけました https://velog.io/@psh94/1229テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol