您的位置：首页 > Web前端 > CSS

css实现环绕文字发出光圈

2017-12-18 15:35 711 查看

<!DOCTYPE html>

<html lang="en">

<head>

<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;/*适配火狐浏览器*/

-webkit-animation: show-animation 2s ease-in-out 0s infinite;/*适配谷歌和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>

</head>

<body>

<div class="div-border">

</div>

<div class="wrap">

<div class="shan"></div>

<p>哈喽，你好</p>

</div>

</body>

</html>

WEB前端学习交流群21 598399936

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航