<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content="text/html ; charset =UTF-8"/>
<title> new document </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=100%;initial-scal=1.0;maximum-scale=1.0;user-scalable=0;"/>
<!--css/js-->
<style type="text/css">
body{
background:url(2.jpg) no-repeat;
background-size:cover;
}
.phone{
width:200px;height:400px;
margin:80px auto;
position:relative;
}
.phone .p_ph{
height:400px;
width:200px;
background:url(4.jpg) no-repeat;
background-size:100% 100%;
}
.phone .p_ph .pic{
top:33px;
left:5px;
height:340px;
width:190px;
background:#093;
background-size:100% 100%;
position:absolute;
}
.phone .link{
width:40px;
height:40px;
display:block;
background:url(6.jpg) no-repeat;
background-size:cover;
position:absolute;
top:33px;
left:5px;
}
/*定义图像旋转动画帧*/
@-webkit-keyframes arr{
from{
-webkit-transform:rotate(0deg);
}to{
-webkit-transform:rotate(360deg);
}
}
/*调用帧*/
.rotate{
-webkit-animation: arr 2.2s linear infinite;
animation:arr 2.2s linear infinite;
}
/*响应式布局*/
@media screen and (max-width:800px){
.phone .p_ph{display:none;}
.phone{margin:0;}
}
</style>
</head>
<body>
<!--phone start-->
<div class="phone">
<div class="p_ph">
<div class="pic"></div>
</div>
<a href="#" class="link"></a>
</div>
<!--end phone-->
<!--引入官方类库-->
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
var au = document.createElement("audio");
au.src="music/1.mp3";
//点击旋转
$(".link").click(function(){
if(au.paused){
au.play();
} else{
au.pause();
}
$(this).toggleClass("rotate");
});
});
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1310466.html
