CSS 3 동적 리 메 이 크 효과 구현
1.HTML 코드:
CSS 3 구현 이기 때문에 어떠한 JS 코드 도 보이 지 않 는 다.l 은 한 그룹의 그림 입 니 다.모든 li 에는 a 가 있 습 니 다.(그림 을 클릭 하면 점프 할 수 있 기 때 문 입 니 다)a 에는 두 개의 div 가 포함 되 어 있 습 니 다.하 나 는 정상적으로 표 시 될 때(즉,그림 표시)이 고 하 나 는 그림 이 회전 한 후에 표 시 됩 니 다.(즉,소개)
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title> CSS3 </title>
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/tieba.brand.css">
</head>
<body>
<h1> CSS3 </h1>
<h2>powered by <a href="http://blog.wangjunfeng.com" target="_blank"> </a></h2>
<div id="content">
<ul>
<li>
<a href="http://blog.wangjunfeng.com" target="_blank">
<div><img alt="" src="images/1.jpg"/></div>
<div>
<h3> </h3>
<p> 《 》 。 ， ， ， 。</p>
</div>
</a>
</li>
<li>
<a href="http://blog.wangjunfeng.com" target="_blank">
<div>
<img alt="" src="images/2.jpg"/>
</div>
<div>
<h3> </h3>
<p> 《 》 3 。 ， 。 ， ， ， 。</p>
</div>
</a>
</li>
<li>
<a href="http://blog.wangjunfeng.com" target="_blank">
<div><img alt="" src="images/3.jpg"/></div>
<div>
<h3> ・D・ </h3>
<p> ・D・ 《 》 。 《 》 。 ， ―― ONE PIECE， 。</p>
</div>
</a>
</li>
<li>
<a href="http://blog.wangjunfeng.com" target="_blank">
<div>
<img alt="" src="images/4.jpg"/>
</div>
<div>
<h3> </h3>
<p>Danbo DIY ， ， ， ，Danbo ， ， 。</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
나 는 이미 안쪽 부분 에 주석 을 달 았 으 니 쉽게 이해 할 수 있 을 것 이다.
#content ul{
width:960px;
padding:60px 0;
margin:0 auto;
}
#content ul li{
width:225px;
height:180px;
margin-right:20px;
float:left;
}
#content ul li:last-child{
margin-right: 0;
}
#content ul li a{
display:block;
height:180px;
/*
：
perspective 3D ， 。 3D 3D 。
perspective ， ， 。
*/
-webkit-perspective:500px;
-moz-perspective:500px;
-ms-perspective:500px;
perspective:500px;
position: relative;
}
#content ul li a > div{
top:0;
left:0;
width:100%;
height:180px;
color:#fff;
/*
3D 。
*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
/*
div
*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transition:0.8s ease-in-out ;
-moz-transition:0.8s ease-in-out ;
-ms-transition:0.8s ease-in-out ;
position:absolute;
}
#content ul li a div:first-child{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
z-index: 2;
}
#content ul li a:hover div:first-child{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
}
#content ul li a div:last-child{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
z-index: 1;
background:url('../images/bg.jpg') no-repeat;
}
#content ul li a:hover div:last-child{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
z-index: 1;
}
#content ul li a div h3{
margin:0 auto 15px;
padding:15px 0;
width:200px;
height:16px;
line-height:16px;
font-size: 14px;
text-align: center;
border-bottom:1px #fff dashed;
}
#content ul li a div p{
padding:0 10px;
font-size: 12px;
text-indent: 2em;
line-height:18px;
}
기본 그림 rotateY=0;마우스 가 가리 키 는 것 은 rotate Y=-180,음수,즉 시계 반대 방향 으로 Y 축 을 돌 고 정 수 는 시계 반대 방향 이다.다른 두 축 은 같은 이치 이다.마우스 가 가리 킬 때:그림(div:first-child),0 도 에서 y 축 을 시계 반대 방향 으로 180 도 회전 하여-180 도 에 도달 합 니 다.소개(div:last-child)180 도 에서 y 축 을 시계 반대 방향 으로 180 도 회전 하여 0 도 에 도달 합 니 다.두 개의 시계 반대 방향 으로 회전 하 는 효 과 를 가 져 옵 니 다.기본 값 이 0 도 가 아 닌 이 유 를 묻 는 사람 도 있 을 수 있다.여기 서 는 시계 반대 방향 으로 180 도 회전 한 뒤 긍정 적 인 상 태 를 소개 하기 때문에 배 그림 이 가 려 질 때 정상 상태 에서 시계 반대 방향 으로 180 도 회전 한 셈 이다.마우스 가 가리 킬 때 정상 상태 로 돌아 가 야 하기 때문이다.
소스 코드 다운로드
http://xiazai.jb51.net/201605/yuanma/CSS3_BaiduTieba_Flop%28jb51.net%29.rar
총화
CSS 3 는 transform 과 같은 새로운 특성 을 많이 제공 합 니 다.우 리 는 이러한 특성 을 사용 할 때 새로운 브 라 우 저 만 호 환 할 수 있 습 니 다.IE6,7,8 과 같은 오래된 골동품 을 호 환 하 는 것 이 좋 지 않 지만 이 정도 면 충분 합 니 다.예 를 들 어 위의 예 는 IE6,7,8 등 탐색 기 에서 특수 효 과 를 나타 내지 않 고 그림 만 표시 하 며 보기 싫 지 않 습 니 다.HTML 5 와 CSS 3 를 호 환 하 는 다른 브 라 우 저 에서 필 터 를 볼 수 있 습 니 다.과도 한 JS 사용 을 피 하 는 동시에 새로운 브 라 우 저 에 멋 진 효 과 를 나타 내 는 효 과 를 얻 었 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
