css的animation效果 * 2

 

---

1、文字背景色过渡动画

界面：

<div class="shimmer">shimmer</div>

css:

.shimmer {
        font-size: 60rpx;
        color: rgba(255, 255, 255, 0.1);
        animation: changeBg0 3s infinite;
        -moz-animation: changeBg0 3s infinite;
        -webkit-animation: changeBg0 3s infinite;
        background: linear-gradient(to left, rgb(255, 0, 0), rgb(255, 0, 255), rgb(0, 0, 255), rgb(0, 255, 255), rgb(0, 255, 0),rgb(255, 255, 0), rgb(255, 0, 0)) 0px 0px / 125px 100% no-repeat rgb(34, 34, 34);
        -webkit-background-clip: text ;
        background-repeat: no-repeat;
        background-position: 0px 0px;
    }

    @keyframes changeBg0 {
        0% {background-position: left top;}
        100% { background-position: right top;}
    }
    @-webkit-keyframes changeBg0 {
        0% {background-position: left top;}
        100% {background-position: right top;}
    }
    @-moz-keyframes  changeBg0 {
        0% { background-position: left top;}
        100% {background-position: right top;}
    }

效果：

shimmer

 

---

---

 2、背景色动态渐变

界面：

<div class="css16497904_colorBackground"></div>

css：

/*<editor-fold desc="背景色动态渐变">*/
.a-back-auto{
    -webkit-animation: changeBg 10s infinite;
    -moz-animation: changeBg 10s infinite;
    animation: changeBg 10s infinite;
    background-color: #ED5564;
}
@-webkit-keyframes changeBg{
    0%{background-color:#ED5564;}
    10%{background-color:#FB6E52;}
    20%{background-color:#FFCE55;}
    30%{background-color:#A0D468;}
    40%{background-color:#48CFAE;}
    50%{background-color:#4FC0E8;}
    60%{background-color:#5D9CEC;}
    70%{background-color:#AC92ED;}
    80%{background-color:#EC87BF;}
    90%{background-color:#ED5564;}
}
@-moz-keyframes changeBg{
    0%{background-color:#ED5564;}
    10%{background-color:#FB6E52;}
    20%{background-color:#FFCE55;}
    30%{background-color:#A0D468;}
    40%{background-color:#48CFAE;}
    50%{background-color:#4FC0E8;}
    60%{background-color:#5D9CEC;}
    70%{background-color:#AC92ED;}
    80%{background-color:#EC87BF;}
    90%{background-color:#ED5564;}
}
@keyframes changeBg{
    0%{background-color:#ED5564;}
    10%{background-color:#FB6E52;}
    20%{background-color:#FFCE55;}
    30%{background-color:#A0D468;}
    40%{background-color:#48CFAE;}
    50%{background-color:#4FC0E8;}
    60%{background-color:#5D9CEC;}
    70%{background-color:#AC92ED;}
    80%{background-color:#EC87BF;}
    90%{background-color:#ED5564;}
}
/*</editor-fold>*/

效果：

背景色动态渐变效果 

 

---

---

 3、上下弹跳

界面：

<div class='css1672482717'>上下弹跳效果展示</div>

 css:

/*<editor-fold desc="上下弹跳">*/
.css1672482717{
    animation: myfirst 1s infinite alternate;
    margin-right: 20rpx;
}

@keyframes myfirst {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(7px);
    }

    50% {
        transform: translateY(15px) scale(1.2,0.9);
    }

    75% {
        transform: translateY(7px);
    }

    100% {
        transform: translateY(0);
    }
}
/*</editor-fold>*/

 

效果：

 

上下弹跳效果展示

 

 

---

---

 

 4、彩色动态边框

界面：

<view class="coloredBor">
    <view class="coloredBor-body" >写内容</view>
</view>

css：

// 彩色动态边框
.coloredBor{
  width: 650rpx;
  position: relative;
  padding: 2rpx;
  overflow: hidden;
  border-radius: 20rpx;
}
.coloredBor-body{
  background: white;
  position: relative;
  border-radius: 20rpx;
}
.coloredBor:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
  background-size: 50% 100%;
  animation: SidebarCreate_rainbowSlide-zxLzf 1s linear infinite;
}
@keyframes SidebarCreate_rainbowSlide-zxLzf{to{transform:translateX(-50%)}}

效果：

彩色动态边框

 

 

---

---

 

5、三道光环

界面：

<div class="cssload-loader">
  <div class="cssload-pic">红色区域可以放logo</div>
  <div class="cssload-inner cssload-one"></div>
  <div class="cssload-inner cssload-two"></div>
  <div class="cssload-inner cssload-three"></div>
</div>

css：

/*<editor-fold desc="三道光环">*/
.cssload-loader {

  width: 200px;
  height: 200px;
  z-index: 100;
  perspective: 780px;
  transform-style: preserve-3d;
}
.cssload-pic{
  width: 200px;
  height: 200px;
  background: rgba(255, 0, 0, 0.1);
}
.cssload-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.cssload-inner.cssload-one {
  left: 0%;
  top: 0%;
  animation: cssload-rotate-one 1.15s linear infinite;
  -o-animation: cssload-rotate-one 1.15s linear infinite;
  -ms-animation: cssload-rotate-one 1.15s linear infinite;
  -webkit-animation: cssload-rotate-one 1.15s linear infinite;
  -moz-animation: cssload-rotate-one 1.15s linear infinite;
  border-bottom: 3px solid #5C5EDC;
}
.cssload-inner.cssload-two {
  right: 0%;
  top: 0%;
  animation: cssload-rotate-two 1.15s linear infinite;
  -o-animation: cssload-rotate-two 1.15s linear infinite;
  -ms-animation: cssload-rotate-two 1.15s linear infinite;
  -webkit-animation: cssload-rotate-two 1.15s linear infinite;
  -moz-animation: cssload-rotate-two 1.15s linear infinite;
  border-right: 3px solid #9e85c3;
}
.cssload-inner.cssload-three {
  right: 0%;
  bottom: 0%;
  animation: cssload-rotate-three 1.15s linear infinite;
  -o-animation: cssload-rotate-three 1.15s linear infinite;
  -ms-animation: cssload-rotate-three 1.15s linear infinite;
  -webkit-animation: cssload-rotate-three 1.15s linear infinite;
  -moz-animation: cssload-rotate-three 1.15s linear infinite;
  border-top: 3px solid #e9908a;
}
@keyframes cssload-rotate-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);;
  }
}
@-webkit-keyframes cssload-rotate-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@-webkit-keyframes cssload-rotate-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}
@keyframes cssload-rotate-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
@-webkit-keyframes cssload-rotate-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}
/*</editor-fold>*/

效果：

红色区域可以放logo