CSS3实现可翻转的hover效果

源码坊

CSS3实现可翻转的hover效果,具体代码如下所示：
1.css

1. /*基础样式*/  html {      font-family: sans-serif;      -ms-text-size-adjust: 100%;      -webkit-text-size-adjust: 100%;  }  body {      margin: 0 auto;      text-align: center;      background-color: #FFFFCC;  }  ul {      list-style: none;      float: left;      margin: 0;      padding: 0;  }  a {      cursor: pointer;  }  div {      display: inline-block;      margin: 40px;  }  ul li {      width: 200px;      height: 40px;      line-height: 40px;      text-align: center;      margin: 10px;      background-color: #747474;      border-radius: 4px;      color: white;  }  dis-block{      display: block;  }  /*#nav1鼠标hover效果  前后翻转*/  #nav1 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav1 ul li:hover {      transform: translateZ(30px) rotateX(360deg) scale(1.1);      -webkit-transform: translateZ(30px) rotateX(360deg) scale(1.1);      -ms-transform: translateZ(30px) rotateX(360deg) scale(1.1);      -moz-transform: translateZ(30px) rotateX(360deg) scale(1.1);  }  /*#nav2鼠标hover效果 上浮*/  #nav2 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav2 ul li:hover {      transform: translateZ(30px) scale(1.1);      -webkit-transform: translateZ(30px) scale(1.1);      -ms-transform: translateZ(30px) scale(1.1);      -moz-transform: translateZ(30px) scale(1.1);  }  /*#nav4鼠标hover效果 下浮*/  #nav4 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav4 ul li:hover {      transform: translateZ(30px) scale(0.9);      -webkit-transform: translateZ(30px) scale(0.9);      -ms-transform: translateZ(30px) scale(0.9);      -moz-transform: translateZ(30px) scale(0.9);  }  /*#nav3鼠标hover效果 左右翻转*/  #nav3 ul li {      transform-style: preserve-3d;      -webkit-transform-style: preserve-3d;      -ms-transform-style: preserve-3d;      -moz-transform-style: preserve-3d;      transition: 0.5s;      -webkit-transition: 0.5s;      -ms-transition: 0.5s;      -moz-transition: 0.5s;  }  #nav3 ul li:hover {      transform: translateZ(30px) rotateY(360deg) scale(1.1);      -webkit-transform: translateZ(30px) rotateY(360deg) scale(1.1);      -ms-transform: translateZ(30px) rotateY(360deg) scale(1.1);      -moz-transform: translateZ(30px) rotateY(360deg) scale(1.1);  }  /*button1 hover效果*/  btn1 {      background-color: #1AAB8A;      color: white;      font-size: 18px;      height: 60px;      width: 150px;      border: 0;      transition: 800ms ease all;      outline: none;      position: relative;  }  btn1:hover {      background: #fff;      color: #1AAB8A;  }  btn1:before, .btn1:after {      content: '';      position: absolute;      height: 2px;      width: 0;      background: #1AAB8A;      transition: 400ms ease all;  }  btn1:before {      right: 0;      top: 0;  }  btn1:after {      left: 0;      bottom: 0;  }  btn1:hover:before, .btn1:hover:after {      width: 100%;      transition: 800ms ease all;  }

复制代码

2.html

1. <div id="nav1">              <p>前后翻转</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div id="nav2">              <p>上浮</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div id="nav4">              <p>下浮</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div id="nav3">              <p>左右翻转</p>              <ul>                  <li>                      <a>home</a>                  </li>                  <li>                      <a>js</a>                  </li>                  <li>                      <a>jquery</a>                  </li>                  <li>                      <a>div+css</a>                  </li>                  <li>                      <a>css3</a>                  </li>              </ul>          </div>          <div class="dis-block">              <p>按钮hover效果</p>              <button class="btn1" type="button">hover!</button>          </div>

复制代码

效果：








总结
以上所述是小编给大家介绍的CSS3实现可翻转的hover效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对模板人源码语网站的支持！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-307-1-1.html