css画光晕线 |css3 平移动画

首先，大家需要一个HTML页面，包括div标签和span标签。这里的div标签是用来包裹光晕线，而span标签放置在div标签内，用来装饰光晕线。

<div class="halo">
<span class="line"></span>
</div>

接下来，大家可以通过CSS样式来增加光晕线的效果。首先是设置div标签的背景和边框：

.halo {
background-color: #fff1db;
border: 10px solid rgba(255, 205, 150, 0.5);
border-radius: 50px;
padding: 20px;
position: relative;
}

上述代码中，大家设置了div的背景颜色为浅黄色，边框宽度为10px，边框颜色为淡橙色（透明度为0.5），圆角半径为50px，内部padding为20px。同时，大家还将它定位为relative。

然后，大家来为span添加样式，让它成为一个光晕线。代码如下：

.halo .line {
position: absolute;
height: 100%;
width: 100%;
border-radius: 50px;
box-shadow: 0 0 60px 20px rgba(255, 205, 150, 0.5);
}

在上面的代码中，大家将span标签定位为absolute，让它覆盖在div标签上。然后设置的高度和宽度都为100%。接下来，大家让它的圆角半径与div标签相同，然后通过box-shadow属性添加发光效果。

好了，代码到这里就结束了。通过上面的实现，大家就可以轻松的画出一个漂亮的光晕线。