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

2023-12-27 15:04:07

NAV标题切换目录

块级元素:

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

行内元素:

在网页中始终以行内逐个显示,没有自己的形状并且不能定义自己的宽和高,他显示的宽和高根据所包含内容的宽和高确定。
内联元素也会遵循盒模模型基本法则,如定义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% 是动画的完成

效果图

在这里插入图片描述

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

<!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>

文章来源:https://blog.csdn.net/DHLSP15/article/details/135237509
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。