[分享]css3手机效果代码

p标签： 随着移动互联网时代的到来，越来越多的网站和应用开始注重移动端的用户体验。而CSS3作为一种强大的前端技术，可以为手机端的设计和开发提供很多便利。其中，手机效果的实现就是CSS3技术中的一个重...

p标签：
随着移动互联网时代的到来，越来越多的网站和应用开始注重移动端的用户体验。而CSS3作为一种强大的前端技术，可以为手机端的设计和开发提供很多便利。其中，手机效果的实现就是CSS3技术中的一个重要部分。下面，我们将来看看一些常用的CSS3手机效果代码。
pre标签：

/*1. 手机呼吸效果*/
@-webkit-keyframes breath {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.5;
  }
}
.breath {
  -webkit-animation: breath 2s infinite alternate;
}
<br>
/*2. 手机抖动效果*/
@-webkit-keyframes shake {
  0%{
    -webkit-transform:rotateZ(0deg);
  }
  30%{
    -webkit-transform:rotateZ(-10deg);
  }
  60% {
    -webkit-transform:rotateZ(10deg);
  }  
  90% {
    -webkit-transform:rotateZ(-10deg);
  }
  100% {
    -webkit-transform:rotateZ(0deg);
  }
}
<br>
.shake {
  -webkit-animation-name: shake;
  -webkit-transform-origin:50% 50%;
  -webkit-animation-duration:1.2s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count: infinite;
}
<br>
/*3. 手机弹跳效果*/
.myclass {
  -webkit-animation-name: bounceOutDown;
  -moz-animation-name: bounceOutDown;
  -o-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
  -webkit-animation-duration: 2.5s;
  -moz-animation-duration: 2.5s;
  -o-animation-duration: 2.5s;
  animation-duration: 2.5s; 
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355,1.000);
  -moz-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
  -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
<br>
/*4. 手机密集抖动效果*/
.shake-constant {
  -webkit-animation-name: shake-constant;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
}
<br>
@-webkit-keyframes shake-constant {
  from {
    -webkit-transform: translate(-3px, 3px) rotate(-3deg);
  }
  to {
    -webkit-transform: translate(3px, -3px) rotate(3deg);
  }
}