论坛 › 欢乐水吧 › 花潮电视

马黑黑 发表于 2022-5-10 20:05

花潮电视

<style>
.tvOuter {
        margin: 20px auto 0;
        width: 720px;
        height: 520px;
        border-radius: 3px;
        background: rgba(0,0,0,.85);
        box-shadow: 0px 0px 2px 4px #000;
        position: relative;
}
.tvOuter::before, .tvOuter::after {
        position: absolute;
        content: '';
        width: 30px;
        height: 30px;
        top: 100%;
        left: 20%;
        background: inherit;
        clip-path: polygon(10% 100%,50% 0%,90% 100%,70% 100%,50% 30%,30% 100%);
}
.tvOuter::after { left: 80%;}
.tvInner {
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(lightgreen,olive);
        font: bold 80px / 520px sans-serif;
        text-align: center;
        color: rgba(0,200,0,.75);
        text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.tvInner img { position: absolute; border-radius: 50%; top: 20px; left: 20px; display: none; }
</style>

<div class="tvOuter">
        <div class="tvInner">
                HUACHAO TV
                <img id="dl" src="/uc_server/data/avatar/000/00/42/93_avatar_middle.jpg" alt="" />
        </div>
</div>

<script>

let dl = document.querySelector('#dl');
let tvi = document.querySelector('.tvInner');

tvi.onmouseover = function(){
        dl.style.display ='block';
}

tvi.onmouseout = function(){
        dl.style.display ='none';
}

</script>

马黑黑 发表于 2022-5-10 20:05

本帖最后由 马黑黑 于 2022-5-10 20:09 编辑

这个是可以把视频放电视里的，有兴趣的自己放。代码：

<style>
.tvOuter {
      margin: 20px auto 0;
      width: 720px;
      height: 520px;
      border-radius: 3px;
      background: rgba(0,0,0,.85);
      box-shadow: 0px 0px 2px 4px #000;
      position: relative;
}
.tvOuter::before, .tvOuter::after {
      position: absolute;
      content: '';
      width: 30px;
      height: 30px;
      top: 100%;
      left: 20%;
      background: inherit;
      clip-path: polygon(10% 100%,50% 0%,90% 100%,70% 100%,50% 30%,30% 100%);
}
.tvOuter::after { left: 80%;}
.tvInner {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(lightgreen,olive);
      font: bold 80px / 520px sans-serif;
      text-align: center;
      color: rgba(0,200,0,.75);
      text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.tvInner img { position: absolute; border-radius: 50%; top: 20px; left: 20px; display: none; }
</style>

<div class="tvOuter">
      <div class="tvInner">
                HUACHAO TV
                <img id="dl" src="/uc_server/data/avatar/000/00/42/93_avatar_middle.jpg" alt="" />
      </div>
</div>

<script>

let dl = document.querySelector('#dl');
let tvi = document.querySelector('.tvInner');

tvi.onmouseover = function(){
      dl.style.display ='block';
}

tvi.onmouseout = function(){
      dl.style.display ='none';
}

</script>

醉美水芙蓉 发表于 2022-5-10 20:15

梦油 发表于 2022-5-10 20:23

黑黑朋友晚上好！这个制作如果学会了一定大有用武之地，或将自己制作的小视频放进去那才开心呢。

东篱闲人 发表于 2022-5-10 20:23

这是啥破玩意？也没有节目啊？把俺放电视里干嘛？电着俺可咋整？{:5_158:}

马黑黑 发表于 2022-5-10 20:30

东篱闲人 发表于 2022-5-10 20:23
这是啥破玩意？也没有节目啊？把俺放电视里干嘛？电着俺可咋整？

代言人

马黑黑 发表于 2022-5-10 20:31

梦油 发表于 2022-5-10 20:23
黑黑朋友晚上好！这个制作如果学会了一定大有用武之地，或将自己制作的小视频放进去那才开心呢。

这个队长会做的

马黑黑 发表于 2022-5-10 20:31

醉美水芙蓉 发表于 2022-5-10 20:15
欣赏学习老师教程！

{:4_190:}

东篱闲人 发表于 2022-5-10 20:33

本帖最后由 东篱闲人 于 2022-5-10 20:43 编辑

马黑黑 发表于 2022-5-10 20:30
代言人
电着俺，讹死你。。。。{:5_158:}

大猫咪 发表于 2022-5-10 20:36

哈哈   花潮电视台开播了{:4_189:}老黑好创意   {:5_106:}

小辣椒 发表于 2022-5-10 20:41

黑黑，这个可以做全屏电视了{:4_178:}

马黑黑 发表于 2022-5-10 20:42

小辣椒 发表于 2022-5-10 20:41
黑黑，这个可以做全屏电视了

超窄边框

马黑黑 发表于 2022-5-10 20:43

东篱闲人 发表于 2022-5-10 20:33
电着俺，讹诈你。。。。

电视机的点都是温柔的电，电电更健康，电电更长寿

东篱闲人 发表于 2022-5-10 20:43

马黑黑 发表于 2022-5-10 20:43
电视机的点都是温柔的电，电电更健康，电电更长寿

给钱。。。。

马黑黑 发表于 2022-5-10 20:44

大猫咪 发表于 2022-5-10 20:36
哈哈   花潮电视台开播了    老黑好创意

嗯嗯，本来还真想闹点玩着，后面还是克制一下下。这不，东篱都怕被电了

马黑黑 发表于 2022-5-10 20:44

东篱闲人 发表于 2022-5-10 20:43
给钱。。。。

谢谢，随便给点就行了，不客气的

东篱闲人 发表于 2022-5-10 20:46

马黑黑 发表于 2022-5-10 20:44
谢谢，随便给点就行了，不客气的

反碰瓷啊？{:5_115:}

马黑黑 发表于 2022-5-10 20:47

东篱闲人 发表于 2022-5-10 20:46
反碰瓷啊？

这个必须的。你以为上电视免费呀

梦油 发表于 2022-5-10 20:58

马黑黑 发表于 2022-5-10 20:31
这个队长会做的

好啊，我看看。

马黑黑 发表于 2022-5-10 20:59

梦油 发表于 2022-5-10 20:58
好啊，我看看。

耐心等待

查看完整版本: 花潮电视