精灵图片

含义：一张图通过background position：水平方向垂直方向；定位来确定小图标位置

应用场景

小图标

 body {margin: 0;background-color: rgb(79, 83, 92);}.contont {width: 100%;/* width: 1000px; *//* margin: 0 auto; */}.photo {width: 200px;height: 200px;background-image: url(./../图片/timg.jpg);/* border: 1px solid rgb(60, 155, 233); */float: left;/* margin: 100px 20px; */}.elf1 {width: 58px;height: 170px;background-position: -558PX -258PX;}.elf2 {width: 129px;height: 170px;background-position: -145PX -444PX;}.elf3 {width: 129px;height: 170px;background-position: -254PX -660PX;}.elf4 {width: 129px;height: 170px;background-position: -601PX -56PX}

如下列love定位

HTML：

 <div class="contont"><div class="photo elf1"></div><div class="photo elf2"></div><div class="photo elf3"></div><div class="photo elf4"></div>
</div>

CSS：

 body {margin: 0;background-color: rgb(79, 83, 92);}.contont {width: 100%;/* width: 1000px; *//* margin: 0 auto; */}.photo {width: 200px;height: 200px;background-image: url(./../图片/timg.jpg);/* border: 1px solid rgb(60, 155, 233); */float: left;/* margin: 100px 20px; */}.elf1 {width: 58px;height: 170px;background-position: -558PX -258PX;}.elf2 {width: 129px;height: 170px;background-position: -145PX -444PX;}.elf3 {width: 129px;height: 170px;background-position: -254PX -660PX;}.elf4 {width: 129px;height: 170px;background-position: -601PX -56PX}

效果图：

过渡（动态效果实现）

transition：；过渡

功能：实现元素不同状态之间的平滑过渡。

transition

transition-property ：检索或设置对象中的参与过渡的属性

过渡属性：发生变化时，想要有过渡效果的属性。all，全属性

数值型的属性才可以设置过渡。

width,height,color,font-size

transition-duration ：检索或设置对象过渡的持续时间完成时间：单位是s/ms。

transition-timing-function ：检索或设置对象中过渡的动画类型

运动曲线：

linear 匀速

ease 减速

ease-in 加速

ease-in-out 先加速后减速

transition-delay ：检索或设置对象延迟过渡的时间

延迟时间：单位是s 默认为0 过渡多久后生效。从结束状态返回到开始状态时，也会生效

之前：元素->hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。

格式：transition：过渡的属性完成时间（s）运动曲线延迟时间

HTML：

<div class="transition"></div>

CSS:

 .transition {width: 200px;height: 200px;background-color: rgb(132, 178, 248);/* transition: width 2s ease-in-out; */transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 1s;float: left;}.transition:hover {width: 600px;background-color: rgb(123, 233, 101);}

2D转换（平面转换）

transform转换（none）

缩放

transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)

取值：大于1表示放大，小于1缩小。

css:

 .zoom {width: 200px;height: 200px;background-color: rgb(200, 230, 130);}.zoom:hover {transform: scale(2, 2);}

位移

transform:translate(水平偏移量，垂直偏移量)

参数：正值：向右和向下负值：反方向。

百分比：盒子本身的宽高*百分比。

css:

  .rocket {width: 101px;height: 190px;position: absolute;bottom: 0;left: 80%;background-image: url(./../图片/rocket.png);transition: all 1s ease-in;}.button:hover .rocket {transform: translate(-100px, -700px);}

倾斜

transform:skew(水平倾斜角度，垂直倾斜角度)

单位：deg 角度

正值：顺时针，负值：逆时针。

css:

      .slope {width: 484px;height: 300px;margin: 100px auto;background: url("./../图片/狼.jpg");}.slope:hover {transform: skew(0, 10deg);}

旋转

让盒子进行旋转

格式：

transform: rotate(角度);

单位：deg 正值为顺时针，负值为逆时针。

transform 可以书写多个2D转换，中间用空格隔开。

当rotate和translate在一起的时候，注意书写顺序。

rotate在前，先旋转自身，再按照旋转的角度，进行位移。

translate在前，先进行位移，再旋转自身。

圆角

border-radius: 50%;

过渡

transition: all 3s;

设置旋转的中心点

transform-origin: 10%;

属性值：px 英文（left center right top bottom）百分比

百分比是按照自身宽高*百分比计算的。

只写一个值，第二值默认为center。

css:

  .rotate {width: 350px;height: 350px;margin: 100px auto;background-image: url("../img/hb.png");/*圆角border-radius: 50%; *//* 过渡 */transition: all 3s;/* 设置旋转的中心点*/transform-origin: 10%;}.rotate:hover {transform: rotate(45deg);}

2020/11/17css精灵图片相关推荐

2020/11/03：图片验证码和短信验证码
2020/11/03:图片验证码和短信验证码图形验证码: 流程: 看懂前端代码,理清逻辑思路,画的出流程图 settings.py配置: # 缓存配置 CACHES = {'default': {' ...
QIIME 2教程. 01简介和安装 Introduction Install(2020.11开始更新)
写在前面 QIIME是微生物组领域最广泛使用的分析流程,10年来引用20000+次,2019年Nature杂志评为近70年来人体菌群研究的25个里程碑事件--里程碑16:生物信息学工具助力菌群测序数据 ...
QIIME 2教程. 30补充资源SupplementaryResources(2020.11)
文章目录补充资源 Supplementary resources 教学内容 Educational content 应用生物信息学导论肠道检查:探索身体中的微生物群系微生物生态学统计分析指南译 ...
QIIME 2教程. 28社区Community(2020.11)
文章目录社区 Community 论坛 QIIME 2 Forum 用户支持 User Support 技术支持 Technical Support 社区插件支持 Community Plugin ...
QIIME 2教程. 23图形界面q2studio(2020.11)
文章目录图形界面`q2studio` 译者简介 Reference 猜你喜欢写在后面图形界面q2studio QIIME 2 Studio (q2studio) https://docs.qii ...
(三)Sass和Compass--制作精灵图片
6.1 精灵的工作原理 // 将各种图片合并到一张图片里面,并在不同的状态下改变背景图片的位置; 6.2 精灵的重要性 // 压缩图片的内存; // 减少HTTP请求 6.2.3 Compass处理精 ...
QIIME 2教程. 01简介和安装 Introduction Install(2020.11)
文章目录写在前面 QIIME 2的优势 QIIME 2用户文档(版本:2020.11) 视频:QIIME 2用户文档01.1 简介入门指南什么是QIIME 2? 核心概念数据文件: QIIME ...
Jenkins持续集成学习笔记(2020.11.22)
Jenkins持续集成学习笔记(2020.11.22) 前言: (官网) 以前很久学习过Jenkins持续集成进行快速部署项目进行测试, 最近换工作了, 发现新公司有用到, 现在来复习一下官网介绍: ...
2020.11.03 底层相关,汇编
概述机器语言 ##### 什么是机器语言? #目前主流的电子计算机状态: 0和1 #最早的程序员:穿孔卡带简化这些复杂的计算机语言,助记符,汇编语言 #就是把人能理解的语言,转换成机器理解的语言加 ...

2020/11/17css精灵图片

精灵图片

应用场景

HTML：

CSS：

效果图：

过渡（动态效果实现）

2D转换（平面转换）

缩放

css:

位移

css:

倾斜

css:

旋转

css:

2020/11/17css精灵图片相关推荐

最新文章

热门文章