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

这种立体效果的光柱如果用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 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题