<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 网站导航</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
body{
background-color:lightblue;}
.box{
height:300px;
width:300px;
position:relative;
}
.p1{
position:absolute;
height:300px;
width:300px;
border-radius:50%;
background:url(images/bg.png) no-repeat left bottom;
backface-visibility:hidden;
transform:rotateY(0deg);
transition:all 2s linear 0s;
}
.p2{
position:absolute;
height:300px;
width:300px;
border-radius:50%;
background:url(images/bg.png) no-repeat -305px bottom;
backface-visibility:hidden;
transform:rotateY(180deg);
transition:all 2s linear 0s;
}
.box:hover .p1{
transform:rotateY(180deg);
}
.box:hover .p2{
transform:rotateY(360deg);
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<div class="p1"></div>
<div class="p2"></div>
</div>
<script>
$(document).ready(function(e) {
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 网站导航</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
body{
background-color:lightblue;}
.box{
height:300px;
width:300px;
position:relative;
}
.p1{
position:absolute;
height:300px;
width:300px;
border-radius:50%;
background:url(images/bg.png) no-repeat left bottom;
backface-visibility:hidden;
transform:rotateY(0deg);
transition:all 2s linear 0s;
}
.p2{
position:absolute;
height:300px;
width:300px;
border-radius:50%;
background:url(images/bg.png) no-repeat -305px bottom;
backface-visibility:hidden;
transform:rotateY(180deg);
transition:all 2s linear 0s;
}
.box:hover .p1{
transform:rotateY(180deg);
}
.box:hover .p2{
transform:rotateY(360deg);
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<div class="p1"></div>
<div class="p2"></div>
</div>
<script>
$(document).ready(function(e) {
});
</script>
</body>
</html>
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
