使用HTML+CSS实现原神官网hover效果

先看看展示

![](https://img-blog.csdnimg.cn/0869813f37e7481a980fdbc7139fac48.png

下面是代码展示

css样式

.city>ul>li{position: relative;width: 1920px;height: 260px;line-height: 260px;font-size: 36px;margin: 0px;overflow: hidden;
}
div.white-border{position:absolute;z-index: 5;top: 0px;left: 0px;width: 1904px;height: 244px;border: 8px solid rgba(0,0,0,0);background-color: rgba(0,0,0,.4);transition: all .4s;
}
img.city-bg{position:absolute;z-index: 3;top: 0px;left: 0px;width: 1920px;height: 260px;transition: all .4s;/* border: 8px solid #fff; */
}
.city>ul>li>a>p{position: absolute;top: 0px;right: 0px;width: 1920px;z-index: 5;color: #fff;
}
img.cube{position:absolute;z-index: 5;top: 56px;left: 895px;/* border: 8px solid #fff; */
}
img.line{position:absolute;z-index: 5;top: 150px;left: 855px;/* border: 8px solid #fff; */opacity: 0;
}
div.city-chart{background-repeat: no-repeat;background-size: 960px;background-position: 20% 20%;position: absolute;top: 0px;left: 35%;overflow: hidden;z-index: 4;width: 1920px;height: 260px;opacity: 0;}
/* 设置hover */
.city>ul>li:hover div.city-chart{opacity: 1;transition: all 0.4s;
}
.city>ul>li:hover img.line{opacity: 1;transition: all 0.4s;
}
.city>ul>li:hover img.city-bg{transform: scale(1.05);
}
.city>ul>li:hover div.white-border{border: 8px solid #fff;background-color: rgba(0,0,0,0);
}

HTML

<!-- 城市 --><div class="city"><ul class="city-list"><li class="city-item"><a href=""><div class="white-border"></div><img src="./images/蒙德.jpg" alt="" class="city-bg"><img src="./images/宝石.png" alt="" class="cube"><p>蒙德</p><img src="./images/line.png" alt="" class="line"></a><div class="city-chart" style="background-image: url(./images/温迪.png);"></div></li><li class="city-item"><a href=""><div class="white-border"></div><img src="./images/璃月.jpg" alt="" class="city-bg"><img src="./images/宝石.png" alt="" class="cube"><p>璃月</p><img src="./images/line.png" alt="" class="line"></a><div class="city-chart" style=" overflow: hidden; background-image: url(./images/钟离.png);"></div></li><li class="city-item"><a href=""><div class="white-border"></div><img src="./images/稻妻.jpg" alt="" class="city-bg"><img src="./images/宝石.png" alt="" class="cube"><p>稻妻</p><img src="./images/line.png" alt="" class="line"></a><div class="city-chart" style="background-image: url(./images/雷电将军.png);"></div></li><li class="city-item"><a href=""><div class="white-border"></div><img src="./images/须弥.png" alt="" class="city-bg"><img src="./images/宝石.png" alt="" class="cube"><p>须弥</p><img src="./images/line.png" alt="" class="line"></a><div class="city-chart" style="background-image: url(./images/德丽莎.png); background-size: 760px;"></div></li><li class="city-item"><a href=""><div class="white-border"></div><img src="./images/敬请期待.jpg" alt="" class="city-bg"><p style="background-color: rgba(0,0,0,0.75);">敬请期待</p><img src="./images/line.png" alt="" class="line"></a><div class="city-chart-none"></div></li></ul></div>

学习前端——原神官网hover效果实现相关推荐

前端学习——仿原神官网顶部导航栏
前端学习--仿原神官网顶部导航栏通过使用CSS html实现原神官网的导航栏本人做的原神官网后续将把顶部标签hover效果的教程发出下面来看看代码  ...
原神官网新闻资讯轮播图——html，css
原神官网新闻资讯轮播图--html,css 通过使用swiper插件实现原神新闻资讯轮播图先来看看效果用到了swiper的js插件,比较方便,参考了原神官网,发现官网也是使用了swiper 下面上 ...
用CSS+JS+HTNL仿原神官网
简介 CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体.间距和颜色等)的计算机语言,CSS 文件扩展名为 ...
HTML+CSS+JS实现原神官网静态页面
1. 需求概述客户需要一份能够吸引玩家的官网页面 1.1 术语解释 HTML:HTML是超文本标记语言,(英语:HyperText Markup Language,简称:HTML),是一种用来创建网 ...
web前端十种图片的hover效果（粗糙）
<!doctype html> <html lang="en"><head><meta charset="UTF-8" ...
原神官网HTML+CSS
这个网页大量运用了flex布局,并且能够自适应屏幕宽度下面是HTML代码 <!DOCTYPE html> <html lang="zh-cn"><h ...
Python一键下载原神官网漫画，送给同样喜欢原神的人美心善你们
嗨害大家好鸭!我是爱摸鱼的芝士❤ 真的很爱玩原神哈哈哈哈哈哈哈哈哈然后我才发现它的官网上是有漫画的但是我这个懒人喜欢一键下载~ 所需模块 import requests import re 伪装 ...
学习腾讯的hover效果
在看腾讯的网页时,发现它的一段问卷调查中的radio 当鼠标悬停在整个一块上时,背景颜色出现了淡黄色.看起来很舒服,而且,让用户很容易选中. 另外的 checkbox也是如此.查看源代码,原来是用l ...
Web前端——登录界面hover效果
登录界面hover效果 Demo1(来源:B站"艾恩小灰灰") 源代码: html+javascript: css: 效果图: Demo1(来源:B站"艾恩小灰灰&quo ...

学习前端——原神官网hover效果实现

使用HTML+CSS实现原神官网hover效果

css样式

HTML

学习前端——原神官网hover效果实现相关推荐

最新文章

热门文章