CSS-3D动画和NAV-TAB切换HTML

块级元素:

在网页中以块的形式显示,默认情况都会占据一行,两个相邻的块级元素不会出现并列显示的元素,按照顺序自上而下排列。

行内元素:

在网页中始终以行内逐个显示,没有自己的形状并且不能定义自己的宽和高,他显示的宽和高根据所包含内容的宽和高确定。

内联元素也会遵循盒模模型基本法则,如定义padding,border,margin,background等属性,但是个别属性不能正确显示。

可变元素:

根据上下文确定该元素是块元素还是内联元素

CSS的3D动画

3D

在2d的基础上添加 z 轴的变化 3D 位移:

在2d的基础上添加 translateZ(),或者使用translate3d()

translateZ():以方框中心为原点,变大 3D 缩放:在2d的基础上添加 scaleZ(),或者使用scale3d()

scaleZ()和 scale3d()函数单独使用时没有任何效果 3D 透视:perspective 规定3D元素的透视效果

可以取值为none或不设置,这种情况下说明没有透视效果

取值越小,3d效果越明显

3D背面可见:backface-visibility 定义元素在不面对屏幕时是否可见

transform-style:规定被嵌套元素在3D空间中显示

transform-style:flat; 子元素将不保留其 3d位置

transform-style:preserve-3d; 子元素将保留其3d位置

动画

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

css中通过 @keyframes规则是创建动画,可以改变任意多的样式任意多的次数。

当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器:

规定动画的名称

规定动画的时长

语法:@keyframes

styleName {

keyframes-selector{css-style;}

}

keyframes-selector:可以用百分比来规定变化发生的时间

也可以用关键词 "from" 和 "to"

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

效果图

废话不都说,具体代码如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>nav和3D效果图</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      height: 60px;
      min-width: 960px;
      background: #2196f3;
    }

    .nav ul {
      width: 960px;
      margin: 0 auto;
      text-decoration: none;
      overflow: hidden;
    }

    .nav ul li {
      float: left;
      border-right: 1px #fff solid;
    }

    .nav ul li a {
      display: block;
      width: 119px;
      height: 60px;
      color: #fff;
      text-align: center;
      line-height: 60px;
      text-decoration: none;
      font-size: 18px;
    }

    .nav ul li a:hover {
      background: #0011ff;
    }

    .nav ul li.active {
      background: #ff9800;
      font-weight: bold;
    }

    .nav ul li:last-child {
      border-right: none;
    }
  </style>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      position: relative;
      perspective: 800px;
      cursor: pointer;
    }

    .box ul {
      list-style: none;
      width: 200px;
      height: 200px;
      transition: all 2s;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform-style: preserve-3d;
    }

    .box ul li {
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      position: absolute;
      font-size: 36px;
      color: #fff;
    }

    .box ul li:nth-child(1) {
      background: rgba(30, 255, 0, 0.5);
      transform: translateY(-100px) rotateX(90deg);
    }

    .box ul li:nth-child(2) {
      background: rgba(255, 188, 45, 0.5);
      transform: translateY(100px) rotateX(-90deg);
    }

    .box ul li:nth-child(3) {
      background: rgba(68, 233, 255, 0.5);
      transform: translateX(-100px) rotateY(-90deg);
    }

    .box ul li:nth-child(4) {
      background: rgba(255, 61, 61, 0.5);
      transform: translateX(100px) rotateY(90deg);
    }

    .box ul li:nth-child(5) {
      background: rgba(126, 12, 255, 0.5);
      transform: translateZ(100px);
    }

    .box ul li:nth-child(6) {
      background: rgba(170, 19, 120, 0.5);
      transform: translateZ(-100px) rotateY(180deg);
    }

    .box ul:hover {
      transform: rotateX(360deg) rotateY(360deg);
    }
  </style>
</head>

<body>
  <div class="nav">
    <ul type="none" id="nav">
      <li class="active"><a href="#">博客首页</a></li>
      <li><a href="#">随手笔记</a></li>
      <li><a href="#">版本管理</a></li>
      <li><a href="#">用户反馈</a></li>
      <li><a href="#">门店管理</a></li>
      <li><a href="#">购物评价</a></li>
      <li><a href="#">后台管理</a></li>
    </ul>
  </div>

  <div class="box">
    <ul>
      <li>上</li>
      <li>下</li>
      <li>左</li>
      <li>右</li>
      <li>前</li>
      <li>后</li>
    </ul>
  </div>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(function () {
      var $coupon_tab = $("#nav>li");
      var index = 0;
      $coupon_tab.click(function () {
        // 移除tab中class的active属性
        $($coupon_tab[index]).removeClass('active');
        index = $(this).index();
        // 添加tab中class的active属性
        $(this).addClass('active');
      });
    });
  </script>
</body>

</html>
相关推荐
天天扭码10 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
到底起什么网名才能不重名12 小时前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
sunbyte14 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS17 小时前
Flex布局原理
前端·css·css3
点云登山者17 小时前
登山第二十六梯:单目3D检测一切——一只眼看世界
3d·3d检测·检测一切·单目3d检测
小飞悟20 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
xhload3d20 小时前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
小赖同学啊20 小时前
光伏园区3d系统管理
前端·javascript·3d
默默地离开21 小时前
Blob二进制处理的王者
前端·javascript·html
晴殇i1 天前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css