div+css实现心电图跳动动画效果代码-html代码-BFW代码库

div+css实现心电图跳动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现心电图跳动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
<style>
:root {
	--spd: 2s;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 100%, #111, #333);
}

.monitor {
	width: 50vmin;
	height: 50vmin;
	background: 
		linear-gradient(-90deg, #fff 0 0.5vmin, #fff0 1vmin 100%), 
		linear-gradient(90deg, #212121 60%, #02ff4e 80% 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	background-color: #212121;
	position: relative;
	animation: pulse var(--spd) ease -0.5s infinite;
	border-radius: 0.75vmin;
	overflow: hidden;
	border: 4vmin solid #141414;
	border-color: #141414 #555555 #757575 #232323;
	color: #00800060;
	line-height: 50.05vmin;
	font-size: 1.7vmin;
	text-indent: 1.5vmin;
	word-spacing: 42.45vmin;
}

.monitor:before, 
.monitor:after {
	position: absolute;
	left: 0;
	background: #212121;
	width: 100%;
	height: 100%;
	font-family: Arial, Helvetica, serif;
	font-size: 1.5vmin;
}

.monitor:after {
	box-shadow: 0 0 0 2px #000;
	clip-path: polygon(0% 50.75%, 35.85% 50.75%, 42.85% 29%, 54.75% 65%, 59.9% 44%.........完整代码请登录后点击上方下载按钮下载查看