그림 터치 및 뒤집기 효과 css3
17285 단어 css3
html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8" />
<title> CSS3</title>
</head>
<body>
<div class="page">
<ul id="box">
<li>
<div class="div1">
<img src="Images/m.png" alt=""/></div>
</li>
<li>
<span></span><div class="div2">
<img src="Images/w.png" alt=""/></div>
</li>
<li>
<span></span><div class="div3">
<img src="Images/k.png" alt=""/></div>
</li>
<li>
<span></span><div class="div4">
<img src="Images/t.png" alt=""/></div>
</li>
</ul>
</div>
</body>
</html> 2.css 섹션:
@-webkit-keyframes "mixovMove"
{
0%
{
-webkit-animation-timing-function:ease;
left:-300px;
-webkit-transform:rotateY(0deg) scale(0);
opacity:0;
}
50%
{
left:700px;
-webkit-transform:rotateY(0deg) scale(0.4);
opacity:1;
}
100%
{
-webkit-transform:rotateY(360deg) scale(1);
}
}
html
{
height:100%; margin:0 auto; position:relative;
}
body
{
background:url(Images/miaov.jpg) no-repeat center 0; margin:0 auto; overflow:hidden; padding-top:128px;
}
ul
{
margin:0; padding:0;
}
li
{
list-style:none;
}
.page
{
height:615px; background:url(Images/1-bg.png) no-repeat;position:relative;overflow:hidden; -webkit-transform-style:preserve-3d;-webkit-perspective:100; margin:0 auto; width:1024px; /* perspective 3D 。*/
}
#box
{
width:760px; height:170px; position:absolute; top:150px; left:132px;
}
li
{
float:left; margin:0 10px; width:170px; height:170px; position:relative;
}
#box div
{
width:170px; height:170px; -webkit-transform:translateZ(-100px) rotateY(0deg); -webkit-transition:300ms -webkit-transform linear;
}
#box span
{
position:absolute; left:0; top:0; width:170px; height:170px;
}
#box img
{
display:none; -webkit-transform:rotateY(180deg);
}
.div1
{
background:url(Images/c.png) no-repeat;
}
.div2
{
background:url(Images/s-1.png) no-repeat;
}
.div3
{
background:url(Images/s-2.png) no-repeat;
}
.div4
{
background:url(Images/3.png) no-repeat;
}3. js 섹션:
<script>
window.onload = function () {
var oBox = document.getElementById("box");
var aLi = oBox.getElementsByTagName("li");
var aImg = oBox.getElementsByTagName("img");
var aDiv = oBox.getElementsByTagName("div");
for (var i = 0; i < aLi.length; i++) {
aLi[i].left = aLi[i].offsetLeft;
aLi[i].style.left = "-200px";
aLi[i].style.top = "0";
aLi[i].index = i;
aLi[i].oTimer = null;
aLi[i].style["WebkitTransform"] = "rotateY(0deg) scale(0)";
}
for (var i = 0; i < aLi.length; i++)
{
aLi[i].style.position = "absolute";
move(aLi[i], 300 * i);
aLi[i].onmouseover = function () {
var oBj = this;
// debugger;
clearTimeout(oBj.oTimer);
oBj.oTimer = setTimeout(function () {
aImg[oBj.index].style.display = "block";
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(180deg)"; //
}, 290);
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)"; //
};
aLi[i].onmouseout = function ()
{
var oBj = this;
clearTimeout(oBj.oTimer);
oBj.oTimer = setTimeout(function () {
aImg[oBj.index].style.display = "none";
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(0deg)";
}, 295);
aDiv[oBj.index].style["WebkitTransform"] = "rotateY(90deg)";
}
}
};
function move(obj, iTime)
{
var oTimer = null;
oTimer = setTimeout(function () {
obj.style.left = obj.left + "px";
obj.style["WebkitTransform"] = "rotateY(0deg) scale(1)";
obj.style["WebkitAnimationName"] = "mixovMove";
obj.style["WebkitAnimationDuration"] = "2s";
},iTime)
}
</script>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
초보자를 위한 간단한 카드 호버 애니메이션html과 css만 사용하여 만든 매우 간단한 카드 호버 애니메이션을 살펴보겠습니다. css 속성을 알고 있다면 이해할 수 있지만 완전히 초보자라면 css의 기초를 배우는 것이 좋습니다. 1단계: 마크업 즉, HTM...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
