CSS3新特性

浅笑心柔142

于 2024-08-26 13:58:59 发布

阅读量568

点赞数 12

文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_72013756/article/details/141529206

版权

一、圆角

1、border-radius属性（圆角）

通过border-radius属性可以给任何元素设置“圆角”。

如果你在border-radius属性中只指定一个值，那么将生成 4个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

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

下面例子是设置一个值的效果：

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello everyone</div>
</body>
</html>

CSS代码：

div {
   border-radius: 20px;
   background-color: green;
   color: white;
}

执行结果：

下面例子是设置四个值的效果：

CSS代码：

div{
    border-radius: 0 0 20px 20px;
    background-color: green;
    color: white;
}

执行结果：

2、通过border-radius创建一个圆形

通过将元素的border-radius设置成元素高度以及宽度的一半可以将元素变成圆形。也可以使用百分比哟。

示例中矩形元素的宽度和高度均为200px。通过将border-radius设置为100px，或者50%；矩形元素将变成圆形。

HTML代码：

<html>
<head>
   <link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div class= "div1">hello world</div>
        <div class= "div2">hello world</div>
</body>
</html>

CSS代码：

div {
   width: 200px;
   height: 200px;
   border-radius: 100px;
   background-color: green;
   color: white;
   text-align: center;
   line-height: 200px;
}
.div1 {
    border-radius: 100px;
    background-color: green;
    margin-bottom: 20px;
}
.div2 {
    border-radius: 50%;
    background-color: red;
}

执行结果：

二、阴影

1、box-shadow属性（阴影效果）

box-shadow属性可以为元素增加阴影效果。

注意：boxShadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

box-shadow的属性介绍（使用的时候必须按顺序设置）

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color: 可选。阴影的颜色。参阅CSS颜色值。
inset：可选。从外层的阴影（开始时）改变阴影内侧阴影

如下，给div添加阴影

HTML代码：

<html>
<head>
	<link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello world</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
   box-shadow: 10px 10px #888888;
}

执行结果：

2、box-shadow的模糊和扩散

除了颜色(color)外，box-shadow元素还有两个可选值，它们是模糊(blur)和扩散(spread)。

如下例子:

HTML代码：

<html>
<head>
	<link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello world</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
    box-shadow: 10px 10px 5px 5px #888888;
}

执行结果：

3、在box-shadow中使用负值

负值也可以用于box-shadow中：

h-shadow - 阴影将在框的左侧

v-shadow - 阴影将在框上方

blur - 不允许使用负值

spread - 负值会导致阴影缩小

如下例子:

HTML代码：

<html>
<head>
	<link rel="stylesheet" href="CSS3.css">
</head>
<body>
	<div >hello world</div>
</body>
</html>

CSS代码：

div {
   width: 300px;
   height: 100px;
   background-color: #9ACD32;
   box-shadow: -15px -15px 5px -5px #888888;
}

执行结果：

三、动画

1、CSS3动画

动画让一个元素从一种风格逐渐转变为另一种风格。

您可以根据需要更改任意数量的CSS属性。

关键帧将保存元素在特定时间的样式

@keyframes规则

当您在@keyframes规则中指定CSS样式时，动画将在某些时间从当前样式逐渐变为新样式。

要使动画起作用，必须将动画绑定到元素。

2、@keyframes创建动画

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

 @keyframes name{
    from|0%  {
        css样式
    }
    50%  {
        css样式
    }
    70%  {
        css样式
    }
    to|100% {
        css样式
    }
}

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

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

3、animation执行动画

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

(animation-timing-function)动画定时功能指定动画的速度曲线。它可以有以下值：

ease - 逐渐变慢（默认值）
linear - 匀速
ease-in- 加速
ease-out- 减速
ease-in-out- 先加速后减速
cubic-bezier(n,n,n,n) - 让你在一个cubic-bezier函数中定义你自己的值，可能的值是从 0 到 1 的数值。

animation-direction属性指定如何应用关键帧，值可以设置为：

normal- 默认值，这意味着它从0%到100%前进。
reverse - 从100%到0%的相反方向播放关键帧
alternate - 动画首先向前，然后向后，然后向前。
alternate-reverse- 动画首先倒退，然后前进，然后倒退。

3.1切换背景颜色

以下示例将更改元素的背景颜色三次：动画完成50％，完成70％，动画完成100％时。

<head> 
<style>
        div{
            width:200px;
            height:200px;
            background-color:grey;
            animation:hello 3s linear 0s infinite; 
            /*动画名称为hello， 持续时间为3s，
              动画效果匀速，延时0s，无限循环*/
        }
            div:hover{
                animation-play-state: paused; /*鼠标触碰时停止*/
           }
       @keyframes hello{
    0%  {background-color:red;}
    50%  {background-color:yellow;}
    70%  {background-color:blue;}
    100% {background-color:green;}
       }
        
    </style>
</head>
<body>
       <div></div>
</body>

执行结果：

3.2呼吸效果

动画呈现出来的效果像呼吸一样

<head>
<style>
        .box{
            width:300px;
            height:300px;
            margin:40px auto;
            background-color: #2b92d4;
            border-radius: 50%;/*圆形*/
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);/*阴影*/
          animation:breathe 1s ease-in-out  infinite alternate; 
 /* 动画名称为breathe，持续时间为1s，动画先加速后减速，无限循环，动画播放方向：首先向前，然后向后，然后向前*/
        }
       @keyframes breathe{
    0%  {
        opacity:0.2;/*透明度*/
        box-shadow: 0 1px 2px rgba(255,255,255,0.1)}
    50%  {
        opacity:0.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)}
       }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>

执行结果：

四、媒体查询

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

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

1、设置meta标签

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

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

参数解释：

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

2、媒体查询语法

<head>
<style>
         .box{
            width:300px;
            height:300px;
         }
         @media screen and (max-width:768px){/*and与括号之间需有空格*/
            .box{
                background-color: aqua;/*当屏幕尺寸小于768px时，背景颜色为蓝色*/
            }
            .p1{
                display: none;/*当屏幕尺寸小于768px时，不显示p1内容*/
            }
            .p2{
                display: none;/*当屏幕尺寸小于768px时，不显示p2内容*/
            }
         }
         @media screen and (max-width:996px)and (min-width:768px){/*and与括号之间需有空格*/
            .box{
                background-color: blueviolet;/*当屏幕尺寸大于768px，小于996px时，背景颜色为紫色*/
            }
            .p1{
                display: none;/*当屏幕尺寸大于768px，小于996px时，不显示p1内容*/
            }
            .p2{
                display: block;/*当屏幕尺寸大于768px，小于996px时，显示p2内容*/
            }
         }
         @media screen and (min-width:996px){/*and与括号之间需有空格*/
            .box{
                background-color:red;/*当屏幕尺寸大于996px时，背景颜色为红色*/
            }
            .p1{
                display: block;/*当屏幕尺寸大于996px时，显示p1内容*/
            }
            .p2{
                display: block;/*当屏幕尺寸大于996px时，显示p2内容*/
            }
         }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="p1">哈哈哈</div>
    <div class="p2">呵呵呵</div>
</body>

执行结果：