css3新特性

发布时间：2023-09-06 01:58责任编辑：熊小新关键词：暂无标签

2-1语法

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;

2-2实例-hover效果

上面两个按钮，第一个使用了过渡，第二个没有使用过渡，大家可以看到当中的区别，用了过渡之后是不是没有那么生硬，有一个变化的过程，显得比较生动。
当然这只是一个最简单的过渡栗子，两个按钮的样式代码，唯一的区别就是，第一个按钮加了过渡代码transition: all .5s;

2-3实例-下拉菜单

上面两个菜单，第一个没有使用过渡，第二个使用过渡，大家明显看到区别，使用了过渡看起来也是比较舒服！代码区别就是有过渡的ul的上级元素(祖先元素)有一个类名（ul-transition）。利用这个类名，设置ul的过渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}

可能大家不知道我在说什么！我贴下代码吧

html

<div >
  <ul >
    <li>
      <a href="javascript:;">html</a>
      <ul>
        <li><a href="#">div</a></li>
        <li><a href="#">h1</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">js</a>
      <ul>
        <li><a href="#">string</a></li>
        <li><a href="#">array</a></li>
        <li><a href="#">object</a></li>
        <li><a href="#">number</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">css3</a>
      <ul>
        <li><a href="#">transition</a></li>
        <li><a href="#">animation</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">框架</a>
      <ul>
        <li><a href="#">vue</a></li>
        <li><a href="#">react</a></li>
      </ul>
    </li>
  </ul>
  <div ></div>
</div>
<div >
  <ul >
    <li>
      <a href="javascript:;">html</a>
      <ul>
        <li><a href="#">div</a></li>
        <li><a href="#">h1</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">js</a>
      <ul>
        <li><a href="#">string</a></li>
        <li><a href="#">array</a></li>
        <li><a href="#">object</a></li>
        <li><a href="#">number</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">css3</a>
      <ul>
        <li><a href="#">transition</a></li>
        <li><a href="#">animation</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:;">框架</a>
      <ul>
        <li><a href="#">vue</a></li>
        <li><a href="#">react</a></li>
      </ul>
    </li>
  </ul>
  <div ></div>
</div>

css

.demo-ul{}
  .demo-ul li{
    padding: 0 10px;
    width: 100px;
    background: #f90;
    position: relative;
  }
  .demo-ul li a{
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .demo-ul li ul{
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
    transform: scaleY(0);
    overflow: hidden;
  }
  .ul-transition ul{
    transform-origin: 0 0;
    transition: all .5s;
  }
  .demo-ul li:hover ul{
    transform: scaleY(1);
  }
  .demo-ul li ul li{
    float: none;
    background: #0099ff;
}

上面两个可以说是过渡很基础的用法，过渡用法灵活，功能也强大，结合js，可以很轻松实现各种效果（焦点图，手风琴）等，以及很多意想不到的效果。这个靠大家要去挖掘！

3.动画

动画这个平常用的也很多，主要是做一个预设的动画。和一些页面交互的动画效果，结果和过渡应该一样，让页面不会那么生硬！

3-1.语法

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

/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;

还有一个重要属性

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

3-2.logo展示动画

这个是我用公司logo写的动画，没那么精细

代码如下

<!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;
  
  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 >
<div ><img src="logo1.jpg"/></div>
<div ><img src="logo2.jpg"/></div>
<div ><img src="logo3.jpg"/></div>
</div>
<div ><div ></div></div>
</body>
</html>

下面让大家看一个专业级别的

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  body {
    font-family:"Helvetica Neue",sans-serif;
    overflow: hidden;
    background: #fff;
  }
  .center {
    margin: 80px auto;
  }
  .so {
    display: block;
    width: 500px;
    height: 156px;
    background: #ffffff;
  }
  .so .inner {
    width: 500px;
    height: 156px;
    position: absolute;
  }
  .so .inner * {
    position: absolute;
    animation-iteration-count: infinite;
    animation-duration: 3.5s;
  }
  .so .inner .name {
    position: absolute;
    
    left: 130px;
    top: 95px;
  }
  .so .inner .name .b {
    font-weight: bold;
  }
  .so .inner .stack-box {
    top: 100px;
    width: 115px;
    height: 56px;
  }
  .so .inner .box {
    width: 115px;
    height: 56px;
    left: 0px;
  }
  .so .inner .box div {
    background: #BCBBBB;
  }
  .so .inner .box .bottom {
    bottom: 0px;
    left: 0px;
    width: 115px;
    height: 12px;
  }
  .so .inner .box .left {
    bottom: 11px;
    left: 0px;
    width: 12px;
    height: 34px;
  }
  .so .inner .box .right {
    bottom: 11px;
    left: 103px;
    width: 12px;
    height: 34px;
  }
  .so .inner .box .top {
    top: 0px;
    left: 0px;
    width: 0;
    height: 12px;
  }
  .so .inner .stack {
    left: 22px;
    top: 22px;
  }
  .so .inner .stack .inner-item {
    background: #F48024;
    width: 71px;
    height: 12px;
  }
  .so .inner .stack .item {
    transition: transform 0.3s;
    width: 291px;
  }
  .so .inner .stack div:nth-child(1) {
    transform: rotate(0deg);
  }
  .so .inner .stack div:nth-child(2) {
    transform: rotate(12deg);
  }
  .so .inner .stack div:nth-child(3) {
    transform: rotate(24deg);
  }
  .so .inner .stack div:nth-child(4) {
    transform: rotate(36deg);
  }
  .so .inner .stack div:nth-child(5) {
    transform: rotate(48deg);
  }
  .so .inner .box {
    animation-name: box;
  }
  .so .inner .box .top {
    animation-name: box-top;
  }
  .so .inner .box .left {
    animation-name: box-left;
  }
  .so .inner .box .right {
    animation-name: box-right;
  }
  .so .inner .box .bottom {
    animation-name: box-bottom;
  }
  .so .inner .stack-box {
    animation-name: stack-box;
  }
  .so .inner .stack {
    animation-name: stack;
  }
  .so .inner .stack .inner-item {
    animation-name: stack-items;
  }
  .so .inner .stack .item:nth-child(1) {
    animation-name: stack-item-1;
  }
  .so .inner .stack .item:nth-child(2) {
    animation-name: stack-item-2;
  }
  .so .inner .stack .item:nth-child(3) {
    animation-name: stack-item-3;
  }
  .so .inner .stack .item:nth-child(4) {
    animation-name: stack-item-4;
  }
  .so .inner .stack .item:nth-child(5) {
    animation-name: stack-item-5;
  }
  @keyframes stack {
    0% {
      left: 22px;
    }
    15% {
      left: 22px;
    }
    30% {
      left: 52px;
    }
    50% {
      left: 52px;
    }
    80% {
      left: 22px;
    }
  }
  @keyframes stack-item-1 {
    0% {
      transform: rotate(12deg * 0);
    }
    10% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(0deg);
    }
    54% {
      transform: rotate(0deg);
    }
    92% {
      transform: rotate(12deg * 0);
    }
  }
  @keyframes stack-item-2 {
    0% {
      transform: rotate(12deg * 1);
    }
    10% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(0deg);
    }
    54% {
      transform: rotate(0deg);
    }
    92% {
      transform: rotate(12deg * 1);
    }
  }
  @keyframes stack-item-3 {
    0% {
      transform: rotate(12deg * 2);
    }
    10% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(0deg);
    }
    54% {
      transform: rotate(0deg);
    }
    92% {
      transform: rotate(12deg * 2);
    }
  }
  @keyframes stack-item-4 {
    0% {
      transform: rotate(12deg * 3);
    }
    10% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(0deg);
    }
    54% {
      transform: rotate(0deg);
    }
    92% {
      transform: rotate(12deg * 3);
    }
  }
  @keyframes stack-item-5 {
    0% {
      transform: rotate(12deg * 4);
    }
    10% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(0deg);
    }
    54% {
      transform: rotate(0deg);
    }
    92% {
      transform: rotate(12deg * 4);
    }
  }
  @keyframes stack-items {
    0% {
      width: 71px;
    }
    15% {
      width: 71px;
    }
    30% {
      width: 12px;
    }
    50% {
      width: 12px;
    }
    80% {
      width: 71px;
    }
  }
  @keyframes box {
    0% {
      left: 0;
    }
    15% {
      left: 0;
    }
    30% {
      left: 30px;
    }
    50% {
      left: 30px;
    }
    80% {
      left: 0;
    }
  }
  @keyframes box-top {
    0% {
      width: 0;
    }
    6% {
      width: 0;
    }
    15% {
      width: 115px;
    }
    30% {
      width: 56px;
    }
    50% {
      width: 56px;
    }
    59% {
      width: 0;
    }
  }
  @keyframes box-bottom {
    0% {
      width: 115px;
    }
    15% {
      width: 115px;
    }
    30% {
      width: 56px;
    }
    50% {
      width: 56px;
    }
    80% {
      width: 115px;
    }
  }
  @keyframes box-right {
    15% {
      left: 103px;
    }
    30% {
      left: 44px;
    }
    50% {
      left: 44px;
    }
    80% {
      left: 103px;
    }
  }
  @keyframes stack-box {
    0% {
      transform: rotate(0deg);
    }
    30% {
      transform: rotate(0deg);
    }
    40% {
      transform: rotate(135deg);
    }
    50% {
      transform: rotate(135deg);
    }
    83% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
<body>
<div >
  <div >
    <div >
      <div >
        <div >
          <div ></div>
        </div>
        <div >
          <div ></div>
        </div>
        <div >
          <div ></div>
        </div>
        <div >
          <div ></div>
        </div>
        <div >
          <div ></div>
        </div>
      </div>
      <div >
        <div ></div>
        <div ></div>
        <div ></div>        
<div ></div>      
</div>    
</div>    
<div >      stack
<span >overflow</span>    
</div>  
</div>
</div>
</body>
</html>

3-3.loading效果

这个代码实在太多了，大家直接上网址看吧。css3-loading

3-4.音乐震动条

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>纯CSS3模拟跳动的音符效果</title>
 <style>
  *{margin:0;padding:0;list-style: none;}
  body{background-color: #efefef;}
  .demo-music {
   position: absolute;
   width: 100%;
   height: 200px;
   top: 120px;
   zoom: 1.5;
  }
  .demo-music .music {
   width: 80px;
   height: 50px;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-40px, -25px);
   transform: translate(-40px, -25px);
   position: absolute;
  }
  .demo-music #waves {
   width: 80px;
   height: 50px;
   position: absolute;
   top: 12px;
   left: 12px;
  }
  .demo-music #waves li {
   position: relative;
   float: left;
   height: 100%;
   width: 12%;
   overflow: hidden;
   margin-right: 1px;
  }
  .demo-music #waves li span {
   position: absolute;
   bottom: 0;
   display: block;
   height: 100%;
   width: 100px;
   background: #09f;
  }
  .demo-music #waves .li1 span {
   animation: waves 0.8s linear 0s infinite alternate;
   -webkit-animation: waves 0.8s linear 0s infinite alternate;
  }
  .demo-music #waves .li2 span {
   animation: waves 0.9s linear 0s infinite alternate;
   -webkit-animation: waves 0.9s linear 0s infinite alternate;
  }
  .demo-music #waves .li3 span {
   animation: waves 1s linear 0s infinite alternate;
   -webkit-animation: waves 1s linear 0s infinite alternate;
  }
  .demo-music #waves .li4 span {
   animation: waves 0.8s linear 0s infinite alternate;
   -webkit-animation: waves 0.8s linear 0s infinite alternate;
  }
  .demo-music #waves .li5 span {
   animation: waves 0.7s linear 0s infinite alternate;
   -webkit-animation: waves 0.7s linear 0s infinite alternate;
  }
  .demo-music #waves .li6 span {
   animation: waves 0.8s linear 0s infinite alternate;
   -webkit-animation: waves 0.8s linear 0s infinite alternate;
  }
  @-webkit-keyframes waves {
   10% {
    height: 20%;
   }
   20% {
    height: 60%;
   }
   40% {
    height: 40%;
   }
   50% {
    height: 100%;
   }
   100% {
    height: 50%;
   }
  }
  @keyframes waves {
   10% {
    height: 20%;
   }
   20% {
    height: 60%;
   }
   40% {
    height: 40%;
   }
   50% {
    height: 100%;
   }
   100% {
    height: 50%;
   }
  }
 </style>
</head>
<body>
 <div cla


	

	知识推荐
	
	JS复制
【WEB2.0】 网页调用QQ聊天（PC+M站）
kubernetes ??ceph的rbd挂载步骤
0511JS基础练习
div css隐藏内容样式方法
vue项目中使用jQuery
课时89.CSS三大特性练习（理解）
JS基础之传参（值传递、对象传递）
中间件-apache详解
[ASP.NET]ASP.NET中常用的26个优化性能方法
PHP多进程编程实例
记一个上传图片到图床利器插件的实现（Mac版 开源）
json、pickle
Vue.js 入门
HTML中添加音乐video embed audio
Asp.Net Core 2.0 WebUploader FastDfs 文件上传 分段上传
CSS
Linux上传下载软件lrzsz