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>
相关推荐
有事没事实验室9 小时前
node.js中的path模块
前端·css·node.js·html·html5
未来之窗软件服务12 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
Hilaku13 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
ZzMemory17 小时前
深入了解 module.css:前端样式管理的有效方案
前端·css·面试
易知微EasyV数据可视化17 小时前
3D高斯泼溅技术:数字孪生的新一代数据引擎
人工智能·3d·数字孪生·建模·3d高斯泼溅技术
zhongqu_3dnest17 小时前
3D实景的概念、特点及应用场景
3d
zc-code18 小时前
HTTP性能优化实战:从协议到工具的全面加速指南
网络·网络协议·http·缓存·性能优化·html
那就举个栗子!20 小时前
3DGRUT: 革命性的3D高斯粒子光线追踪与混合光栅化技术深度解析
3d
Dream耀1 天前
CSS过渡 vs 动画:都有哪些技巧
前端·css
DM今天肝到几点?1 天前
【7.26-7.28胜算云AI日报:首个开源3D世界生成模型腾讯混元、微软预示 8 月 GPT-5 发布、Nemotron推理、商汤悟能、DM夺金】
人工智能·vscode·microsoft·3d·ai·chatgpt