CSS3发光字动画
<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無標題文檔</title>
<style>
*{?margin:0;?padding:0}
img{?width:200px;?height:200px;?border:2px?solid?#000}
.back?h5?{
font-size:?4em;
color:?#f2050b;
text-align:?center;
animation:?warning?1.5s?infinite?ease-in;
}
@keyframes?warning?{
from?{
text-shadow:?0px?0px?4px?#000000;
}
50%?{
text-shadow:?0?0?40px?#000000;
}
to?{
text-shadow:?0?0?4px?#000000;
}
}
</style>
</head>
<body?id="quiz">
<div?class="back">
?<h5>我叫張小蕾</h5>
</div>
?
</body>
</html>
<html>
<head>
<meta?charset="utf-8">
<title>無標題文檔</title>
<style>
*{?margin:0;?padding:0}
img{?width:200px;?height:200px;?border:2px?solid?#000}
.back?h5?{
font-size:?4em;
color:?#f2050b;
text-align:?center;
animation:?warning?1.5s?infinite?ease-in;
}
@keyframes?warning?{
from?{
text-shadow:?0px?0px?4px?#000000;
}
50%?{
text-shadow:?0?0?40px?#000000;
}
to?{
text-shadow:?0?0?4px?#000000;
}
}
</style>
</head>
<body?id="quiz">
<div?class="back">
?<h5>我叫張小蕾</h5>
</div>
?
</body>
</html>
轉載于:https://www.cnblogs.com/xiaoleidiv/p/4087003.html
總結
- 上一篇： 汇付 支付，痛苦的接入过程
- 下一篇： Ajax+Node.js前后端交互最佳入