<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<title>transparent</title>
<style>
Body {
Background:black;
}
/*. div-border {
background:red;
border-width:50px;
Display:inline-block;
Border-style:solid;
height:500px;
} */
. wrap{
height:500px;
}
. Shan {
Position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
Margin:auto;
/* border-width:100px; */
/* BORDER-STYLE:SOLID; */
/* BORDER-COLOR:RGBA (255, 0, 0, 0.76) #15ff00 RGB (0, 204, 255) RGB (255, 0, 200); */
Background:rgb (255, 230, 0);
width:100px;
height:100px;
border-radius:100%;
animation:show-animation 2s ease-in-out 0s infinite;
-moz-animation:show-animation 2s ease-in-out 0s infinite;/* fit firefox */
-webkit-animation:show-animation 2s ease-in-out 0s infinite;/* with google and safari*/
}
@keyframes show-animation{
0%{
Transform:scale (0);
-moz-transform:scale (0);
-webkit-transform:scale (0);
}
100%{
Transform:scale (1);
-moz-transform:scale (1);
-webkit-transform:scale (1);
opacity:0;
}
}
p {
Display:inline-block;
/* background:red; */
Color: #fff;
width:100px;
height:20px;
Position:absolute;
top:50%;
left:50%;
Margin-left: -50px;
Margin-top: -10px;
}
</style>
<body>
<div class= "Div-border" >
</div>
<div class= "Wrap" >
<div class= "Shan" ></div>
<p> Hello </p>
</div>
</body>
Web Front end Learning Communication Group 21 598399936
CSS implements surround text to emit aperture