php 动画效果,首页自适应的分类图标的动画渐入效果

随着HTML5技术的不断更新和革新，动画效果也越来越多的被使用。下面分享一个很炫的，自适应的分类的效果展示。

该展示不需要借助js或者jquery，单纯的html5+css3实现，有两种方式：渐入和震荡的进入。进入的类型分为左右，各位请根据需要自定义修改即可。

展示效果图如下：

HTML部分的代码如下:

首页自适应的分类图标的动画渐入效果

CSS部分的代码如下:

* {margin: 0;padding: 0;outline: 0}

a {text-decoration: none;}

body {

font-family: Microsoft YaHei;

font-size: 14px;

-webkit-touch-callout: none;

-webkit-user-select: none;

background-color: #f0f0f0

}

@-webkit-keyframes fadeInLeft {

0% {

opacity: 0;

-webkit-transform: translate3d(-300%, 0, 0);

transform: translate3d(-300%, 0, 0);

}

100% {

opacity: 1;

-webkit-transform: none;

transform: none;

}

}

@keyframes fadeInLeft {

0% {

opacity: 0;

-webkit-transform: translate3d(-300%, 0, 0);

transform: translate3d(-300%, 0, 0);

}

100% {

opacity: 1;

-webkit-transform: none;

transform: none;

}

}

@-webkit-keyframes fadeInRight {

0% {

opacity: 0;

-webkit-transform: translate3d(300%, 0, 0);

transform: translate3d(300%, 0, 0);

}

100% {

opacity: 1;

-webkit-transform: none;

transform: none;

}

}

@keyframes fadeInRight {

0% {

opacity: 0;

-webkit-transform: translate3d(300%, 0, 0);

transform: translate3d(300%, 0, 0);

}

100% {

opacity: 1;

-webkit-transform: none;

transform: none;

}

}

@-webkit-keyframes bounceInLeft {

0%, 60%, 75%, 90%, 100% {

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

}

0% {

opacity: 0;

-webkit-transform: translate3d(-3000px, 0, 0);

transform: translate3d(-3000px, 0, 0);

}

60% {

opacity: 1;

-webkit-transform: translate3d(25px, 0, 0);

transform: translate3d(25px, 0, 0);

}

75% {

-webkit-transform: translate3d(-10px, 0, 0);

transform: translate3d(-10px, 0, 0);

}

90% {

-webkit-transform: translate3d(5px, 0, 0);

transform: translate3d(5px, 0, 0);

}

100% {

-webkit-transform: none;

transform: none;

}

}

#homeCateIcon {

text-align: center;

padding: 0 0 3px;

background-color: #fff;

height: 193px;

}

#homeCateIcon .item {

width: 25%;

padding: 13px 0 0;

display: block;

float: left;

color: #333;

position: relative;

box-sizing: border-box;

-webkit-box-sizing: border-box

}

#homeCateIcon .item .icon {

border-radius: 22px;

-webkit-border-radius: 22px;

width: 44px;

height: 44px;

margin: 0 auto 8px;

color: #333;

position: relative;

background-size: 44px 44px;

}

#homeCateIcon .homeCateIcon .bounceInLeft {

-webkit-animation-name: bounceInLeft;

animation-name: bounceInLeft;

-webkit-animation-duration: 0.5s;

animation-duration: 0.5s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

#homeCateIcon .homeCateIcon .bounceInRight {

-webkit-animation-name: bounceInRight;

animation-name: bounceInRight;

-webkit-animation-duration: 0.5s;

animation-duration: 0.5s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

#homeCateIcon .homeCateIcon .fadeInLeft {

-webkit-animation-name: fadeInLeft;

animation-name: fadeInLeft;

-webkit-animation-duration: 0.5s;

animation-duration: 0.5s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

#homeCateIcon .homeCateIcon .fadeInRight {

-webkit-animation-name: fadeInRight;

animation-name: fadeInRight;

-webkit-animation-duration: 0.5s;

animation-duration: 0.5s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.cateIcon1 {

-webkit-animation-delay: 0s;

animation-delay: 0s;

background:url('./img/1.png') no-repeat;

}

.cateIcon2 {

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

background:url('./img/2.png') no-repeat;

}

.cateIcon3 {

-webkit-animation-delay: 1s;

animation-delay: 1s;

background:url('./img/3.png') no-repeat;

}

.cateIcon4 {

-webkit-animation-delay: 1.5s;

animation-delay: 1.5s;

background:url('./img/4.png') no-repeat;

}

.cateIcon5 {

-webkit-animation-delay: 2s;

animation-delay: 2s;

background:url('./img/5.png') no-repeat;

}

.cateIcon6 {

-webkit-animation-delay: 2.5s;

animation-delay: 2.5s;

background:url('./img/6.png') no-repeat;

}

.cateIcon7 {

-webkit-animation-delay: 3s;

animation-delay: 3s;

background:url('./img/7.png') no-repeat;

}

.cateIcon8 {

-webkit-animation-delay: 3.5s;

animation-delay: 3.5s;

background:url('./img/8.png') no-repeat;

}

坚持做一件事情，你就会累积更多知识、更多经验、更多资源，最后也就更有可能成功。想赢，一定要跑得比别人久.