rogue2yjg 2018-11-12 06:40 采纳率: 0%
浏览 1741

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

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

图片说明

  • 写回答

2条回答

  • 天际的海浪 2018-11-12 10:50
    关注
    <!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>
    评论

报告相同问题？

悬赏问题

  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果？
  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件