首页 网站导航 H5定制 金句文案

H5案例分享：CSS3动效实例篇一

2016-11-25 H5案例分享 H5案例分享

 

 

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动效实例篇的快乐旅程就到这里了，下期分享再见~~~

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签

分享：
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信，点击底部的“发现”，
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐：

H5案例分享：CSS神器 —— Less

H5案例分享：CSS3 Animation动画

关注微信号：h5-share，获取更多创意H5案例分享！也可访问H5案例分享网站www.h5anli.com，搜索查阅~


阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

H5案例分享 | 联系我们 | 使用前必读
Copyright © 2013-2023 Jiandou Technology Co.,Ltd. All Rights Reserved.
北京简豆科技有限公司版权所有 京ICP备16038688号-2 京公网安备 11010802030403号
搜索
首页 网站导航 H5定制 我的消息
 我的收藏 退出

对汉语支持不错，别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~