JSFiddle - React, Tailwind, and code Playground

by rolence0515

HTML

<div class="bg" style="width:100%;height:1000px;padding-top:100px">
<div class="orb  orb_1">
	<div id="changecontent" class="changecontent" style="padding-top:42px"> </div>
 </div>
</div>

CSS

.bg {
	background-color :gray;
}

.orb {
  height: 100px;
  width: 100px;
  border-radius: 200px;
  background: #1F7A8C;
  margin: auto;
  margin-top: 200px;
	
}

.orb_1 {
  animation-name:orb_1;
  animation-duration: 5s;
  animation-delay: 0s;
  animation-iteration-count:infinite;
	animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
.changecontent{
	width:50%;
	margin:0 auto;
	font-size:10px;
	text-align: center;
}
.changecontent::after{
	animation: changetext 10s infinite linear;
	white-space: pre-wrap;
	
}

/* @keyframes changetext{
  from { content:'吸氣 \A我不是這個身體'}
  to { content:'吐氣 \A我不是這個頭腦'}
} */

@keyframes orb_1 {
  from { transform: scale(1); background: #B3CDE3;}
	to { transform: scale(4); background: #DECCE4;}
}

JavaScript

function set_rand_number(){


  number = Math.floor(Math.random() * 99) + 1 
  var el = document.getElementById("changecontent")
  el.innerHTML=number
}
set_rand_number()

window.setInterval(set_rand_number, 5000);