html&css画呼吸灯 html&css画呼吸灯

文章图片

搞不了视频太难了。。。。
Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）
transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜

Document - 锐客网.bg { width: 500px; height: 500px; margin: 50px auto; background-color: rgb(217, 255, 2); position: relative; }.bg .small_cirlce { width: 300px; height: 300px; border: 20px solid white; /* 水平居中 */ top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; position: absolute; /* 变成边框盒子它的宽高是整个盒子的宽高 */ /* 因为边框占据了40px 所以用内容盒子的话会使其不能居中所以要转换成边框盒子 */ box-sizing: border-box; border-radius: 50%; /* 设置动画自定义动画名称circleease-in-out：动画以低速开始和结束infinite表示无限次执行*/animation: circle 5s ease-in-out infinite; }.bg .big_circle { width: 400px; height: 400px; border: 10px solid white; /* 设置水平居中 */ top: 50%; left: 50%; margin-top: -200px; margin-left: -200px; position: absolute; /* 变成边框盒子它的宽高是整个盒子的宽高 */ /* 因为边框占据了20px 所以用内容盒子的话会使其不能居中所以要转换成边框盒子 */ box-sizing: border-box; border-radius: 50%; /* 设置动画自定义动画名称circleease-in-out动画以低速开始和结束infinite：无限次执行*/ animation: circle 5s ease-in-out infinite; }/* 设置动画 */ @keyframes circle { /* transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜 */ 0% { /* 改变大小缩放 scale */ transform: scale(0.6); border-color: rgb(255, 3, 3); }25% { /* 改变大小 */ transform: scale(0.7); border-color: rgb(243, 5, 183); }50% { /* 改变大小 */ transform: scale(0.8); border-color: rgb(5, 101, 245); }75% { /* 改变大小 */ transform: scale(0.9); border-color: rgb(77, 248, 10); }100% { /* 改变大小 */ transform: scale(1); border-color: rgb(2, 236, 244); }}

【html&css画呼吸灯】