利用CSS3动画实现圆圈由小变大向外扩散的效果实例

更新时间:2023-04-06 21:21:38 阅读：评论：0

前言

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

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

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

animation有以下几个参数：

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

css 3 中2d转换的实现用到两个属性：

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

静态效果图：

具体如代码所示：

<!doctype html><html><head><meta http-equiv="content-type" content="text/html; chart=utf-8" /><title>无标题文档</title><style>@keyframes warn { 0% {  transform: scale(0);  opacity: 0.0;相看两相知 } 25% {  transform: scale(0);  opacity: 0.1; } 50% {  transform: scale(0.1);  opacity: 0.3; } 75% {  transform: scale(0.5);  opacity: 0.5; } 100% {  transform: scale(1);  opacity:恒星和行星的关系 0.0; }}@-webkit-keyframes "warn" { 0% {  -webkit-transform: scale(0);  opacity: 0.0; } 25% {  -webkit-transform: scale(0);  opacity: 0.1; } 50% {  -webkit-transform: scale(0.1);  opacity: 0.3; } 75% {  -webkit-transform: scale(0.5);  opacity: 0.5; } 100% {  -webkit-transform: scale(1);  opacity: 0.0; }} .container { position: relative; width: 40px; height: 40px; border: 1px solid #000;}/* 保持大小不变的小圆圈  */.dot { position: absolute; width: 6px; height: 6px; left: 15px; top: 15px; -webkit-border-radius: 20px; -moz-border-radius: 20px; 大学生社团border: 2px solid red; border-radius: 20px; z-index: 2;}/* 产生动画（向外扩散变大）的圆圈  */.pul { position: absolute; width: 24px;  height: 24px; left: 2px; top: 2px; border: 6px solid red; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; z-index: 1; opacity: 0; -webkit-animation: warn 3s ea-out; -moz-animation: warn 3s ea-out; animation: warn 3s ea-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite;}</style> </head> <body><div class="container">    <div class="dot"></div>    <div class="pul"></div></div></b河南科技职业大学ody></html>

北京迷奇总结

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

本文发布于:2023-04-06 21:21:37，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/f1263c6e43ab68ca1b283d8c2da530c6.html

本文word下载地址：利用CSS3动画实现圆圈由小变大向外扩散的效果实例.doc

本文 PDF 下载地址：利用CSS3动画实现圆圈由小变大向外扩散的效果实例.pdf

上一篇：别再说人间不值得，新零售创业究竟应该怎么玩？

下一篇：返回列表