QQ飞车官方首页（部分）制作

涉及到的知识点

---

text-indent

• 注意：只能用于block，table cells和inline-block

text-indent: -9999px;
//首行缩进到-9999px，隐藏文字

---

background：url()与 img标签 的选择

• img标签 是引用外部资源，会占用一个http会话
• url的体积比图片大，如果图片太大，对体积也有限制 就不时候使用Data URL
• img src="Data URL" 不会缓存 图片
• img标签 先加载 ，css 后加载 ，所以重要的用 html img ,比如 logo

---

background-position

• 设置背景图像的起始位置
• 为什么是负值？
  • 加载前，图片的坐标和div的坐标都在矩形框的左上角，加载后，两者重叠在一起。
  • position的值是以div坐标为原点，图片的坐标。可以理解为图片往左上方移动了该数值，而正方向为右、下方向，所以为负值。
  • https://blog.csdn.net/ClerverCC/article/details/53997435
    可以参考链接的图片，不过他是说移动div，我觉得移动图片的理解更合适。

---

P标签动画

#banner .banner_download p {
	 90px;
	height: 24px;
	display: block;
	background: url(./img/down_user_spr.png) no-repeat;
	margin: 0 auto;
	text-indent: -9999px;
	overflow: hidden;
}
#banner .banner_download p:first-child { 
	background-position: -254px 0;
	margin-top: 44px;
}
#banner .banner_download p:last-child { background-position: -254px -24px;}

/* CSS3简单动画 */
#banner .banner_download:hover p:first-child { animation: 1s upMove;}
@keyframes upMove {
	0% { transform: translateY(-10px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
#banner .banner_download:hover p:last-child { animation: 1s downMove;}
@keyframes downMove {
	0% { transform: translateY(10px); opacity: 0;}
	100% { transform: translateY(0); opacity: 1;}
}
/* CSS3简单动画 */

---

ul做图片及小圈的轮转

<ul class="banner_list_ul">
	<li>
		<a href="#">
			<img src="https://ossweb-img.qq.com/upload/adw/image/20200909/86ddfd597bb72eba528cbda02a91b8fa.jpeg" alt="">
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://ossweb-img.qq.com/upload/adw/image/20200918/ccd7a82c3d1bd6250a33647205913ac5.png" alt="">
		</a>
	</li>
	<li>
		<a href="#">
			<img src="https://ossweb-img.qq.com/upload/adw/image/20200918/086c411750f9962325b116579b5a2db0.jpeg" alt="">
		</a>
	</li>
</ul>


<ul class="banner_bottomline_ul">
	<li class="active"></li>
	<li></li>
	<li></li>
</ul>

---

遮住图片四个角（做成相册既视感）的方法

• 三层包夹覆盖
  • 底：相框
  • 中：图片
  • 上：相框边框

---

图片

---

GitHub：

https://github.com/AlubNoBug/QQspeed-Homepage

---

视频讲解：

https://www.bilibili.com/video/BV1x64y1M7No?p=100

素材来自官网，F12自己下载即可。

本文作者：AlubNoBug
本文链接：https://www.cnblogs.com/AlubNoBug/p/13743513.html