常见的css动画效果

 

一、常用的动效

1、背景颜色淡入淡出

 

 

 

 

背景颜色淡入淡出

 

 

 

 

/* 背景颜色的淡入淡出 */
.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、下划线从中间往两边淡入淡出

 

 

 

下划线中间往两边淡入淡出

 

 

 

 

/*后面的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、按钮心跳动画

 

 

 

 

按钮心跳动画

 

 

 

 

 

/* 按钮心跳动画 */
  .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、内容从下向上移入动画

 


    

      

      

      

        
我是底部内容

      

    

  

 

 

 

 

/* 内容从下向上移入 */
  .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、伪类实现按钮边框动画

 

单边框

 


        

            

            

            

            

        

        Start
    

 

 

 

 

.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);
  }

 

 

 

多边框

 

 


        

            

            

            

            

        

        

            

            

            

            

        

        

            

            

            

            

        

        Start
    

 

 

 

 

.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大小变化

 

 

 

大小变化

    
big


small

 

 

 

 

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

 

 

 

1.2形状变化

 

 

 

 

 

形状变化


skew-l


skew-r


skew-l-t


skew-r-t


skew-l-b


skew-r-b

 

 

 

 

 

.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旋转角度变化

 

 

 

 

 

旋转角度变化


grow-rotate-l


grow-rotate-r


rotate5


rotate15


rotate30


rotate60


rotate90


rotate180


rotate360


rotate-5


rotate-15


rotate-30


rotate-60


rotate-90


rotate-180

 

 

 

 

.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位移变化

 

 

 

 

 

位移变化


up


bottom


left


right

 

 

 

 

 

.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边框变化

 

边框变化


border


border-in

 

 

 

 

.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阴影变化

 

 

 

 

效果图和实际有点点差别

 

阴影变化


shadow


shadow-in


shadow-write


shadow-big

 

 

 

 

 

.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透明度变化

 

透明度变化


fade-out


fade-in

 

 

 

 

.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圆角变化

 

 

 

 

圆角变化


rectangle


radius

 

 

 

 

.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色块变化

 

 

 

 

色块变化

    
fade


fade-t


fade-b


fade-l


fade-r


bounce-t


bounce-b


bounce-l


bounce-r


fade-c-out


fade-c-in


fade-m-out


fade-m-in




overline-l


overline-r


underline-l


underline-r


underline-c


underline-c-out


overline-c


overline-c-out

 

 

 

 

/* 色块变化 */
        /*当前元素设置相对定位*/
.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颜色上下线变化

 

 

 

 

 

 

颜色上下线变化


overline-l


overline-r


underline-l


underline-r


underline-c


underline-c-out


overline-c


overline-c-out

 

 

 

 

 

/*上划线和下划线变化 当前元素样式设置相对定位*/
.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箭头变化

 

 

 

 

 

箭头动画


arrow-l


arrow-r


arrow-t


arrow-b


arrow-l


arrow-r


arrow-t


arrow-b

 

 

 

 

 

/* 箭头动画 */
.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);
}

 

 

 

 

 

 

 

 

 

 

CSS前端

相关

DOM修改 使用DOM操作CSS

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

HTML和CSS

1.css布局技巧

Scss支持多主题切换的方案实现

google icons 的使用 和 css 设置图标为 loading 状态

nodejs 一个简单的web服务器，用于前端自己快速测试部署

深入理解前端跨域方法和原理

【前端单元测试入门04】Karma

node-scss npm的时候报错

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

标签