Css3 过渡（Transition）特效回调函数

最新推荐文章于 2022-05-30 20:44:54 发布

爆米花机枪手

最新推荐文章于 2022-05-30 20:44:54 发布

阅读量5.1k

点赞数 1

分类专栏： HTML Web前端 Node-Ng-Electron 文章标签： css3 回调函数

本文链接：https://blog.csdn.net/qqHJQS/article/details/50396349

版权

本文介绍了如何使用Css3的Transition特性制作颜色过渡效果，以模拟喝水签到功能中签到框被水充满的视觉体验。通过JavaScript原生代码监听过渡结束事件，实现了签到成功后的动画特效。

摘要由CSDN通过智能技术生成

Css3 出来之后，可以说是替代了Flash，通过使用Html5和Css3的完美结合，就可以做出任何你想得到的特效，这里不再阐述。。。

最近在做一个喝水签到的功能，在想签到成功之后，签到框可以模拟被水充满的效果，如图

这是一个简单的颜色过渡，几行代码就完成了我想要的效果，

   #waterDiv
		{
		width:100px;
		height:100px;
		display: block;
		margin-top: 200px;
		background:gray;
		transition:background-color 2s;
		-moz-transition:background-color 2s; /* Firefox 4 */
		-webkit-transition:background-color 2s; /* Safari and Chrome */
		-o-transition:background-color 2s; /* Opera */
		border-radius:50px;
		}

上面的代码是刚开始的灰色圆，注意“transition”（w3c讲的比我详细，点击表格进入w3c学校）