设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS实现鼠标悬停后导航栏反转效果！！附源码！！ ...
返回列表 发新帖
查看: 17|回复: 0

HTML+CSS实现鼠标悬停后导航栏反转效果！！附源码！！

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 昨天 21:49 | 显示全部楼层 |阅读模式
效果展示

640.gif
完整源码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6.     <title>悬停翻转的导航栏</title>
  7.     <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  8.     <style>
  9.         *{
  10.     /* 初始化 */
  11.     margin: 0;
  12.     padding: 0;
  13.     box-sizing: border-box;
  14. }
  15. body{
  16.     /* 100%窗口高度 */
  17.     min-height: 100vh;
  18.     /* 弹性布局 水平+垂直居中 */
  19.     display: flex;
  20.     justify-content: center;
  21.     align-items: center;
  22.     background-color: #f11c1c;
  23. }
  24. .container{
  25.     /* 弹性布局 允许换行 水平居中 */
  26.     display: flex;
  27.     flex-wrap: wrap;
  28.     justify-content: center;
  29. }
  30. .box{
  31.     width: 350px;
  32.     margin: 10px;
  33.     text-align: center;
  34.     /* 相对定位 */
  35.     position: relative;
  36.     /* 开启3D效果 */
  37.     transform-style: preserve-3d;
  38.     /* 设置视距 */
  39.     perspective: 3000px;
  40. }
  41. .box .front{
  42.     background-color: rgb(13, 125, 253);
  43.     width: 100%;
  44.     height: 220px;
  45.     /* 弹性布局 垂直排列 垂直居中 */
  46.     display: flex;
  47.     flex-direction: column;
  48.     justify-content: center;
  49.     /* 阴影 */
  50.     box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  51.     /* 设置过渡 */
  52.     transition: 0.5s ease;
  53. }
  54. .box .front .icon{
  55.     height: 80px;
  56. }
  57. .box .front .icon i,
  58. .box .front span{
  59.     /* 渐变背景 */
  60.     background: linear-gradient(220deg,#02dbb0,#007adf);
  61.     /* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 */
  62.     -webkit-background-clip: text;
  63.     /* 将文字透明镂空 */
  64.     -webkit-text-fill-color: transparent;
  65. }
  66. .box .front .icon i{
  67.     font-size: 65px;
  68.     font-weight: 900;
  69. }
  70. .box .front span,
  71. .box .back span{
  72.     font-size: 22px;
  73.     font-weight: 600;
  74.     /* 大写 */
  75.     text-transform: uppercase;
  76. }
  77. .box .back{
  78.     /* 绝对定位 */
  79.     position: absolute;
  80.     top: 0;
  81.     left: 0;
  82.     z-index: 1;
  83.     width: 100%;
  84.     height: 220px;
  85.     background: linear-gradient(220deg,#02dbb0,#007adf);
  86.     padding: 30px;
  87.     color: #fff;
  88.     /* 默认不透明度为0 */
  89.     opacity: 0;
  90.     /* 默认位置下移并沿Y轴旋转-90度 */
  91.     transform: translateY(110px) rotateX(-90deg);
  92.     /* 设置过渡 */
  93.     transition: 0.5s ease;
  94. }
  95. .box .back p{
  96.     margin-top: 12px;
  97.     /* 文本两端对齐 */
  98.     text-align: justify;
  99.     line-height: 23px;
  100. }
  101. /* 鼠标移入卡片，两个面做出相应的变化 */
  102. .box:hover .front{
  103.     opacity: 0;
  104.     transform: translateY(-110px) rotateX(90deg);
  105. }
  106. .box:hover .back{
  107.     opacity: 1;
  108.     transform: translateY(0) rotateX(0);
  109. }
  110.     </style>
  111. </head>
  112. <body>
  113.     <div class="container">
  114.         <div class="box">
  115.             <div class="front">
  116.                 <div class="icon">
  117.                     <i class="fa fa-apple" aria-hidden="true"></i>
  118.                 </div>
  119.                 <span>apple</span>
  120.             </div>
  121.             <div class="back">
  122.                 <span>apple</span>
  123.                 <p>苹果公司（Apple Inc. ）是美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立。</p>
  124.             </div>
  125.         </div>
  126.         <div class="box">
  127.             <div class="front">
  128.                 <div class="icon">
  129.                     <i class="fa fa-google" aria-hidden="true"></i>
  130.                 </div>
  131.                 <span>google</span>
  132.             </div>
  133.             <div class="back">
  134.                 <span>google</span>
  135.                 <p>谷歌公司（Google Inc.）成立于1998年9月4日，由拉里·佩奇和谢尔盖·布林共同创建，被公认为全球最大的搜索引擎公司。</p>
  136.             </div>
  137.         </div>
  138.         <div class="box">
  139.             <div class="front">
  140.                 <div class="icon">
  141.                     <i class="fa fa-windows" aria-hidden="true"></i>
  142.                 </div>
  143.                 <span>microsoft</span>
  144.             </div>
  145.             <div class="back">
  146.                 <span>microsoft</span>
  147.                 <p>微软（Microsoft）是一家美国跨国科技企业，由比尔·盖茨和保罗·艾伦于1975年4月4日创立。公司总部设立在华盛顿州雷德蒙德（Redmond，邻近西雅图）。</p>
  148.             </div>
  149.         </div>
  150.     </div>
  151. </body>
  152. </html>
复制代码
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表