本人是一名刚毕业的小菜鸡,平时会Po一些杂文,一来是为了加深印象,二来如果你有正好有这方面的需求希望可以帮助到你,如有什么错误还望大神指出
需求: 工作需求是这样的,这里有一个六面体的骰子会旋转的骰子（为了避免纠纷,随机做了几张自己喜爱的NBA球星的图片）, 现在在骰子转动的同时, 在转动到未来的某一时刻,骰子的6个面要显示同一张图片 以强调该图片的主题和内容
解决方案草案1: 既然未来的某一时刻骰子6个面要显示同一张图片, 楼主第一时间想到的是css3的animation, 能不能让这六个面利用backgound-image这个属性同时做动画, 让动画的频率相同这样再未来的某一时刻骰子就会显示同一张图片, 然而一顿骚操作后发现并没有什么软用, 事实上W3C对这个background-image的属性是不支持动画的，那咋整就要引入我们接下来要介绍的雪碧图！！！！
那要怎么做到图片切换呢,能不能把,聪明的人已经想到答案 既然图片是不能通过background-image切换的,那能不能将所有的图片合在一起做成一张超大的图片（相对元素视口而言）通过background-position（属性设置背景图像的起始位置,根据元素视口层）去定位它的位置,答案是完全可以的
我们可以在图上抽象出来的背景图片层放置6张图片通过设置background-position的来移动背景层这样我们就可以在视口层看到不同的图片,实际上将很多图片合成一张图片行内人都叫做雪碧图(使用雪碧图只需要引用一张图片，对内存和带宽更好)
那现在的问题是要怎么做雪碧图呢，用PS？？？ 当你把这个想法告诉UI设计师时我保证你不会被打死，要是用PS不仅费时还要手动去计算很浪费时间,这里有更优雅的做法, 用几行脚本去实现！！！！ 这就要归功于国外某些大神的杰作了
正式操作:
grunt-spritesmith!!!! 有兴趣的可以去github上搜索下,接下来介绍完成操作
进入你的项目文件
npm install grunt-cli --save //将Grunt命令行（CLI）安装到全局环境
npm install grunt --save-dev
npm install grunt-spritesmith --save
之后在你的项目底下新建几个文件 Gruntfile.js这个文件很关键 接下来我们去解读下它
熟悉webpack的人看到dest这个字眼很熟悉 我们可以在sprite的all这个配置我们的入口文件和输出文件
src 指的是你要合成雪碧图的图片origin底下所有的以.png为结尾的图片
dest 指的是雪碧图的输出文件和文件名,输出到images 并把雪碧图命名为spritessheet.png
destCss指的是将样式文件输出并命名,在上面可以找到每张图片对应的在雪碧图上的background-position
编写好所有文件之后打开cmd 定位到你的项目 输入grunt sprite
之后可以在images和 css中看到图片和样式
美滋滋接下来放进项目就可以实现了 接下来贴点源代码把！！！！
1.index.html
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
html,body{
height: 100%;
margin: 0;
padding: 0;
background: #fff
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes change-picture-front{
0% {
background-position: -640px 0px;
}
33% {
background-position: 0px -640px;
}
66% {
background-position: -320px -320px;
}
100% {
background-position: -640px 0px;
}
}
@keyframes change-picture-back{
0% {
background-position: -320px 0px;
}
33% {
background-position: 0px -640px;
}
66% {
background-position: -320px -320px;
}
100% {
background-position: -320px 0px;
}
}
@keyframes change-picture-left{
0% {
background-position: -640px -320px;
}
33% {
background-position: 0px -640px;
}
66% {
background-position: -320px -320px;
}
100% {
background-position: -640px -320px;
}
}
@keyframes change-picture-right{
0% {
background-position: 0px 0px;
}
33% {
background-position: 0px -640px;
}
66% {
background-position: -320px -320px;
}
100% {
background-position: 0px 0px;
}
}
@keyframes change-picture-top{
0% {
background-position: -320px -640px;
}
33% {
background-position: 0px -640px;
}
66% {
background-position: -320px -320px;
}
100% {
background-position: -320px -640px;
}
}
@keyframes change-picture-bottom{
0% {
background-position: 0px -320px;
}
33% {
background-position: 0px -640px;
}
66% {
background-position: -320px -320px;
}
100% {
background-position: 0px -320px;
}
}
.wrap {
margin-top: 150px;
perspective: 1000px;
/* 视图距元素的距离 相当于摄像机 */
position: absolute;
top: 0;
left: 44%;
z-index: 200;
}
.cube {
width: 200px;
height: 200px;
position: relative;
color: #fff;
font-size: 36px;
font-weight: bold;
text-align: center;
line-height: 200px;
transform-style: preserve-3d;
/* 默认flat 2D */
transform: rotateX(-30deg) rotateY(-70deg);
animation: rotate 20s infinite linear;
/*播放时间 播放次数为循环 缓动效果为匀速 */
}
.cube>div {
width: 320px;
height: 320px;
position: absolute;
opacity: 1;
cursor: pointer;
}
.cube .out-front {
background-image: url(images/spritesheet.jpg);
background-position: 0px 0px;
transform: translateZ(160px);
animation: change-picture-front 10s infinite linear;
animation-timing-function: steps(1)
}
.cube .out-back {
background-image: url(images/spritesheet.jpg);
background-position: -320px 0px;
transform: translateZ(-160px) rotateY(180deg);
animation: change-picture-back 10s infinite linear;
animation-timing-function: steps(1)
}
.cube .out-left {
background-image: url(images/spritesheet.jpg);
background-position: 0px -320px;
transform: translateX(-160px) rotateY(-90deg);
animation: change-picture-left 10s infinite linear;
animation-timing-function: steps(1)
}
.cube .out-right {
background-image: url(images/spritesheet.jpg);
background-position: -320px -320px;
transform: translateX(160px) rotateY(90deg);
animation: change-picture-right 10s infinite linear;
animation-timing-function: steps(1)
}
.cube .out-top {
background-image: url(images/spritesheet.jpg);
background-position: -640px 0px;
transform: translateY(-160px) rotateX(90deg);
animation: change-picture-top 10s infinite linear;
animation-timing-function: steps(1)
}
.cube .out-bottom {
background-image: url(images/spritesheet.jpg);
background-position: -640px -320px;
transform: translateY(160px) rotateX(-90deg);
animation: change-picture-bottom 10s infinite linear;
animation-timing-function: steps(1)
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="out-front"></div>
<div class="out-back"></div>
<div class="out-left"></div>
<div class="out-right"></div>
<div class="out-top"></div>
<div class="out-bottom"></div>
</div>
</div>
</body>
</html>2.Gruntfile.js核心代码
module.exports=function(grunt)
{ grunt.initConfig({
pkg:grunt.file.readJSON("package.json"),
sprite:{
options:{
banner:'/*<%=pkg.name %> <%=grunt.template.today("yyyy-mm-dd")%>*/\n'
},
all:{
src:"origin/*.png",
dest:"images/spritesheet.png",
destCss:"css/sprite.css",
algorithm:"binary-tree"
}
}
});
grunt.loadNpmTasks("grunt-spritesmith");
grunt.registerTask("default",["sprite"]);
};如有转发请备注出处 233333333
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
