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