利用CSS3动画实现圆圈由小变大向外扩散的效果实例
46 浏览量
2020-09-22
11:30:30
上传
评论
收藏 50KB PDF 举报
利用利用CSS3动画实现圆圈由小变大向外扩散的效果实例动画实现圆圈由小变大向外扩散的效果实例
主要给大家介绍了关于如何利用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
静态效果图：静态效果图：
具体如代码所示：具体如代码所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=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" {
资源评论
