Javascript 如何在CSS/JS中创建超级赛扬效果？_Javascript_Jquery_Html_Css

Javascript 如何在CSS/JS中创建超级赛扬效果？

javascript jquery html css

Javascript 如何在CSS/JS中创建超级赛扬效果？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我还是个孩子的时候，我曾经读过所有的龙珠漫画书超级赛扬效果（周围的光环和闪电）真的很酷现在我有了一个事件页面，其中列出了卡片中所有即将发生的事件，如下所示：这是代码 <div class="col-sm-3 col-xs-12 event"> <div class="row hidden-xs icon"> <div class="title">16 Apr</div> &

当我还是个孩子的时候，我曾经读过所有的龙珠漫画书

超级赛扬效果（周围的光环和闪电）真的很酷

现在我有了一个事件页面，其中列出了卡片中所有即将发生的事件，如下所示：

这是代码

 <div class="col-sm-3 col-xs-12 event">
        <div class="row hidden-xs icon">
            <div class="title">16 Apr</div>
            <div class="event-time"><i>8:00PM</i></div>
            <div class="sub-title">Registration Opens 14 Apr</div>
        </div>

    <div class="row hidden-xs sub-icon">
        <div><span>LRC Thursday Night Run test long long</span></div>
        <div>
            <input type="button" class="btn btn-primary" value="Register" />
        </div>

    </div>

    <div class="row visible-xs-inline-block hidden-lg hidden-md hidden-sm event-sm">
        <div class="col-xs-4 event-left">
            <div class="event-day">16</div>
            <div class="event-month">apr</div>
            <div class="event-time"><i>8:00PM</i></div>
        </div>
        <div class="col-xs-8 event-right">
            <div class="event-notice">Registration Opens 14 Apr</div>
            <div class="event-title">LRC Night Run</div>
            <div class="event-slogan">Come run with us</div>
        </div>
    </div>
</div>

SVG

我有点不确定你是想要黄色的KI光晕还是灯光，所以我选择了灯光效果

我使用元素重用了一个简单的形状

灯光形状取自Gohan。左上角的灯光

正文{
保证金：0；
}
梅因先生{
背景色：黑色；
宽度：100vw；
高度：100vh；
}
.calander{}.calander h2{
保证金：0；
颜色：白色；
文本对齐：居中；
}
.calander.事件网格{
利润率：0.5%；
}
.事件网格.事件{
位置：相对位置；
显示：内联块；
宽度：30%；
高度：250px；
利润率：1%；
文本对齐：居中；
背景：-莫兹径向梯度（中心，椭圆覆盖，#4c0%，#2121100%）；
/*FF3.6+*/
背景：-webkit渐变（径向、中心、0px、中心、100%、颜色停止（0%，#4c4c）、颜色停止（100%，#212121））；
/*铬，Safari4+*/
背景：-webkit径向梯度（中心，椭圆覆盖，#4c0%，#2121100%）；
/*铬10+，Safari5.1+*/
背景：-o-径向梯度（中心，椭圆覆盖，#4c0%，#212121 100%）；
/*歌剧院12+*/
背景：-ms径向梯度（中心，椭圆覆盖，#4c0%，#212121 100%）；
/*IE10+*/
背景：径向梯度（中心椭圆，#4c0%，#2121100%）；
}
.事件.日期{
颜色：#666；
字号：3em；
边缘底部：10px；
文本阴影：0px 1px#222；
}
.事件.时间{
字号：1.4em；
颜色：#dd8834；
}
.事件.备注{
字体大小：1.3em；
颜色：蓝绿色；
}
.event.bottom注册{
位置：绝对位置；
底部：0；
身高：25%；
宽度：100%；
背景色：白色；
}
.event.bottomregp{
保证金：5px0；
}
.event.bottom注册表输入{
文本对齐：居中；
颜色：白色；
背景色：#55f；
边框：1px实心#99f；
}
：-webkit输入占位符{
/*WebKit浏览器*/
颜色：白色；
字体大小：粗体；
}
：-moz占位符{
/*Mozilla Firefox 4至18*/
颜色：白色；
字体大小：粗体；
}
：-moz占位符{
/*Mozilla Firefox 19+*/
颜色：白色；
字体大小：粗体；
}
：-ms输入占位符{
/*Internet Explorer 10+*/
颜色：白色；
字体大小：粗体；
}
.测试{
显示：无；
}
斯佩西亚尔先生{
z指数：5；
位置：绝对位置；
前-25%；
左-25%；
宽度：150%；
身高：150%；
}


即将举行的活动
4月16日
晚上八点


登记
法改会
4月19日
晚上10:00


登记
法改会
4月23日
晚上八点


注册
法改会

这可能不是最好的方法，但一个快速的方法可能是下载super saiyan的动画gif，使其透明，编辑角色，然后使用css在活动上覆盖图像

有了更好的照片编辑软件，这看起来可能会更好，但这只花了我大约5分钟

代码如下：


4月19日
晚上10:00


登记
法改会
#赛扬{
位置：绝对位置；
z指数：1；
宽度：160%；
身高：100%；
左-30%；
排名：0；
}

我只是绝对地将图像放置在事件对象的其余部分上，并使其宽度和高度取决于事件

div

免责声明：此代码适用于lulz

出于好奇，我创建了一个您可能喜欢的小示例：

闪电效应我使用了HTML5画布Lightning，它本身就是一个分支；然后将画布放置在一个div下，div的

0.99

不透明度

为20px
，每侧尺寸过大，以给出边界，但仅为几个像素
火灾效应
CSS中的火焰效果很容易通过文本阴影
属性实现；我曾经参与过，但这段代码与我在许多文章/小提琴中看到的几十次代码相同，可能是有史以来第一次
由于这只适用于文本，而不适用于div，因此我使用了:before
伪元素.sayan
div的content
属性来创建由符号组成的巨大文本（出于浪漫的原因，我使用了Go(悟) 小悟空的汉字(悟空), 但重要的是，它不是一个可识别的字母字符，也不是再见光环效果…请自己尝试使用内容：'a'；
），我将它放在画布和div之间，并使用负z-index

这只是一个有趣的实验，而不是问题中提出的生产代码或响应性内容（即使调整页面大小，div移动和sayan div将保留其功能）；我尝试回答这个问题：
有可能做到吗？如何做到
，希望你喜欢
如果你想把它转换成更严肃的东西，有很多工作要做（首先，改变脚本使一些点只沿边移动，以防止它们都在正方形内），但我仍然建议您使用一个透明的动画PNG，或者更简单、更少的CPU杀手，声明性地为lulz制作；）如果我没有弄错的话，他希望在对象周围移动火焰和闪电。这可能是一个SVG用例，但需要大量工作，顺便说一句，我不知道
.event {
    margin:10px;
    text-transform: uppercase;
}

.icon {
    background: #545454 url(../Content/img/event-icon.png) no-repeat center center;
    background-size:cover;
    min-height: 250px;
    height: 250px;
    width: auto;
    min-width: 250px;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.title{
  font-weight: 700;
  color:#6c6c6c;
  font-size: 67px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);

}

.sub-title{
  overflow: hidden;
  font-size: 18px;
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  color:#87e300;
  text-transform: uppercase;
  font-style: normal;
  font-weight: normal;
  font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.event-time{
  color:orange;
  font-size:25px;
}


.sub-icon {
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: space-around;
    background: #f3f3f3;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    line-height: 1.1;
    text-transform: uppercase;
    font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}

    .sub-icon span {
        display: inline-block;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 200px;
        white-space: nowrap;
        color:black;
    }

.sub-icon div{
  margin-top : 10px;
  margin-bottom:10px;
}


.event-day{
  font-size:24px;
  line-height:0.85;
  font-style:normal;
  font-weight:normal;
  color: #6c6c6c;
}
.event-month{
  color: #cccbcb;
  font-size: 42px;
}


.event-time{
  color:orange;
  font-size:25px;
}


.event-notice {
    color: #87e300;
    font-size: 14px;
    font-weight:600;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: .95;
    font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}

.event-title{
  font-size:16px;
  font-weight:800;
  color:white;
  font-family: 'TradeGothicW01-BoldCn20 675334', Helvetica, Arial, sans-serif;
}

.event-slogan{
  font-size:14px;
  font-weight:600;
  color: #999;
}

@media (max-width: 767px) {
    .event-sm {
        display: flex !important;
    }
}

<div class="event">
    <img id="saiyan" src="http://i.stack.imgur.com/CFoa1.gif" />
    <h1 class="date">19 APR</h1>
    <span class="time">10:00 PM</span>
    <br>
    <span class="note">registration</span>
    <div class="bottom-reg">
      <p>LRC</p>
      <input placeholder="REGISTER"></input>
    </div>
  </div>

<style>
    #saiyan {
      position: absolute;
      z-index: 1;
      width: 160%;
      height: 100%;
      left: -30%;
      top: 0;
    }
</style>