这种立体效果的光柱如果用css3实现

而且此光柱是慢慢从下往上升起来的~

图片说明

2个回答

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
body {
    background-color: #000;
}
.g {
    margin: 110px 20px 0px 20px;
    width: 100px;
    height: 30px;
    border-radius: 50%;
    background-color: #99f;
    border: 1px solid #f00;
    position: relative;
}
.g:before,.g:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
    border-radius: 50%/15px;
    transition: height 1s;
}
.g:before {
    background: radial-gradient(100px 30px at 50% 100%, rgba(255,0,0,0) 80%,rgba(255,0,0,.3) 100%);
    z-index: -1;
}
.g:after {
    background: radial-gradient(100px 30px at 50% 0%, rgba(255,0,0,0) 80%,rgba(255,0,0,.3) 100%);
    z-index: 1;
}
.g:hover:before, .g:hover:after {
    height: 100px;
}

</style>
</head>
<body>
<div class="g"></div>
</body>
</html>
angelafanfan0329
rogue2yjg 已经很接近了唉!厉害了!!!
大约一年之前 回复

已经很接近了唉,厉害了!!!

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问