css3动画没有效果，怎么调试啊
本文介绍了css3动画没有效果，怎么调试啊的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
写了个css动画，没有效果，请问大神该怎么调试这一类的错误？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
<style>
html,body,#pic-big,#pic1,#pic2,#pic3,#pic4,#pic5{
width: 100%;
height: 100%;
}
#pic-big{
position: relative;
}
#pic1,#pic2,#pic3,#pic4,#pic5{
position: absolute;
top: 0;
left: 0;
}
#pic1{
background: url(../images/1.jpg);
}
#pic2{
background: url(../images/2.jpg);
/*原来路径变了*/
}
#pic3{
background: url(../images/3.jpg);
}
#pic4{
background: url(../images/4.jpg);
}
#pic5{
background: url(../images/5.jpg);
}
/*小图部分*/
#pic-sml {
width: 800px;
height: 150px;
/*border: 1px solid red;*/
position: fixed;
z-index: 101;
top: 400px;
left: 274px;
}
#pic-sml ul li{
width: 150px;
height: 150px;
display: inline-block;
margin: 0 3px;
position: relative;
}
#pic-sml ul li a{
display: block;
position: absolute;
top: -50px;
left: 25px;
width: 100px;
height: 100px;
border: 1px solid grey;
overflow: hidden; /* 要设置这里，否则radius出不来 */
border-radius: 100px;
}
#pic-sml ul li:nth-of-type(1){
background-color: red;
}
#pic-sml ul li:nth-of-type(2){
background-color: green;
}
#pic-sml ul li:nth-of-type(3){
background-color: blue;
}
#pic-sml ul li:nth-of-type(4){
background-color: yellow;
}
#pic-sml ul li:nth-of-type(5){
background-color: grey;
}
/*定义动画特效*/
@webkit-keyframes img_big {
0%{-webkit-transform:scale(0.1)}
100%{-webkit-transform:none;}
}
@webkit-keyframes img_sm {
0%{-webkit-transform:scale(2)}
100%{-webkit-transform:scale(1);}
}
@webkit-keyframes img_rotate {
0%{-webkit-transform:rotate(360deg)}
100%{-webkit-transform:none;}
}
#pic1:target{ /* 设置一个伪类，在target之后来提升它的z-index,没有target之前，依然保持默认 */
/*但是要给a链图，设置高于它的z-index*/
-webkit-animation:img_big 2s linear;
animation:img_big 1s linear;
z-index: 100;
}
#pic2:target{
-webkit-animation: img_sm 2s linear;
z-index: 100;
}
#pic3:target{
-webkit-animation: img_rotate 2s linear;
z-index: 100;
}
#pic4:target{
-webkit-animation: img_sm 1s linear;
z-index: 100;
}
#pic5:target{
-webkit-animation:img_big 1s linear;
z-index: 100;
}
</style></head>
<body>
<!-- 大图部分 -->
<div id="pic-big">
<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>
<div id="pic4"></div>
<div id="pic5"></div>
</div>
<!-- 小图 -->
<div id="pic-sml">
<ul>
<li><a href="#pic1"><img src="images/1 - 副本.jpg" alt="sorry" width="150px" height="150px" /></a></li>
<li><a href="#pic2"><img src="images/2 - 副本.jpg" alt="sorry" width="150px" height="150px" /></a></li>
<li><a href="#pic3"><img src="images/3 - 副本.jpg" alt="sorry" width="150px" height="150px" /></a></li>
<li><a href="#pic4"><img src="images/4 - 副本.jpg" alt="sorry" width="150px" height="150px" /></a></li>
<li><a href="#pic5"><img src="images/5 - 副本.jpg" alt="sorry" width="150px" height="150px" /></a></li>
</ul>
</div></body>
</html>
解决方案
@-webkit-keyframes
这篇关于css3动画没有效果，怎么调试啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
