【无标题】

最新推荐文章于 2024-07-22 15:19:55 发布

梦千刼

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量874

点赞数 29

文章标签：前端 html 学习 css css3

本文链接：https://blog.csdn.net/m0_74569795/article/details/136126775

版权

2.15.1 @keyframes创建动画

2.15.2 animation 动画的执行

2.14 css新特性

2.14.1圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作“圆角 border-radius 属性，可以使用以下规则:

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
三个值: 第一个值为左上角,第二个值为右上角和左下角，第三个值为右下角
两个值:第一个值为左上角与右下角，第二个值为右上角与左下角
一个值: 四个圆角值相同

.box1{
  height: 100px;
  width: 100px;
  border-radius:10px;
  background-color: mediumpurple;
}

2.14.2阴影

box-shadow 相框添加一个或多个阴影

值	描述
h-shadow	必选，水平阴影的角度
v-shadow	必选，垂直阴影的角度
blur	可选，模糊距离
color	可选，阴影距离

 .box1{
   height: 100px;
   width: 100px;
   background-color: mediumpurple;
   /margin: 0px  auto;
   box-shadow:10px 10px 10px #666;
 }

2.15 动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于 0% 和100%

0%是动画的开始，100%是动画的完成

2.15.1 @keyframes创建动画

使用 @keyfrrames 规则，你可以创建动画

@keyframes myAnime {
  from|0%{
  }
  percent|50%{
  }
  to|100%{
  }
  }

name：动画名称，开发人员自己命名

percent：为百分比值，可以添加多个百分比值；

2.15.2 animation 动画的执行

animation: name duration timing-function delay iteration-count direction;

值	描述
name	设置动画的名称
duration	设置动画的持续时间
timing-function	设置动画效果的速率(如下)
delay	设置动画的开始时间 (延时执行)
iteration-count	设置动画循环的次数，infinite为无限次数的循环
direction;	设置动画播放的方向 (如下）
animation-play-state	控制动画的播放状态:running代表播放，而paused代表停止播放

timing-function值	描述
ease	逐渐变慢（默认）
linser	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认值为Normal表示向前播放
alternate	动画播放在第偶数次向前播放，第奇数次向反方向播放

<body >
   <div></div>
</body>

<style>
  @keyframes myAnime {
    0%{
      background-color: pink;
    }
    50%{
           background-color:blueviolet;
    }
    100%{
         background-color: darkgray;
    }
    }
  div{
   width: 500px;
    height: 500px;
    background-color:pink ;
    animation:myAnime 3s linear 0s infinite alternate ;
      }
  div:hover{
    animation-play-state: paused;
  }
</style>

实例：呼吸效果

.box{
  width: 500px;
  height: 500px;
  margin: 40px auto;
  background-color: #2b92d4;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  animation:breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {
  0%{
    opacity: .2;
    box-shadow: 0 1px 2px rgba(255,255,255,0.1);
  }
  50%{
    opacity: 5;
    box-shadow: 0 1px 2px rgba(18,190,84,0.76);
  }
  100%{
    opacity: 1;
    box-shadow: 0 1px 30px rgba(59,255,255,1);
  }
   }

opacity

设置一个div元素的透明度级别

2.16媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

2.16.1 设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head> 标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

参数解释

width = device-width宽度等于当前设备的宽度
initial-scale 初始的缩放比例 (默认设置为1.0)
maximum-scale 允许用户缩放到的最大比例(默认设置为1.0)
user-scalable用户是否可以手动缩放(默认设置为no)

2.16.2 媒体查询语法

<style>
 .box{
   width: 300px;
   height: 300px;

 }

此段代码为手机端显示样式
 @media screen and (max-width: 768px){
   .box{
     background-color: cornflowerblue;
   }
   .img{
     display: none;
   }
   }

此段代码为平板端显示样式
 @media screen and (min-width: 768px) and (max-width: 996px){
   .box{
     background-color: pink;
   }
   .img{
            display: none;
        }
    }

此段代码为电脑端显示样式
 @media screen and  (min-width: 996px){
   .box{
           background-color:mediumpurple;
   }
       .img{
           display: none;
       }
   }
</style>

2.17 雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

优点

减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

<style>
  .sprite{
    display: block;
    width: 70px;
    height: 70px;
    background-image: url("./../img/img3.png");
    border: 1px solid black;
         background-position:-10px -40px;
  }
     .sprite1{
         display: block;
         width: 70px;
         height: 70px;
         background-image: url("./../img/img3.png");
         border: 1px solid black;
         background-position:85px 80px;      
     }
</style>

<span class="sprite"></span>
<span class="sprite1"></span>

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库:阿里字体图标库](https://iconfont.cn）

优点

轻量性:加载速度快，减少http请求
灵活性:可以利用CSS设置大小颜色等
兼容性:网页字体支持所有现代浏览器，包括IE低版本

使用字体图标

注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择 font-class 引用

2.18 字体图标

常用字体图标库:阿里字体图标库](iconfont-阿里巴巴矢量图标库）

优点

轻量性:加载速度快，减少http请求
灵活性:可以利用CSS设置大小颜色等
兼容性:网页字体支持所有现代浏览器，包括IE低版本

使用字体图标

注册账号并登录
选取图标或搜索图标
添加购物车
下载代码

选择 font-class 引用

<link rel="stylesheet" href="./../css/font/iconfont.css">
<style>
 span{
   color: #0077aa;
 }
 .icon-xiangji{
  font-size: 100px;
 }
 .icon-zizhi{
   font-size:200px ;
   color:pink ;
 }
</style>


<body>
   <span class="iconfont icon-xiangji"></span>
      <span class="iconfont icon-zizhi"></span>
</body>

梦千刼

关注

29
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

本章学习内容包括 css新特性，动画，媒体查询，雪碧图，字体图标
复制链接

扫一扫

【无标题】

2.14 css新特性

2.14.1圆角

2.14.2阴影

2.15 动画

2.15.1 @keyframes创建动画

2.15.2 animation 动画的执行

实例 ：呼吸效果

2.16媒体查询

2.16.1 设置meta标签

2.16.2 媒体查询语法

2.17 雪碧图

2.18 字体图标

实例：呼吸效果