您现在的位置是：网站首页> 编程资料编程资料

利用CSS3动画实现圆圈由小变大向外扩散的效果实例CSS3地图动态实例代码(圆圈向外扩散)HTML5结合CSS3实现的光感圆圈动画特效源码jquery+css3动态圆圈运动背景特效代码jQuery+css3实现漂亮的以圆圈方式显示的彩色时钟效果CSS实现圆形放大镜狙击镜效果只有圆圈里的放大

2021-09-04 921人已围观

简介这篇文章主要给大家介绍了关于如何利用CSS3动画实现圆圈由小变大向外扩散效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale）

css3中新增了一个animation的属性，该属性类似于创建一个animation对象

如：animation: bounce 2.0s infinite ease-in-out;

animation有以下几个参数：

属性	描述	CSS
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

CSS 3 中2D转换的实现用到两个属性：

属性	描述	CSS
transform	向元素应用 2D 或 3D 转换。	3
transform-origin	指定变换的基点的位置。	3

静态效果图：

具体如代码所示：

无标题文档

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。