python与h5结合实例_H5案例分享：CSS3动效实例篇一

CSS3动效实例篇一

全国很多地方都开始飘起了雪花，大家注意保暖啊~北京这几天虽是艳阳高照，但堵车从未因天气而变过，然并卵~小五依然坐在窗前码代码中~~~嘿嘿······小文艺了一把，废话不多说了，快来和小五一起走进有趣的CSS3动效实例中吧~~~

一、水波进度条

这个效果类似于360加速球，希望达到的效果就是球内的水波荡漾着往上升。小五听到这个效果的时候，第一时间想到的是用Canvas来实现，就用Canvas试了试，结果整出来的成了这样

扫码体验：

与理想中的上升水波真是千差万别，打个比方，就像我理想中的效果是这样：

做出来的确是这样：

好像让写成这样的人跪键盘啊，然而！！！写成这样的就是小五我自己！心塞！没办法，换个思路，换种方法啦，试试用CSS3来实现，实验方法主要是采用CSS3的border-radius(圆角)，和改变transform的rotate、top来实现的。

@-webkit-keyframes spin {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes spin {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes topant {

from {top:100%;}

to {top:0;}

}

@keyframes topant {

from {top:100%;}

to {top:0;}

}

.waterant{

-webkit-animation: spin 6s linear infinite,

topant 30s infinite;

animation: spin 6s linear infinite,

topant 30s infinite;

}

最终实现的效果：

扫码体验：

我还将这个效果微创新了一下，用到了项目中：

扫码体验：

二、文字一行一行书写的效果

小五最初实现这个效果由于项目赶得比较急，就采用了第一时间想到的实现方法，采用的是绝对定位结合改变外层盒子的width。项目完结之后，小五由细想了这个效果，发现实现起来有些麻烦，还会增加html结构，不太好啊，小编又扒了扒CSS3属性，找到了一个更好地实现方法，它就是clip(剪裁图像)，clip-path:inset()的四个值代表的方位是一样的，分别是上边缘、右边缘、下边缘和左边缘。

实现效果：

@-webkit-keyframes wdani1{

0%{clip:rect(0px,0px,492px,0px);}

25%{clip:rect(0px,750px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

@keyframes wdani1{

0%{clip:rect(0px,0px,492px,0px);}

25%{clip:rect(0px,750px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

.wdani1{

-webkit-animation:wdani1 8s infinite;

animation-name:wdani1 8s infinite;

}

@-webkit-keyframes wdani2{

0%{clip:rect(0px,0px,492px,0px);}

25%{clip:rect(0px,0px,492px,0px);}

50%{clip:rect(0px,750px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

@keyframes wdani2{

0%{clip:rect(0px,0px,492px,0px);}

25%{clip:rect(0px,0px,492px,0px);}

50%{clip:rect(0px,750px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

.wdani2{

-webkit-animation:wdani2 8s infinite;

animation-name:wdani2 8s infinite;

}

@-webkit-keyframes wdani3{

0%{clip:rect(0px,0px,492px,0px);}

50%{clip:rect(0px,0px,492px,0px);}

75%{clip:rect(0px,750px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

@keyframes wdani3{

0%{clip:rect(0px,0px,492px,0px);}

50%{clip:rect(0px,0px,492px,0px);}

75%{clip:rect(0px,750px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

.wdani3{

-webkit-animation:wdani3 8s infinite;

animation-name:wdani3 8s infinite;

}

@-webkit-keyframes wdani4{

0%{clip:rect(0px,0px,492px,0px);}

75%{clip:rect(0px,0px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

@keyframes wdani4{

0%{clip:rect(0px,0px,492px,0px);}

75%{clip:rect(0px,0px,492px,0px);}

100%{clip:rect(0px,750px,492px,0px);}

}

.wdani4{

-webkit-animation:wdani4 8s infinite;

animation-name:wdani4 8s infinite;

}

扫码体验：

三、时钟

小五看到网上有各种各样的时钟效果，实现效果也多种多样，有用canvas的，有用flas的，有用CSS3的，小五也写了一个时钟效果，使用CSS3的transform的rotate属性结合CSS3动画的执行时间，实现起来非常简单：

/* 时针动画 */

@-webkit-keyframes hourant {

0%{

-webkit-transform:rotate(0deg);

-webkit-transform-origin:142px 142px;

}

100%{

-webkit-transform:rotate(360deg);

-webkit-transform-origin:142px 142px;

}

}

@keyframes hourant {

0%{

-webkit-transform:rotate(0deg);

-webkit-transform-origin:142px 142px;

}

100%{

-webkit-transform:rotate(360deg);

-webkit-transform-origin:142px 142px;

}

}

.hourant{

-webkit-animation: hourant 3600s linear infinite;

animation: hourant 3600s linear infinite;

}

/* 分针动画 */

@-webkit-keyframes minuteant {

0%{

-webkit-transform:rotate(0deg);

-webkit-transform-origin:142px 142px;

}

100%{

-webkit-transform:rotate(360deg);

-webkit-transform-origin:142px 142px;

}

}

@keyframes minuteant {

0%{

-webkit-transform:rotate(0deg);

-webkit-transform-origin:142px 142px;

}

100%{

-webkit-transform:rotate(360deg);

-webkit-transform-origin:142px 142px;

}

}

.minuteant{

-webkit-animation: minuteant 60s linear infinite;

animation: minuteant 60s linear infinite;

}

/* 秒针动画 */

@-webkit-keyframes secondant {

0%{

-webkit-transform:rotate(0deg);

-webkit-transform-origin:142px 142px;

}

100%{

-webkit-transform:rotate(360deg);

-webkit-transform-origin:142px 142px;

}

}

@keyframes secondant {

0%{

-webkit-transform:rotate(0deg);

-webkit-transform-origin:142px 142px;

}

100%{

-webkit-transform:rotate(360deg);

-webkit-transform-origin:142px 142px;

}

}

.secondant{

-webkit-animation: secondant 1s linear infinite;

animation: secondant 1s linear infinite;

}

实现效果：

扫码体验：

四、打开门效果

小兔乖乖，把门开开，不开不开就不开，小五来打开，小五整了一个打开门的效果，主要采用的是CSS3的transform的transform-origin、perspective、rotateY属性，大家一起来欣赏一下吧~

核心代码：

/*左边的门css3动画*/

@-webkit-keyframes leftdoorani {

0%,100% {

-webkit-transform-origin: 0% 40%;

}

0{

-webkit-transform:perspective(0) rotateY(0);

}

100% {

-webkit-transform:perspective(600px) rotateY(90deg);

}

}

@keyframes leftdoorani {

0%,100% {

transform-origin: 0% 40%;

}

0{

transform:perspective(0) rotateY(0);

}

100% {

transform:perspective(600px)rotateY(90deg);

}

}

.leftdoorani{

-webkit-animation:leftdoorani 4s infinite;

animation:leftdoorani 4s infinite;

}

/*右边的门css3动画*/

@-webkit-keyframes rightdoorani {

0%,100% {

-webkit-transform-origin: 100% 40%;

}

0{

-webkit-transform:perspective(0) rotateY(0);

}

100% {

-webkit-transform:perspective(600px) rotateY(-90deg);

}

}

@keyframes rightdoorani {

0%,100% {

transform-origin: 100% 40%;

}

0{

transform:perspective(0) rotateY(0);

}

100% {

transform:perspective(600px) rotateY(-90deg);

}

}

.rightdoorani{

-webkit-animation:rightdoorani 4s infinite;

animation:rightdoorani 4s infinite;

}

扫码体验：

五、翻牌效果，

“飞机 顺子 王炸 压死 大你 不要 过”，相信很多人对这几个词不陌生吧，斗地主、炸金花，小五在大学玩了好多次，曾被贴的满脸小纸条吓跑过隔壁的MM，最后一个给大家分享的就是CSS3翻牌动效！

这个效果主要采用的是CSS3的transform中的rotateY属性结合CSS本身已有的z-index属性：代码如下：

.front {

z-index: 2;

transform: rotateY(0deg);

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

}

.back {

z-index: 1;

transform: rotateY(-180deg);

transform: rotateY(-180deg);

-webkit-transform: rotateY(-180deg);

-moz-transform: rotateY(-180deg);

-ms-transform: rotateY(-180deg);

-o-transform: rotateY(-180deg);

}

/* 正面动画 */

@-webkit-keyframes frontani{

0%{z-index: 2;

transform: rotateY(0deg);

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

}

50%{

z-index: 1;

transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

}

0%{z-index: 2;

transform: rotateY(360deg);

transform: rotateY(360deg);

-webkit-transform: rotateY(360deg);

-o-transform: rotateY(360deg);

}

}

@keyframes frontani{

0%{z-index: 2;

transform: rotateY(0deg);

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

}

50%{

z-index: 1;

transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

}

100%{z-index: 2;

transform: rotateY(360deg);

transform: rotateY(360deg);

-webkit-transform: rotateY(360deg);

-o-transform: rotateY(360deg);

}

}

.frontani{

-webkit-animation:frontani 5s infinite;

animation-name:frontani 5s infinite;

}

/* 反面动画 */

@-webkit-keyframes backani{

0%{z-index: 1;

transform: rotateY(-180deg);

transform: rotateY(-180deg);

-webkit-transform: rotateY(-180deg);

-o-transform: rotateY(-180deg);

}

50%{

z-index: 2;

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

}

100%{z-index: 1;

transform: rotateY(180deg);

transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

}

}

@keyframes backani{

0%{z-index: 1;

transform: rotateY(-180deg);

transform: rotateY(-180deg);

-webkit-transform: rotateY(-180deg);

-o-transform: rotateY(-180deg);

}

50%{

z-index: 2;

transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

-o-transform: rotateY(0deg);

}

100%{z-index: 1;

transform: rotateY(180deg);

transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

}

}

.backani{

-webkit-animation:backani 5s infinite;

animation-name:backani 5s infinite;

}

扫码体验：

欢乐的大学时光已经一去不复返了，今天分享的CSS3动效实例篇的快乐旅程就到这里了，下期分享再见~~~