复制代码运行一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style type="text/css">
.t{
width: 320px;
height: 200px;
margin:50px;
position: relative;
overflow: hidden;
}
.t .bubiao{
width: 40px;
height: 40px;
position:absolute;
top:50%;
left:50%;
margin-left:-20px;
margin-top:-20px;
font-size:20px;
background:url("/resources/views/admin/images/view.png") no-repeat;
z-index: 10000;
opacity:0;
-moz-transition:all 0.6s;
-webkit-transition:all 0.6s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
-moz-transform:scale(0.1);
-webkit-transform:scale(0.1);
-ms-transform:scale(0.1);
-o-transform:scale(0.1);
transform:scale(0.1);
}
.t .modal{
width: 100%;
height: 100%;
background: #000;
position: absolute;
top:0px;
left: 0px;
z-index: 9999;
opacity:0;
-moz-transition:all 0.6s;
-webkit-transition:all 0.6s;
-ms-transition:all 0.6s;
-o-transition:all 0.6s;
transition:all 0.6s;
}
.t .ff{
-moz-transition:all 0.6s ease-in-out;
-webkit-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
transition:all 0.6s ease-in-out;
/*-moz-transform:scaleY(1);
-webkit-transform:scaleY(1);
-ms-transform:scaleY(1);
-o-transform:scaleY(1);
transform:scaleY(1);*/
}
.t:hover .ff{
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
}
.t:hover .modal{
opacity:0.4;
}
.t:hover .bubiao{
opacity:1;
-moz-transform:scale(1);
-webkit-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.indexcat{
overflow: hidden;
}
.indexcat a{
position: relative;
display: inline-block;
padding:0 15px 0 0;
color: #737f99;
font-size: 16px;
text-decoration:none;
-webkit-transition:-webkit-transform 0.3s;
-moz-transition:-moz-transform 0.3s;
-o-transition:-o-transform 0.3s;
-ms-transition:-ms-transform 0.3s;
transition:transform 0.3s;
}
.indexcat a::before {
position: absolute;
top: 100%;
color: #46b855;
content: attr(data-hover);
}
.indexcat:hover a{
-moz-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-o-transform:translateY(-100%);
transform:translateY(-100%);
}
#indexcat {
overflow: hidden;
padding: 0 0 13px;
color: #737f99;
font-size: 16px;
}
#indexcat li {
float: left;
overflow: hidden;
}
#indexcat li.menucat{
margin-right:10px;
}
#indexcat li a {
position: relative;
display: inline-block;
padding: 0 15px 0 0;
color: #737f99;
font-size: 16px;
text-decoration:none;
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
transition: transform .3s;
}
#indexcat li a::before {
position: absolute;
top: -100%;
color: #46b855;
content: attr(data-hover);
/* -webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);*/
}
#indexcat li:hover a,#indexcat li:focus a {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
transform: translateY(100%);
}
#indexcat li a.current {
color: #46b855;
}
.menu{
}
.menu li{
display: inline-block;
padding-right: 30px;
position: relative;
padding-left:10px;
padding-bottom: 5px;
}
.menu li a{
color: #666;
text-decoration:none;
-moz-transition:color 350ms;
-webkit-transition:color 350ms;
-o-transition:color 350ms;
-ms-transition:color 350ms;
transition:color 350ms;
}
.menu li a:hover{
color: #f60;
-moz-transition:color 350ms;
-webkit-transition:color 350ms;
-o-transition:color 350ms;
-ms-transition:color 350ms;
transition:color 350ms;
}
.menu li:before{
content: "+";
position: absolute;
right:10px;
color: #666;
}
.menu li:after{
border-bottom: 1px solid #fff;
position: absolute;
bottom:0px;
content: "";
left:100%;
-moz-transition:width 350ms,left 350ms;
-webkit-transition:width 350ms,left 350ms;
-o-transition:width 350ms,left 350ms;
-ms-transition:width 350ms,left 350ms;
transition:width 350ms,left 350ms;
width:0%;
}
.menu li:hover:after{
left:0;
width:100%;
-moz-transition:width 350ms;
-webkit-transition:width 350ms;
-o-transition:width 350ms;
-ms-transition:width 350ms;
transition:width 350ms;
}
</style>
</head>
<body>
写一个图片动画
<br/>
<div class="t">
<div class="modal"></div>
<div class="bubiao"></div>
<img class="ff" src="{{asset("resources/views/admin/images/1.png")}}" alt=""/>
</div>
<p class="indexcat">
<a href="" data-hover="javascript">javascript</a>
</p>
<ul id="indexcat">
<li><a href="" data-hover="123">123</a> </li>
</ul>
<div style="background: #333;height: auto;padding: 1px 0px;">
<ul class="menu">
<li><a href="">首页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">军事</a></li>
<li><a href="">科技</a></li>
</ul>
</div>
</body>
</html>