阴阳师动态角色展示卡

忘是亡心i 2022-12-16 13:16 106阅读 0赞

## 主要运用HTML+CSS+CSS3完成动态展示 ##

阴阳师官网[官网查看动态效果][Link 1]  
平面图展示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70_pic_center]

## 代码展示 ##

<!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;/*浮动（横排）->left向左 使元素具有块元素性质*/
                width: 220px;
                height: 516px;
                margin-right: 10px;
                /*background-color: #00cc66;*/
                
            }
            a :hover{ 
                transform: translateY(-30px);/*CSS3:位移*/
                transition: .8s;/*CSS3:浮动*/
            }
        </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>

[Link 1]: http://yys.163.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjQ5NTUwMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/031daab50374469f9c9402107408d823.png