雪碧图和字体图标

最新推荐文章于 2024-09-10 17:45:18 发布

诗风乐雨

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量215

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/qq_45119312/article/details/124268950

版权

1.背景图片

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>背景图片</title>
   <!-- 引入一些公共的样式 -->
   <link rel="stylesheet" href="reset.css" />
   <style>
     .box {
       width: 1000px;
       height: 1000px;
       margin: 0 auto;
       border: 1px solid #000;
       background-color: red;
       /* 
         1. 背景图片 资源路径 url 统一资源定位符 uniform resource locator 
         2. 图片的格式 。jpg(jpeg)(色彩丰富) png(支持透明) gif(支持动图)
         3. 背景图片会在背景颜色的上面
         4. 背景图片显示默认尺寸 当图片较大时会显示图片左上角 
                                当图片比较小是 会出现平铺 
         */
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       /* 设置背景图片的尺寸 参数一 x轴方向  参数二 y轴方向 */
       /* background-size: 100px 100px; */
       /* 通过百分比设置 100%和box是等宽 */
       background-size: 100% 100%;
 
       /* 背景图片是否平铺 no-repeat 不平铺 repeat-x x轴方向平铺 repeat-y y轴方向平铺 */
       background-repeat: no-repeat;
 
       /* 背景图片长大直到覆盖整个窗口 某些部分可能无法显示 */
       /* cover覆盖(图片可能不完整)  contain（包含 图片完整 可能会平铺） */
       /* background-size: contain; */
       /* background-size: ; */
 
       /* 背景图片的位置 默认是在div的左上角 */
       /* background: position 100px 100px; */
       /* 也可以是百分比  也可以是方位 */
       /* background-position: 100% 100%; */
     }
     .box-one{
       width: 250px;
       height: 250px;
       border: 1px solid #000;
       box-sizing: border-box;
       background-color: red;
       /* display: none; */
       flex: 10px;
 
       
     }
     .box-one:hover{
       //transform(改变)：scale(规模，比例)
       transform: scale(1.5,1.5);
     }
     .a1{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 0% 0%;
      
     }
     .a2{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: -100% 0;
       
     }
     .a3{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: -200% 0;
       z-index: -1;
     }
     .a4{
       background-image: url(http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg);
       background-size: 1000px 1000px;
       background-position: -300% 0;
       z-index: -1;
     }
     .a5{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 0 -100%;
       z-index: -1;
     }
     .a6{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: -100% -100%;
       z-index: -1;
     }
     .a7{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 66% 33%;
       z-index: -1;
     }
     .a8{
       background-image: url(http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg);
       background-size: 1000px 1000px;
       background-position: 100% 33%;
       z-index: -1;
     }
     .a9{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 0% 66%;
       z-index: -1;
     }
     .a10{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 33% 66%;
       z-index: -1;
     }
     .a11{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 66% 66%;
       z-index: -1;
     }
     .a12{
       background-image: url(http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg);
       background-size: 1000px 1000px;
       background-position: 100% 66%;
       z-index: -1;
     }
     .a13{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 0% 100%;
       z-index: -1;
     }
     .a14{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 33% 100%;
       z-index: -1;
     }
     .a15{
       background-image: url("http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg");
       background-size: 1000px 1000px;
       background-position: 66% 100%;
       z-index: -1;
     }
     .a16{
       background-image: url(http://static.cntonan.com/uploadfile/2020/0318/20200318122901txdvkwgvpsw.jpg);
       background-size: 1000px 1000px;
       background-position: 100% 100%;
       z-index: -1;
     }
   </style>
 </head>
 
 <body>
   <div class="box">
     <div class="box-line clearfix">
       <div class="box-one a1 left"></div>
       <div class="box-one a2 left"></div>
       <div class="box-one a3 left"></div>
       <div class="box-one a4 left"></div>
       <div class="box-one a5 left"></div>
       <div class="box-one a6 left"></div>
       <div class="box-one a7 left"></div>
       <div class="box-one a8 left"></div>
       <div class="box-one a9 left"></div>
       <div class="box-one a10 left"></div>
       <div class="box-one a11 left"></div>
       <div class="box-one a12 left"></div>
       <div class="box-one a13 left"></div>
       <div class="box-one a14 left"></div>
       <div class="box-one a15 left"></div>
       <div class="box-one a16 left"></div>
   </div>
 </body>
 
 </html>

2.雪碧图

    <style>
       .box {
           width: 100px;
           height: 100px;
           margin: 0 auto;
           background-color: red;
           background-image: url(./icons.jpg);
           /* 调整背景图片的尺寸 */
           /* background-size: 2100% 2100%; */
           /* 调整图片的位置 让其显示合适图片 */
           /* background-position: -300px 0px; */
           
           /* 图片是否平铺 */
           /* background-repeat:no-repeat; */
           /* 百分比计算方式 */
           background-size: 700% 700%;
           background-position: -500% -500%;
           /* background-position: -33.3% -33.3%; */
 
         }  
     </style>

精灵图(雪碧图):

将很多小图片整合到一张大图中可以减少请求服务的次数。

3.字体图标

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>雪碧图</title>
     <!-- 引入一些公共的样式 -->
     <link rel="stylesheet" href="../day6小米案例/reset(1).css" />
     
     <!-- 1、引入已经下载好的字体图标库 -->
     <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
     <style>
       .box {
           font-size: 100px;
           color: red;
           background: #000;
           text-align: center;
         }
      
     </style>
   </head>
   <body>
       <!-- 
           字体图标:可以将一个图标当成一个字来使用不用的担心放大模糊的情况
       -->
       <!-- 2、添加图标相应的类名 注意fa是基础的 必须要有 -->
       <div class="box"><i class="fa fa-camera-retro "></i> </div>
       <i class="fa fa-bath fa-3x"></i>
       <i class="fa fa-battery fa-5x fa-spin"></i>
       <i class="fa fa-heart fa-3x fa-spin"></i>
       <!-- 变大：
            使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。 
            也可以自己添加类名来定义大小
            动画：
            使用 fa-spin 类来使任意图标旋转，现在您还可以使用 fa-pulse 来使其进行8方位旋转。
            尤其适合 fa-spinner、fa-refresh 和 fa-cog 。
       -->
     
   </body>
 </html>

4.过渡动画

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <style>
         .box{
             width: 100px;
             height: 100px;
             border: 1px solid #000;
             background-color: red;
             /* 添加过渡动画 */
             /* 
               参数1 指定需要过度的样式 all 表示所有样式  
               参数2 规定动画时长
             */
             transition: width 5s;
         }
         .box:hover{
             width: 200px;
             background-color: yellow;
             border-radius: 50%;
         }
     </style>
 </head>
 
 <body>
     <!-- 动画：
           1.过渡动画：定义动画的开始和结束
           2.关键帧动画
           3.js动画
       -->
     <div class="box"></div>
 </body>
 
 </html>