HTML 按钮

最新推荐文章于 2022-05-27 10:37:01 发布

ฅ逸魚

最新推荐文章于 2022-05-27 10:37:01 发布

阅读量109

点赞数

分类专栏： HTML+CSS 学习笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_47186832/article/details/110334539

版权

HTML+CSS 学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用这种方式来做特效
- 做完这个功能后，在第一次切换图片时，会发现图片有一个非常快的闪烁
- 这个闪烁会造成用户体验感差
- 产生闪烁的原因：
  - 背景图片是以外部资源的形式加载进入网页的
  - 浏览器每加载一次外部资源就需要单独的发送一次请求
- 外部资源不是同时加载的，浏览器在资源被使用时才去加载资源
  - 我们这个练习，一上来浏览器只会加载link里面的图片
  - 由于hover和active里面的状态没有马上触发
  - 所以hover和active里面的图片并不是立即加载
- 当hover被触发时浏览器才会加载里面的图片，active同理
- 由于加载图片需要一定的时间，所以在加载和显示过程有一段时间
  - 背景图片无法显示，导致闪烁出现
- 为了解决这个问题，就会将三张图片拼接成一张图片，这样可以同时将三张图片一起加载
  - 就不会出现闪烁的问题了，然后在通过背景移动来切换想要移动到的图片位置
  - 这种技术叫图片整合奇数（CSS-Sprite）
- 优点：
  - 1、将多个图片整合为一张图片，浏览器只需要发送一个请求，就可以加载多个图片
    - 提高访问效率，增加用户体验
  - 2、可以减小图片的总大小，提高访问效率，增加用户体验

<style type="text/css">	
	.btn:link{
		/*将a转化为块元素*/
		display:block;
		width:480px;
		height:379px;
		background-image:url(h.jpg);
		background-repeat:no-repeat;
	}
	.btn:hover{
		/*当为hover时，希望图片向左移动*/
		background-position:-480px 0px;
	}
	.btn:active{
		background-position:-960px 0px;
	}
</style>

<body>
	<a class="btn" href="#"></a>
</body>