CSS3动画产生圆圈由小变大向外扩散的效果

更新时间:2023-07-28 04:23:08 阅读: 评论:0

读书可以CSS3动画产⽣圆圈由⼩变⼤向外扩散的效果涉及到 CSS3 的动画(animation)、2D 转换(transform: scale),具体如代码所⽰。
<!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;
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>
</body>
</html>

本文发布于:2023-07-28 04:23:08,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1121110.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:动画   不变   圆圈   认识   涉及   目的   效果
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图