CSS3新特性

最新推荐文章于 2024-07-11 13:48:29 发布

yxiuzhu

最新推荐文章于 2024-07-11 13:48:29 发布

阅读量243

点赞数

分类专栏： CSS 文章标签： css3 html5 css

本文链接：https://blog.csdn.net/haotian1997/article/details/116530788

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS3中的重要特性，包括圆角（border-radius）、阴影（box-shadow）、动画（animation）、过渡（transition）、形状转换（transform）以及媒体查询（@media），并给出了丰富的示例代码，帮助开发者更好地理解和应用这些特性，提升网页设计的视觉效果和交互体验。

摘要由CSDN通过智能技术生成

项目中比较常用的CSS3新特性：

1、圆角（border-radius）

语法：

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
  div{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    text-align:center;
    width:300px;
    border-radius:25px 0 25px 0;
  }
</style>
</head>
<body>
  <div>border-radius</div>
</body>
</html>

在这里插入图片描述

2、阴影（box-shadow）

以前没有css3的时候，或者需要兼容低版本浏览器的时候，阴影只能用图片实现，但是现在不需要，css3就提供了！

语法：

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;

栗子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
    width:300px;
    height:100px;
    background:#09f;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

运行结果：
在这里插入图片描述

3、动画（animation）

语法：

animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）

栗子1：

/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;

栗子2：

/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;

栗子3：
myAnimation动画延迟2s，然后在3s内完成，以匀速、往返、循环动画

div {
  animation: myAnimation 3s 2s linear alternate infinite;
}
@keyframes myAnimation {
  from {
    background: red;
    transform: translateX(0);
  }
  to {
    background: greenyellow;
    transform: translateX(300px);
  }
}

还有一个重要属性

animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。    
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。    
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 
both：向前和向后填充模式都被应用。  */

动画效果演示
在这里插入图片描述

<!-- 上述动画代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
</head>
<style>
.logo-box{
    width: 600px;
    margin: 100px auto;
    font-size: 0;
    position: relative;
}
.logo-box div{
    display: inline-block;
}
.logo-box .logo-text{
    margin-left: 10px;
}
.logo-box .logo1{
    animation: logo1 1s ease-in 2s;
    animation-fill-mode:backwards;
}
.logo-box .logo-text{
    animation: logoText 1s ease-in 3s;
    animation-fill-mode:backwards;
}
.logo-box .logo2{
    position: absolute;
    top: 20px;
    left: 20px;
    animation: logo2-middle 2s ease-in;
}
.logo-box .logo2 img{
    animation: logo2-line 2s linear;
}
@keyframes logo1 {
    0%{
        transform:rotate(180deg);
        opacity: 0;
    }
    100%{
        transform:rotate(0deg);
        opacity: 1;
    }
}
@keyframes logoText {
    0%{
        transform:translateX(30px);
        opacity: 0;
    }
    100%{
        transform:translateX(0);
        opacity: 1;
    }
}
@keyframes logo2-line {
    0% { transform: translateX(200px)}
    25% { transform: translateX(150px)}
    50% { transform: translateX(100px)}
    75% { transform: translateX(50px)}
    100% { transform: translateX(0); }
}

@keyframes logo2-middle {
    0% { transform: translateY(0);     }
    25% { transform: translateY(-100px);     }
    50% { transform: translateY(0);     }
    75% { transform: translateY(-50px);     }
    100% { transform: translateY(0); }
}
</style>
<body>
<div class="logo-box">
<div class="logo1"><img src="logo1.jpg"/></div>
<div class="logo2"><img src="logo2.jpg"/></div>
<div class="logo-text"><img src="logo3.jpg"/></div>
</div>

<div class="wraper"><div class="item"></div></div>

</body>
</html>

4、过渡（transition）

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。

语法：

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

栗子1：

/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

栗子2：

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s

上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复了）

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

效果
在这里插入图片描述
上面两个按钮，第一个使用了过渡，第二个没有使用过渡。两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码transition: all .5s;

5、形状转换（transform）

分2d转换和3d转换

语法：

transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)

栗子：

transform:rotate(30deg);
transform:translate(30px,30px);
transform:scale(.8);
transform: skew(10deg,10deg);
transform:rotateX(180deg);
transform:rotateY(180deg);
transform:rotate3d(10,10,10,90deg);

6、媒体查询 @media

媒体查询，就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！

栗子：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    body {
      background-color: pink;
    }

    @media screen and (max-width: 960px) {
      body {
        background-color: darkgoldenrod;
      }
    }

    @media screen and (max-width: 480px) {
      body {
        background-color: lightgreen;
      }
    }
  </style>
</head>

<body>
  <h1>重置浏览器窗口查看效果！</h1>
  <p>如果媒体类型屏幕的可视窗口宽度小于 960 px ，背景颜色将改变。</p>
  <p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>
</body>

</html>

效果演示：
在这里插入图片描述

7、弹性盒子（flex）

膜拜阮一峰老师的两篇文章：
阮一峰老师：Flex 布局教程：语法篇
 Flex 布局教程：实例篇

参考文章

个人总结（css3新特性）
Grid网格布局指南
 阮一峰老师：Flex 布局教程：语法篇
 Flex 布局教程：实例篇

yxiuzhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3新特性

项目中比较常用的CSS3新特性：1、圆角（border-radius）语法：border-radius: n1,n2,n3,n4;border-radius: n1,n2,n3,n4/n1,n2,n3,n4;/*n1-n4四个值的顺序是：左上角，右上角，右下角，左下角。*/栗子：<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> &
复制链接

扫一扫

专栏目录