运用CSS3动漫完成圆圈由小增大向扩散的实际效果

日期：2021-01-20 类型：科技新闻我要分享

关键词：如何制作微信小游戏，微信游戏小程序，公众号游戏，h5小游戏模板，小程序游戏源码

序言

本文关键给大伙儿共享的是有关运用CSS3动漫完成圆圈由小增大向扩散的实际效果案例，文中涉及到到 CSS3 的动漫（animation）、2D 变换（transform: scale）

css3中新增了1个animation的特性，该特性相近于建立1个animation目标

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

animation有下列几个主要参数：

特性叙述 CSS animation 全部动漫特性的简写特性，除 animation-play-state 特性。 3 animation-name 要求 @keyframes 动漫的名字。 3 animation-duration 要求动漫进行1个周期所花销的秒或毫秒。默认设置是 0。 3 animation-timing-function 要求动漫的速率曲线图。默认设置是 "ease"。 3 animation-delay 要求动漫什么时候刚开始。默认设置是 0。 3 animation-iteration-count 要求动漫被播发的次数。默认设置是 1。 3 animation-direction 要求动漫是不是在下1周期逆向地播发。默认设置是 "normal"。 3 animation-play-state 要求动漫是不是正在运作或中止。默认设置是 "running"。 3 animation-fill-mode 要求目标动漫時间以外的情况。 3

CSS 3 中2D变换的完成用到两个特性：

特性叙述 CSS transform 向元素运用 2D 或三d 变换。 3 transform-origin 特定转换的基点的部位。 3

静态数据实际效果图：

实际如编码所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<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;
}
/* 造成动漫（向扩散增大）的圆圈  */
.pulse {
 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 ease-out;
 -moz-animation: warn 3s ease-out;
 animation: warn 3s ease-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="pulse"></div>
</div>
</body>
</html>

总结

以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值，假如有疑惑大伙儿能够留言沟通交流，感谢大伙儿对脚本制作之家的适用。

上一篇：手机微信转发抽奖主题活动如何做？返回下一篇：没有了