求问,什么方法能画出如图红色框中的条状光线

Question

在项目中被要求说绘制如图红框中的条状光线,我尝试过一些方法都不能完全实现,特别是两端的尾巴部分.当然我也知道img转css是最快的,但是转换出来的代码之大,也是被驳回了.所以我很好奇,真的有css或者canvas的方法能实现么?

Answer 1

你也可以使用css的渐变

<div class="toLeft"></div>
<div class="toRight"></div>

div {
            width: 600px;
            height: 150px;
            border: 1px solid #666;
            line-height: 150px;
            text-align: center;
            font-weight: 900;
            font-size: 30px;
            color: #fff;
            margin: 10px auto;
        }
        .toLeft {
            background-image:-webkit-linear-gradient(
            to left, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%); 
            background-image:linear-gradient(
            to left, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%); 
        }

        .toRight {
            background-image:-webkit-linear-gradient(
            to right, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%);
            background-image: linear-gradient(
            to right, 
            rgba(255,0,0,0) 0%, 
            rgba(255,0,0,0.8) 7%, 
            rgba(255,0,0,1) 11%, 
            rgba(255,0,0,1) 12%, 
            rgba(255,252,0,1) 28%, 
            rgba(1,180,7,1) 45%, 
            rgba(0,234,255,1) 60%, 
            rgba(0,3,144,1) 75%, 
            rgba(255,0,198,1) 88%, 
            rgba(255,0,198,0.8) 93%, 
            rgba(255,0,198,0) 100%);
        
        }

建议你阅读：ww.w3cplus.com/css3/new-css3-linear-gradient.html

Answer 2

canvas，直接把图片画上去