css:动画斜切导航栏图片翻转

最新推荐文章于 2024-05-28 17:04:14 发布

小强有个dream

最新推荐文章于 2024-05-28 17:04:14 发布

阅读量230

点赞数

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

本文链接：https://blog.csdn.net/qq_36413371/article/details/120393116

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

斜切导航栏

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <!-- <link href="css/reset.css" rel="stylesheet" type="text/css" /> -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    li,
    ol {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .mainNav {
      height: 40px;
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .mainNav li {
      float: left;
      margin-right: 20px;
    }

    .mainNav a {
      color: #fff;
      background: #284da0;
      line-height: 40px;
      display: block;
      padding-left: 30px;
      padding-right: 30px;
      font-size: 16px;
    }

    .mainNav a:hover {
      background: #18305f;
    }

    .mainNav li {
      float: left;
      margin-right: 20px;
      transform: skewX(-30deg);
      /* 沿着 x 方向，倾斜 -30deg */
    }

    .mainNav li span {
      transform: skewX(30deg);
      /*让文字反向倾斜 30deg */
      display: block;
      /* skew 倾斜只对块级元素有效 */
    }

    .mainNav a {
      /* ...省略其他代码... */
      border-radius: 10px 0;
      /* 左上 右下 10px圆角，右上 左下直角 */
    }
  </style>
  <!-- <script type="text/javascript" src="../../jquery-1.8.3.js"></script>   -->





</head>

<body>
  <nav class="mainNav">
    <ul>
      <li><a href="#"><span>首页</span></a></li>
      <li><a href="#"><span>公司介绍</span></a></li>
      <li><a href="#"><span>产品展示</span></a></li>
      <li><a href="#"><span>联系我们</span></a></li>
      <li><a href="#"><span>企业招聘</span></a></li>
    </ul>
  </nav>
</body>

</html>

图片翻转

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <style>
    /* entire container, keeps perspective */
    .flip-container {
      perspective: 1000;
    }

    /* flip the pane when hovered */
    .flip-container:hover .flipper,
    .flip-container.hover .flipper {
      transform: rotateY(180deg);
    }

    .flip-container,
    .front,
    .back {
      width: 320px;
      height: 480px;
    }

    /* flip speed goes here */
    .flipper {
      transition: 0.6s;
      transform-style: preserve-3d;

      position: relative;
    }

    /* hide back of pane during swap */
    .front,
    .back {
      backface-visibility: hidden;

      position: absolute;
      top: 0;
      left: 0;
    }

    /* front pane, placed above back */
    .front {
      z-index: 2;
    }

    /* back, initially hidden pane */
    .back {
      transform: rotateY(180deg);
    }
  </style>





</head>

<body>
  <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
      <div class="front">
        <!-- 前面内容 -->
        <img style="width: 600px;height: 350px;" src="https://img0.baidu.com/it/u=4117776038,2125990016&fm=26&fmt=auto"
          alt="">
      </div>
      <div class="back">
        <!-- 背面内容 -->
        <img style="width: 600px;height: 350px;" src="https://img2.baidu.com/it/u=725785047,2548696229&fm=26&fmt=auto"
          alt="">
      </div>
    </div>
  </div>
</body>

</html>

小强有个dream

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css:动画斜切导航栏图片翻转

斜切导航栏<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8" />  <style> * { margin: 0; paddi
复制链接

扫一扫