文章目录

前言 ~ 雪碧图
一、页面效果展示
二、代码实现解析
三、完整代码

前言 ~ 雪碧图

雪碧图，英文原名叫 CSS sprites，其实就是融合了各种资源的图片，图片里面可能会有一个角色的一套动作或是组成背景的不同内容的块 tile 等等。

在前端中，我们把一些小图片（比如图标）也都整合到一张大图片，然后通 background-position 等属性使用你需要的区域。

本文中用到的雪碧图：

sprite 是一种将多个图片资源合并成一张大图片的做法，用到网页，能减少 HTTP 请求数量，以及提前加载一些还未使用的小图片。

一、页面效果展示

雪碧图实现及动画：

返回顶部功能（当窗口滚动一定程度才出现）：

二、代码实现解析

1、html基本框架，a 标签表示鼠标划过翻转上来的图片，每个 ul-li 表示用雪碧图中的一张小图标作背景，该图每个小图标为 48*48 像素， #return_top 为实现返回顶部功能的小方块。

<body><ul><li class="report"><a href="#">举报</a></li><li class="qr_code"><a href="#">二维码</a></li><li class="favorited"><a href="#">收藏本站</a></li><li class="search"><a href="#">搜索</a></li><li class="feedback"><a href="#">用户反馈</a></li></ul><div id="return_top"></div>
</body>

当前只是这种效果：

2、去掉小圆点和 a 标签默认样式，给 body 加上背景（便于浏览），ul 设置固定定位并调整位置，先设置好 ul li 的尺寸和背景。

/* 初始化 */
* {margin: 0;padding: 0;
}body {height: 1500px;/* 背景设为渐变图便于浏览效果 */background-color: #D9AFD9;background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}ul {list-style: none;      /* 去除小圆点 */position: fixed;     /* 固定定位 *//* 将整体放到页面右下角 */left: 50%;margin-left: 502px;bottom: 20px;
}ul li {/* 宽高设置和图片尺寸一样 */width: 48px;height: 48px;/* 将雪碧图设置为背景图片 */background-image: url("img/baidu_sprite.png");/* 设置元素间的边距 */margin-bottom: 3px;/* 让小方块圆润些 */border-radius: 3px;
}ul li a {text-decoration: none;    /* 去掉 a 标签的下划线 */
}

当前效果为：

3、第一个 ul li 的尺寸和背景图片不一样要单独设置，目前默认用了雪碧图的第一张图，需要给每个 ul li 通过设置 background-position 属性用上对应的图片作背景，设置一下 a 的字体样式。

ul li a {text-decoration: none;  /* 去掉 a 标签的下划线 *//* 新增 *//* 设置字体样式 */font-size: 12px;color: #fff;font-weight: 700;text-align: center;
}/* 第1个 ul li 单独处理 */
.report {height: 92px;background-image: url("img/baidu_report.png");/* 背景填充满整个元素 */background-size: 100% 100%;
}/* 控制对应雪碧图的呈现 */
.favorited {background-position-y: -51px;
}.search {background-position-y: calc(4 * -51px);
}.feedback {background-position-y: calc(5 * -51px);margin-bottom: 0;
}

由于该图的结构，只需调整 y 轴的位置即可，由于每个小图片是 48*48 但图片间有 3px 间距，所以要显示下面第 n 张图的话需要沿 y 轴向上移动 (n-1)*51px，即 background-position-y: -51px * (n-1);。

当前效果为：
可以看到雪碧图已经对应上了

4、由于要实现覆盖效果，让 a 填充满 ul li。

ul li a {text-decoration: none;  /* 去掉 a 标签的下划线 *//* 设置字体样式 */font-size: 12px;color: #fff;font-weight: 700;text-align: center;/* 新增 *//* 填充完后也是高度也是48px，所以设置行高让文字垂直居中 */line-height: 48px;/* 新增  *//* 设置背景颜色 */background-color: #184481;/* 让背景填充满 ul li，但是要将 a 变成块元素才能做到*/width: 100%;height: 100%;display: block;
}/* a 的高度不一样行高也要单独设置 */
.report a {line-height: 92px;
}

当前效果如下：
可以看到 a 标签已经覆盖上去了

5、将 a 标签选择到特定位置，并隐藏起来。

ul li {width: 48px;height: 48px;background-image: url("img/baidu_sprite.png");margin-bottom: 3px;border-radius: 3px;/* 新增 *//* 隐藏 ul li 之外的元素,将预先翻转好的图片隐藏 */overflow: hidden;
}ul li a {text-decoration: none;    /* 去掉 a 标签的下划线 *//* 设置字体样式 */font-size: 12px;color: #fff;font-weight: 700;text-align: center;line-height: 48px;/* 设置背景颜色 */background-color: #184481;/* 让背景填充满 ul li，但是要将 a 变成块元素才能做到*/width: 100%;height: 100%;display: block;/* 新增 */transform-origin: -50% 50%;   /* 指定旋转中心 */transform: rotateZ(90deg);  /* 预先旋转好90° */
}.report a {line-height: 92px;/* 新增 *//* 第一个 ul li 的高度不一样所以旋转中心也不一样 */transform-origin: -100% 50%; /* 指定旋转中心 */transform: rotateZ(90deg); /* 预先旋转好90° */
}

隐藏前效果：

隐藏后效果：

6、用 hover 实现鼠标划入图片翻转上来，并设置 transition 实现动画延迟效果。

ul li a {text-decoration: none;  /* 去掉 a 标签的下划线 *//* 设置字体样式 */font-size: 12px;color: #fff;font-weight: 700;text-align: center;line-height: 48px;/* 设置背景颜色 */background-color: #184481;/* 让背景填充满 ul li，但是要将 a 变成块元素才能做到*/width: 100%;height: 100%;display: block;transform-origin: -50% 50%;   /* 指定旋转中心 */transform: rotateZ(90deg);  /* 预先旋转好90° *//* 新增 */transition: transform .3s;    /* 旋转动画延迟 */
}/* 鼠标划入效果 */
ul li:hover a {transform: rotateZ(0);   /* 旋转回原来的位置 */
}

效果如下：

7、当将窗口滚动条滚动到一定程度时，才出现返回顶部的按钮，此时要空出一个位置放 #return_top 元素，ul 位置整体上移。

设置基础样式：

#return_top {/* 样式和 ul li 基本一样 */height: 48px;width: 48px;position: fixed;bottom: 20px;left: 50%;margin-left: 502px;display: none;       /* 滚动前默认隐藏 */border-radius: 3px;/* 应用对应雪碧图 */background-image: url("img/baidu_sprite.png");background-position-y: calc(6 * -51px);/* 鼠标放上去变小手，更有点击感 */cursor: pointer;
}/* 当鼠标放上去时变成另一张图 */
#return_top:hover {background-position-y: calc(7 * -51px);
}

让 ul 空出位置让该元素出现用JS实现：

// 获取对象
var return_top = document.getElementById("return_top");
var ul = document.getElementsByTagName("ul")[0];// 当窗口滚动时执行
window.onscroll = function() {// 窗口滚动大于 300pxif (document.documentElement.scrollTop > 300) {// 滚动一定程度才显示的效果return_top.style.display = "block";// 距离底部位置20到71(元素高度加间距51) 实现 ul 整体上移ul.style.bottom = "71px";} else {// 没有滚动到一定程度的话还原return_top.style.display = "none";ul.style.bottom = "20px";}
}

当前效果如下：

8、最后用 JS 实现点击返回顶部功能，给 return_top 设置 onclick 单击对象触发事件，滚动条跳到顶部。

// 单击对象触发事件
return_top.onclick = function() {// 滚动条跳到顶部document.documentElement.scrollTop = 0;
}

最后这就完成啦！

【前端小实战】百度新闻雪碧图及动画（CSS sprites）相关推荐

前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...
php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
把所有的小图标一起做成雪碧图吧请用gulp-css-spriter.
用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键第二步: npm install gulp-css-spriter https://www.npmjs.com ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
使用css3实现雪碧图帧动画
背景: 此需求是在html界面实现,纯原生,没有像vue生命周期那些东西. 场景: 一个单纯的图片背景,想要在上面加个动图.一瞬间脑子里想到两个方案: 一:最省前端功夫的:ui压缩一个gif图出来二 ...
css3帧（雪碧图）动画实现
所谓雪碧图就是一张图,包含了很多小图,可以通过这些小图实现一个动作,如下是一张雪碧图,我们可以通过CSS的animation来设置背景图片的位置,呈现出一种动态效果. 代码实现 .test{ // 务 ...
CSS 网站小图标雪碧图
https://www.jianshu.com/p/7482dde882af 网站开发90%会用到小图标, 多小图标调用显示是前端开发常见的问题:目前小图标显示常见有两种方式(其他方式欢迎补充):1. ...
第 08 课：自动生成雪碧图
背景在开发过程中,可能存在大量的小图片和小图标,虽然每张图的尺寸不大,但每次都需要发起一次 HTTP 请求,从性能优化的角度来说是不合理的.常见的做法是我们将多个小图片拼成一张大图(前端界叫做雪碧图 ...
CSS高级雪碧图插入方法
目录一什么是雪碧图? 二如何插入雪碧图? 一什么是雪碧图? 1.雪碧图是一些比较小的图片,拼接到一起,使用的时候通过小窗口展示出雪碧图的部分,通过此行为可以优化网页结构!!! 二如何插入雪碧图? 1 ...

【前端小实战】百度新闻雪碧图及动画（CSS sprites）

文章目录

前言 ~ 雪碧图

一、页面效果展示

二、代码实现解析

【前端小实战】百度新闻雪碧图及动画（CSS sprites）相关推荐

最新文章

热门文章