主要运用HTML+CSS+CSS3完成动态展示
阴阳师官网官网查看动态效果 平面图展示
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>阴阳师动态角色展示卡</title>
<style>
body{
margin: 0px
;
}
div{
width: 1150px
;
height: 516px
;
margin: 100px auto
;
background-color: #e89780
;
}
a{
float: left
;
width: 220px
;
height: 516px
;
margin-right: 10px
;
}
a :hover{
transform: translateY(-30px
);
transition: .8s
;
}
</style>
</head>
<body>
<div>
<a href=
"自己想到达的网址" title=
"电子杂志"><img src=
"image/1.jpg"></a>
<a href=
"自己想到达的网址" title=
"阴阳师主题COS周"><img src=
"image/2.jpg"></a>
<a href=
"自己想到达的网址/" title=
"平安京电台"><img src=
"image/3.jpg"></a>
<a href=
"自己想到达的网址/" title=
"平安物语"><img src=
"image/4.gif"></a>
<a href=
"自己想到达的网址" title=
"官方漫画"><img src=
"image/5.png"></a>
</div>
</body>
</html>
