간단한 CSS 마우스 부동 효과
1825 단어 프런트엔드
우선 가장 간단한 HTML입니다. 저는 두 개의 DIV만 설정해서 관찰하기 편리하고 흥미와 기술이 있으면 자체적으로 확장할 수 있습니다. 예를 들어 그림 축소 등을 추가할 수 있습니다.
HTML 코드:
CSS 코드:
.all{
width: 200px;
height: 200px;
border: solid 1px #e1e2e3;
margin: auto;
transition: .1s;
}
.title{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #e1e2e3;
font-size: 20px;
transition: .3s;
}
.all:hover{
box-shadow: 0 0 10px #0ff;
border-color:#0ff;
width: 500px;
height: 400px;
}
.all:hover .title{
background-color:#0ff;
color:#fff;
height: 150px;
line-height: 150px;
}
이 중에서 일반적인 설정을 제외하고 CSS의 hover 선택기가 가장 중요합니다.
과도한 효과transition 속성
통과all:hover는 마우스가 이 DIV(all)에 떠있을 때 얻을 수 있는 효과를 설정할 수 있습니다
그러나all:hover .title는 마우스를 이동시킬 수 있습니다.all 시.타이틀 효과
transition 속성 설정은 이러한 과도 효과 시간에 변화를 일으킬 수 있습니다. 얼마나 많은 변화는 당신이 스스로 설정한 값에 달려 있습니다. 저는 여기에 각각 0.1s와 0.3s를 설정했습니다.
코드의 양을 절약하기 위해서, 0을 빼고 쓰지 않아도 된다.
이것은 단지 자신의 무료한 놀이일 뿐이다. 일반적으로 HTML과 CSS를 배운 사람들은 이런 효과에 대해 믿는 것도 손쉽게 가져온다.
나중에 JavaScript에 대한 작은 지식이 올라올 수도 있는데...상황을 보아라, 나는 비교적 자유로운 사람이다 23333.