正文

css3的一个小demo（箭头hover变化）

IP云
IP云V管理员/5 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

 a{text-decoration: none;

     color: #EE7A23;}

         .select-self-area .select-btn .i-up-down {

             width: 8px;

             top: 0;

             left: 0; }

         .select-self-area .select-btn .i-up-down i {

             width: 5px;

             height: 2px;

             background-color: #605F5F; }

         .select-self-open .i-up-down .i-up-down-l {

             left: 0;

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: transform .3s ease-out; }

         .select-self-open .i-up-down .i-up-down-r {

             right: 0;

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: all .3s ease-out; }

         .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: all .3s ease-out; }

         .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: all .3s ease-out; }

         .i-up-down {

             position: relative;

             display: inline-block;

             width: 14px;

             height: 6px;

             vertical-align: middle;

             z-index: 2;

             -ms-transform: translateY(2px);

             transform: translateY(2px);

             transition: transform .3s ease-out; }

         .i-up-down i {

             position: absolute;

             top: 0;

             width: 8px;

             height: 1px;

             background: #EE7A23; }

         .i-up-down .i-up-down-l {

             left: 0;

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: transform .3s ease-out; }

         .i-up-down .i-up-down-r {

             right: 0;

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: transform .3s ease-out; }

     </style>

     <title>箭头显示</title>

 </head>

 <body>

 <div class="shipping-addr-more">

     <a class="addr-more-btn up-down-btn" href="#">

         more<!--利用css3样式旋转，使箭头变化-->

         <i class="i-up-down">

             <i class="i-up-down-l"></i>

             <i class="i-up-down-r"></i>

         </i>

     </a>

 </div>

 </body>

 </html>

主要是利用css3的transform的旋转变化来修改

其中transtion语法： 

transition: property duration timing-function delay;
transition:  过渡效果的 CSS 属性的名称  渡效果需要多少秒或毫秒  过渡效果何时开始

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

相关阅读

目录[+]