常見的css動畫效果

 

一、常用的動效

1、背景顏色淡入淡出

 

 

 

 

<div class="bgc">背景顏色淡入淡出</div>
 

 

 

 

/* 背景顏色的淡入淡出 */
.bgc {
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #ccc;
    border-radius: 5px;
    transition: background-color 1s;
    transition-timing-function: ease-in-out;
    cursor: pointer;
}
.bgc:hover {
    background-color: #09f;
}

　　

 

2、下划線從中間往兩邊淡入淡出

 

 

 

<div class="underline-cen-out ege">下划線中間往兩邊淡入淡出</div>
 

 

 

 

/*后面的ege都用該css樣式*/
    .ege {
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
        position: relative;
        transition: all .3s;
        z-index: 1;
    }
 

 

 

 

.underline-cen-out::after {
    content: "";
    width: 0;
    height: 3px;
    background: #3866ff;
    position: absolute;
    top: 100%;
    left: 50%;
    transition: .8s;
    margin-top: -3px;
  }
  .underline-cen-out:hover::after {
    left: 0;
    width: 100%;
  }

　　

 

3、按鈕心跳動畫

 

 

 

 

<div class="heart-shake ege">按鈕心跳動畫</div>
 

 

 

 

 

/* 按鈕心跳動畫 */
  .heart-shake {
    border-radius: 10px;
    background: #3866ff;
    color: #ffffff;
    box-shadow: 0 2px 30px 0 #3866ff63;
    animation: submitBtn 1.5s ease infinite;
  }
  @keyframes submitBtn {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

　　

 

4、內容從下向上移入動畫

 

<div class="box">
    <div class="baise">
      <div class="zhe-zhao"></div>
      <div class="up-bao"></div>
      <div class="zhe-text">
        <p>我是底部內容</p>
      </div>
    </div>
  </div>
 

 

 

 

/* 內容從下向上移入 */
  .box {
    width: 280px;
    height: 300px;
    position: relative;
    /* background-color: pink; */
    background: url("http://img30.360buyimg.com/baoxian/jfs/t7423/47/3941548926/53740/eeeda758/59cb037bN06494a9f.jpg") no-repeat center;
    /* border: 1px solid #ccc; */
  }
  .baise {
    position: absolute;
    width: 280px;
    height: 300px;
    left: 0;
    top: 0;
    overflow: hidden;
  }
  .zhe-zhao {
    width: 100%;
    height: 155px;
    filter: alpha(enabled=false);
    opacity: 1;
    background: #fff;
    position: absolute;
    bottom: -75px;
    left: 0;
    z-index: 10;
    *z-index: 1;
    transition: .3s all ease;
  }
  .up-bao {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(Opacity=0);
    opacity: 0;
    transition: .6s all ease-in;
  }
  .zhe-text {
    width: 250px;
    z-index: 1000;
    position: absolute;
    bottom: -105px;
    left: 0;
    padding: 15px;
    height: 155px;
    overflow: hidden;
    text-align: center;
    z-index: 11;
    transition: all .3s ease-in-out;
  }
  .box:hover .up-bao {
    filter: alpha(Opacity=50);
    opacity: .5;
  }
  .box:hover .zhe-zhao {
    bottom: -50px;
    filter: alpha(Opacity=0);
    opacity: 0;
  }
  .box:hover .zhe-text {
    bottom: 10px;
  }
 

　　

 

 

 

5、偽類實現按鈕邊框動畫

 

單邊框

 

<div class="btn border-animation">
        <div class="btn-borders">
            <div class="border-top"></div>
            <div class="border-right"></div>
            <div class="border-bottom"></div>
            <div class="border-left"></div>
        </div>
        <span class="btn-text">Start</span>
    </div>
 

 

 

 

.btn {
    --ease-in-duration: 0.25s;
    --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-duration: 0.65s;
    --ease-out-delay: var(--ease-in-duration);
    --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #ebebeb;
    cursor: pointer;
    transition: 0.25s;
  }
  .btn .btn-borders {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .btn .btn-borders .border-top {
    position: absolute;
    top: 0;
    width: 100%;
    height: 1px;
    background: #3866ff;
    transform: scaleX(0);
    transform-origin: left;
  }
  .btn .btn-borders .border-right {
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    background: #3866ff;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  .btn .btn-borders .border-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #3866ff;
    transform: scaleX(0);
    transform-origin: left;
  }
  .btn .btn-borders .border-left {
    position: absolute;
    left: 0;
    width: 1px;
    height: 100%;
    background: #3866ff;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  .btn .btn-borders .border-left {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
  }
  .btn .btn-borders .border-bottom {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
  }
  .btn .btn-borders .border-right {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
  }
  .btn .btn-borders .border-top {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
  }
  .btn:hover {
    background: transparent;
  }
  .btn:hover .border-top,
  .btn:hover .border-bottom {
    transform: scaleX(1);
  }
  .btn:hover .border-left,
  .btn:hover .border-right {
    transform: scaleY(1);
  }
  .btn:hover .border-left {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
  }
  .btn:hover .border-bottom {
    transition: var(--ease-in-duration) var(--ease-in-exponential);
  }
  .btn:hover .border-right {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
  }
  .btn:hover .border-top {
    transition: var(--ease-out-duration) var(--ease-out-delay) var(--ease-out-exponential);
  }

　　

 

 

 

多邊框

 

 

<div class="btn btn-primary btn-ghost btn-multiple-border-stroke">
        <div class="btn-borders-group">
            <div class="border-top"></div>
            <div class="border-right"></div>
            <div class="border-bottom"></div>
            <div class="border-left"></div>
        </div>
        <div class="btn-borders-group">
            <div class="border-top"></div>
            <div class="border-right"></div>
            <div class="border-bottom"></div>
            <div class="border-left"></div>
        </div>
        <div class="btn-borders-group">
            <div class="border-top"></div>
            <div class="border-right"></div>
            <div class="border-bottom"></div>
            <div class="border-left"></div>
        </div>
        <span class="btn-text">Start</span>
    </div>
 

 

 

 

.btn {
  --ease-in-duration: 0.25s;
  --ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-duration: 0.65s;
  --ease-out-delay: var(--ease-in-duration);
  --ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 24px;
  color: #333333;
  background-color: #ffffff;
  border: 1px solid #ebebeb;
  cursor: pointer;
  transition: 0.25s;
}
.btn-multiple-border-stroke {
  border-color: transparent;
}
.btn-multiple-border-stroke .btn-borders-group {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid #cccccc;
}
.btn-multiple-border-stroke .btn-borders-group:nth-child(1) {
  left: -8px;
  padding: 0 8px;
}
.btn-multiple-border-stroke .btn-borders-group:nth-child(2) {
  top: -8px;
  padding: 8px 0;
}
.btn-multiple-border-stroke .btn-borders-group:nth-child(3) {
  top: -4px;
  left: -4px;
  padding: 4px;
}
.btn-multiple-border-stroke .btn-borders-group .border-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: #3866ff;
  transform: scaleX(0);
  transform-origin: left;
}
.btn-multiple-border-stroke .btn-borders-group .border-right {
  position: absolute;
  right: 0;
  width: 1px;
  height: 100%;
  background: #3866ff;
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn-multiple-border-stroke .btn-borders-group .border-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #3866ff;
  transform: scaleX(0);
  transform-origin: left;
}
.btn-multiple-border-stroke .btn-borders-group .border-left {
  position: absolute;
  left: 0;
  width: 1px;
  height: 100%;
  background: #3866ff;
  transform: scaleY(0);
  transform-origin: bottom;
}
.btn-multiple-border-stroke .btn-borders-group .border-left {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-multiple-border-stroke .btn-borders-group .border-bottom {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-multiple-border-stroke .btn-borders-group .border-right {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke .btn-borders-group .border-top {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke:hover {
  background: transparent;
}
.btn-multiple-border-stroke:hover .border-top,
.btn-multiple-border-stroke:hover .border-bottom {
  transform: scaleX(1);
}
.btn-multiple-border-stroke:hover .border-left,
.btn-multiple-border-stroke:hover .border-right {
  transform: scaleY(1);
}
.btn-multiple-border-stroke:hover .border-left {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke:hover .border-bottom {
  transition: var(--ease-in-duration) cubic-bezier(1, 0, 0.8, 0);
}
.btn-multiple-border-stroke:hover .border-right {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}
.btn-multiple-border-stroke:hover .border-top {
  transition: var(--ease-out-duration) var(--ease-out-delay) cubic-bezier(0.2, 1, 0.2, 1);
}

　　

 

 

二、其他hover動畫

 

div{
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
    }
 

　　

 

 

 

1、簡單動畫

1.1大小變化

 

 

 

<p>大小變化</p>
    <div class="example-big">big</div>
<div class="example-small">small</div>
 

 

 

 

.example-big,.example-small {
    transition: all .4s;
}
.example-big:hover{
    transform: scale(1.2);
}
.example-small:hover{
    transform: scale(.9);
}

　　

 

 

 

1.2形狀變化

 

 

 

 

 

<p>形狀變化</p>
<div class="example-skew-l">skew-l</div>
<div class="example-skew-r">skew-r</div>
<div class="example-skew-l-t">skew-l-t</div>
<div class="example-skew-r-t">skew-r-t</div>
<div class="example-skew-l-b">skew-l-b</div>
<div class="example-skew-r-b">skew-r-b</div>
 

 

 

 

 

.example-skew-l, .example-skew-r, .example-skew-l-t, .example-skew-r-b, .example-skew-l-b, .example-skew-r-t{
    transition: all .4s;
}
.example-skew-r-t, .example-skew-l-t {
    transform-origin: 0 100%;
}
.example-skew-r-b, .example-skew-l-b {
    transform-origin: 100% 0;
}
.example-skew-l:hover {
    transform: skew(-15deg);
}
.example-skew-r:hover {
    transform: skew(15deg);
}
.example-skew-l-t:hover {
    transform: skew(-15deg);
}
.example-skew-r-t:hover {
    transform: skew(15deg);
}
.example-skew-l-b:hover {
    transform: skew(15deg);
}
.example-skew-r-b:hover {
    transform: skew(-15deg);
}
 

　　

 

 

1.3旋轉角度變化

 

 

 

 

 

<p>旋轉角度變化</p>
<div class="example-grow-rotate-l">grow-rotate-l</div>
<div class="example-grow-rotate-r">grow-rotate-r</div>
<div class="example-rotate5">rotate5</div>
<div class="example-rotate15">rotate15</div>
<div class="example-rotate30">rotate30</div>
<div class="example-rotate60">rotate60</div>
<div class="example-rotate90">rotate90</div>
<div class="example-rotate180">rotate180</div>
<div class="example-rotate360">rotate360</div>
<div class="example-rotate-5">rotate-5</div>
<div class="example-rotate-15">rotate-15</div>
<div class="example-rotate-30">rotate-30</div>
<div class="example-rotate-60">rotate-60</div>
<div class="example-rotate-90">rotate-90</div>
<div class="example-rotate-180">rotate-180</div>
 

 

 

 

.example-grow-rotate-l,.example-grow-rotate-r, .example-rotate5, .example-rotate15, .example-rotate30, .example-rotate60, .example-rotate90, .example-rotate180, .example-rotate360, .example-rotate-5,.example-rotate-15, .example-rotate-30, .example-rotate-60, .example-rotate-90, .example-rotate-180{
transition: all .4s;
}
.example-grow-rotate-l:hover {
    transform: scale(1.1) rotate(4deg);
}
.example-grow-rotate-r:hover {
    transform: scale(1.1) rotate(-4deg);
}
.example-rotate-5:hover {
    transform: rotate(-5deg);
}
.example-rotate-15:hover {
    transform: rotate(-15deg);
}
.example-rotate-30:hover {
    transform: rotate(-30deg);
}
.example-rotate-60:hover {
    transform: rotate(-60deg);
}
.example-rotate-90:hover {
    transform: rotate(-90deg);
}
.example-rotate-180:hover {
    transform: rotate(-180deg);
}
.example-rotate5:hover {
    transform: rotate(5deg);
}
.example-rotate15:hover {
    transform: rotate(15deg);
}
.example-rotate30:hover {
    transform: rotate(30deg);
}
.example-rotate60:hover {
    transform: rotate(60deg);
}
.example-rotate90:hover {
    transform: rotate(90deg);
}
.example-rotate180:hover {
    transform: rotate(180deg);
}
.example-rotate360:hover {
    transform: rotate(360deg);
}

　　

 

 

 

1.4位移變化

 

 

 

 

 

<p>位移變化</p>
<div class="example-t">up</div>
<div class="example-b">bottom</div>
<div class="example-l">left</div>
<div class="example-r">right</div>
 

 

 

 

 

.example-t,.example-bottom,.example-top,.example-right{
    transition: all .4s;
}
.example-t:hover {
    transform: translate3d(0, -10px, 0);
}
.example-b:hover {
    transform: translate3d(0, 10px, 0);
}
.example-l:hover {
    transform: translate3d(-10px, 0, 0);
}
.example-r:hover {
    transform: translate3d(10px, 0, 0);
}

　　

 

 

 

1.5邊框變化

 

<p>邊框變化</p>
<div class="example-border">border</div>
<div class="example-border-in">border-in</div>
 

 

 

 

.example-border,.example-border-in{
    transition: all .4s;
}
.example-border:hover {
    box-shadow: 0 0 0 4px #09f, 0 0 1px transparent;
}
.example-border-in:hover {
    box-shadow: inset 0 0 0 4px #09f, 0 0 1px transparent;
}

　　

 

 

 

1.6陰影變化

 

 

 

 

效果圖和實際有點點差別

 

<p>陰影變化</p>
<div class="example-shadow">shadow</div>
<div class="example-shadow-in">shadow-in</div>
<div class="example-shadow-write">shadow-write</div>
<div class="example-shadow-big">shadow-big</div>
 

 

 

 

 

.example-shadow,.example-shadow-in,.example-shadow-write,.example-shadow-big{
    transition: all .4s;
}
.example-shadow:hover {
    box-shadow: 0 0 10px #333;
}   
.example-shadow-in:hover {
    box-shadow: inset 0 0 10px #333;
}
.example-shadow-write:hover {
    box-shadow: inset 0 0 20px #fff;
}
.example-shadow-big:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

　　

 

 

 

1.7透明度變化

 

<p>透明度變化</p>
<div class="example-fade-out">fade-out</div>
<div class="example-fade-in">fade-in</div>
 

 

 

 

.example-fade-out,.example-fade-in{
    transition: all .4s;
}
.example-fade-out:hover {
    opacity: .6;
}
.example-fade-in {
    opacity: .5;
}
.example-fade-in:hover {
    opacity: 1;
}

　　

 

 

 

1.8圓角變化

 

 

 

 

<p>圓角變化</p>
<div class="example-rectangle">rectangle</div>
<div class="example-radius">radius</div>
 

 

 

 

.example-radius,.example-rectangle{
    transition: all .4s;
}
.example-radius {
    border-radius: 10px;
}
.example-radius:hover {
    border-radius: 0;
}
.example-rectangle:hover {
    border-radius: 10px;
}

　　

 

 

 

2、顏色動畫效果

 

2.1色塊變化

 

 

 

 

<p>色塊變化</p>
    <div class="example-fade">fade</div>
<div class="example-fade-t">fade-t</div>
<div class="example-fade-b">fade-b</div>
<div class="example-fade-l">fade-l</div>
<div class="example-fade-r">fade-r</div>
<div class="example-bounce-t">bounce-t</div>
<div class="example-bounce-b">bounce-b</div>
<div class="example-bounce-l">bounce-l</div>
<div class="example-bounce-r">bounce-r</div>
<div class="example-fade-c-out">fade-c-out</div>
<div class="example-fade-c-in">fade-c-in</div>
<div class="example-fade-m-out">fade-m-out</div>
<div class="example-fade-m-in">fade-m-in</div>
<p></p>
<div class="example-overline-l">overline-l</div>
<div class="example-overline-r">overline-r</div>
<div class="example-underline-l">underline-l</div>
<div class="example-underline-r">underline-r</div>
<div class="example-underline-c">underline-c</div>
<div class="example-underline-c-out">underline-c-out</div>
<div class="example-overline-c">overline-c</div>
<div class="example-overline-c-out">overline-c-out</div>
 

 

 

 

/* 色塊變化 */
        /*當前元素設置相對定位*/
.example-fade, .example-fade-t, .example-fade-b, .example-fade-l, .example-fade-r, .example-fade-c-in, .example-fade-m-in, .example-fade-m-out, .example-fade-c-out, .example-bounce-t, .example-bounce-b, .example-bounce-r, .example-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*當前元素的:before和:after設置絕對定位*/
.example-fade:before, .example-fade-t:before, .example-fade-b:before, .example-fade-l:before, .example-fade-r:before, .example-fade-c-in:before, .example-fade-m-in:before, .example-fade-m-out:before, .example-fade-c-in:after, .example-fade-m-in:after, .example-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*彈跳元素:before和:after設置絕對定位和運動曲線*/
.example-bounce-t:before, .example-bounce-b:before, .example-bounce-r:before, .example-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/*背景顏色和文字變化*/
.example-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}
.example-fade:hover:before {
    opacity: 1;
}
/*顏色從左至右變化*/
.example-fade-l:before, .example-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/*顏色從右至左變化*/
.example-fade-r:before, .example-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
/*顏色從上往下變化*/
.example-fade-t:before, .example-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/*顏色從下往上變化*/
.example-fade-b:before, .example-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*顏色垂直居中出去*/
.example-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}
/*水平居中出去*/
.example-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}
.example-fade-c-out:hover:before {
    transform: scaleX(1);
}
/*水平居中進來*/
.example-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
.example-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}
/*垂直居中進來*/
.example-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
.example-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/*當前元素文字顏色變化*/
.example-fade:hover, .example-fade-t:hover, .example-fade-b:hover, .example-fade-l:hover, .example-fade-r:hover, .example-fade-c-in:hover, .example-fade-m-in:hover, .example-fade-m-out:hover, .example-fade-c-out:hover, .example-bounce-t:hover, .example-bounce-b:hover, .example-bounce-r:hover, .example-bounce-l:hover {
    color: #fff;
}
/*垂直方向進來的:before變化（一半）*/
.example-fade-m-in:hover:before, .example-fade-m-in:hover:after {
    transform: scaleY(.51);
}
/*垂直方向進來的:before變化*/
.example-fade-t:hover:before, .example-fade-b:hover:before, .example-fade-m-out:hover:before, .example-bounce-b:hover:before, .example-bounce-t:hover:before {
    transform: scaleY(1);
}
/*水平方向進來的:before變化（一半）*/
.example-fade-c-in:hover:before, .example-fade-c-in:hover:after {
    transform: scaleX(.51);
}
/*水平方向進來的:before變化*/
.example-fade-l:hover:before, .example-fade-r:hover:before,.example-fade-c-out:hover:before, .example-bounce-l:hover:before, .example-bounce-r:hover:before {
    transform: scaleX(1);
}

　　

 

 

 

2.2顏色上下線變化

 

 

 

 

 

 

<p>顏色上下線變化</p>
<div class="example-overline-l">overline-l</div>
<div class="example-overline-r">overline-r</div>
<div class="example-underline-l">underline-l</div>
<div class="example-underline-r">underline-r</div>
<div class="example-underline-c">underline-c</div>
<div class="example-underline-c-out">underline-c-out</div>
<div class="example-overline-c">overline-c</div>
<div class="example-overline-c-out">overline-c-out</div>
 

 

 

 

 

/*上划線和下划線變化 當前元素樣式設置相對定位*/
.example-overline-r, .example-overline-l, .example-underline-r, .example-underline-l, .example-underline-c, .example-overline-c, .example-underline-c-out, .example-overline-c-out{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化:after:before大小和絕對定位*/
.example-overline-r:before, .example-overline-l:before, .example-underline-l:before, .example-underline-r:before, .example-underline-c:before, .example-overline-c:before, .example-underline-c:after, .example-overline-c:after, .example-underline-c-out:before, .example-overline-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    height: 4px;
    width: 100%;
    transform: scaleX(0);
}
/*上划線 左右出來*/
.example-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
}
.example-overline-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
}
/*下划線 左右出來*/
.example-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;
}
.example-underline-l:before {
    bottom: 0;
    right: 0;
    transform-origin: 0% 50%;
}
/**上划線 下划線 居中進來**/
.example-overline-c:before {
    top: 0;
    transform-origin: 0 50%;
}
.example-overline-c:after {
    top: 0;
    transform-origin: 100% 50%;
}
.example-underline-c:before {
    bottom: 0;
    transform-origin: 0 50%;
}
.example-underline-c:after {
    bottom: 0;
    transform-origin: 100% 50%;
}
.example-overline-c:before, .example-underline-c:before {
    left: 0;
}
.example-overline-c:after, .example-underline-c:after {
    right: 0;
}
/*上划線 下划線-居中出去 */
.example-overline-c-out:before {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.example-underline-c-out:before {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/*hover效果*/
.example-overline-c:hover:after, .example-overline-c:hover:before, .example-underline-c:hover:after, .example-underline-c:hover:before {
    transform: scaleX(.51);
}
.example-overline-l:hover:before, .example-overline-r:hover:before, .example-underline-l:hover:before, .example-underline-r:hover:before, .example-underline-c-out:hover:before, .example-overline-c-out:hover:before {
    transform: scaleX(1);
}

　　

 

 

 

 

2.3箭頭變化

 

 

 

 

 

<p>箭頭動畫</p>
<div class="example-arrow-l">arrow-l</div>
<div class="example-arrow-r">arrow-r</div>
<div class="example-arrow-t">arrow-t</div>
<div class="example-arrow-b">arrow-b</div>
<div class="example-arrow-l-move">arrow-l</div>
<div class="example-arrow-r-move">arrow-r</div>
<div class="example-arrow-t-move">arrow-t</div>
<div class="example-arrow-b-move">arrow-b</div>
 

 

 

 

 

/* 箭頭動畫 */
.example-arrow-l, .example-arrow-r, .example-arrow-t, .example-arrow-b, .example-arrow-l-move, .example-arrow-r-move, .example-arrow-t-move, .example-arrow-b-move{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/*初始化箭頭樣式*/
.example-arrow-l:before, .example-arrow-r:before, .example-arrow-t:before, .example-arrow-b:before, .example-arrow-l-move:before, .example-arrow-r-move:before, .example-arrow-t-move:before, .example-arrow-b-move:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    z-index: -1;
    border-style: solid;
    margin: auto;
    width: 0;
    height: 0;
}
.example-arrow-l:before, .example-arrow-l-move:before {
    left: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
}
.example-arrow-r:before, .example-arrow-r-move:before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ccc;
}
.example-arrow-t:before, .example-arrow-t-move:before {
    left: 0;
    top: 0;
    right: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
}
.example-arrow-b:before, .example-arrow-b-move:before {
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
}
.example-arrow-l-move, .example-arrow-r-move, .example-arrow-t-move, .example-arrow-b-move {
    transition: transform .3s;
}
/*hover效果*/
.example-arrow-l-move:hover {
    transform: translateX(10px);
}
.example-arrow-r-move:hover {
    transform: translateX(-10px);
}
.example-arrow-t-move:hover {
    transform: translateY(10px);
}
.example-arrow-b-move:hover {
    transform: translateY(-10px);
}
.example-arrow-l-move:hover:before, .example-arrow-l:hover:before {
    transform: translateX(-10px);
}
.example-arrow-r-move:hover:before, .example-arrow-r:hover:before {
    transform: translateX(10px);
}
.example-arrow-t-move:hover:before, .example-arrow-t:hover:before {
    transform: translateY(-10px);
}
.example-arrow-b-move:hover:before, .example-arrow-b:hover:before {
    transform: translateY(10px);
}