php直播源码，css实现流星效果

php直播源码，css实现流星效果相关的代码

<div id="stars" style="width: 100%;height: 100vh;margin: 0;overflow: hidden;background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .7));"><div class="star" style="top: 0px;left: 200px;"></div><div class="star" style="top: 0px;left: 300px;"></div><div class="star" style="top: 0px;left: 400px;"></div><div class="star" style="top: 0px;left: 500px;"></div><div class="star" style="top: 0px;left: 600px;"></div><div class="star" style="top: 0px;left: 700px;"></div>
</div>
<script>
mounted() {this.init()
},
methods: {init() {var stars = document.getElementById('stars')// js随机生成流星for (var j = 0; j < 30; j++) {var newStar = document.createElement("div")newStar.className = "star"newStar.style.top = this.randomDistance(500, -100) + 'px'newStar.style.left = this.randomDistance(1300, 300) + 'px'stars.appendChild(newStar)}var star = document.getElementsByClassName('star')// 给流星添加动画延时for (var i = 0, len = star.length; i < len; i++) {star[i].style.animationDelay = i % 6 == 0 ? '0s' : i * 0.8 + 's'}},randomDistance(max, min) {var distance = Math.floor(Math.random() * (max - min + 1) + min)return distance},}
</script>
<style scoped>
#stars {margin: 0 auto;max-width: 1600px;position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;
}.star {display: block;width: 1px;background: transparent;position: relative;opacity: 0;/*过渡动画*/animation: star-fall 2s linear infinite;-webkit-animation: star-fall 2s linear infinite;-moz-animation: star-fall 2s linear infinite;
}.star:after {content: '';display: block;border: 0px solid #fff;border-width: 0px 90px 2px 90px;border-color: transparent transparent transparent rgba(255, 255, 255, .5);box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);/*变形*/transform: rotate(-45deg) translate3d(1px, 3px, 0);-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);-moz-transform: rotate(-45deg) translate3d(1px, 3px, 0);transform-origin: 0% 100%;-webkit-transform-origin: 0% 100%;-moz-transform-origin: 0% 100%;
}@keyframes star-fall {0% {opacity: 0;transform: scale(0.5) translate3d(0, 0, 0);-webkit-transform: scale(0.5) translate3d(0, 0, 0);-moz-transform: scale(0.5) translate3d(0, 0, 0);}50% {opacity: 1;transform: translate3d(-200px, 200px, 0);-webkit-transform: translate3d(-200px, 200px, 0);-moz-transform: translate3d(-200px, 200px, 0);}100% {opacity: 0;transform: scale(1.2) translate3d(-300px, 300px, 0);-webkit-transform: scale(1.2) translate3d(-300px, 300px, 0);-moz-transform: scale(1.2) translate3d(-300px, 300px, 0);}
}</style>

以上就是php直播源码，css实现流星效果相关的代码，更多内容欢迎关注之后的文章

php直播源码，css实现流星效果相关推荐

php弹幕,PHP直播源码，实现简单弹幕效果
PHP 直播源码实现简单弹幕效果的相关代码 html> 大作业_弹幕 * { padding: 0; margin: 0; } body { font-family: 'Segoe UI', T ...
网页直播源码，JQuery实现轮播图方法
网页直播源码,JQuery实现轮播图方法 html <!DOCTYPE html> <html> <head lang="en"><met ...
在线直播源码直播全流程探索
在线直播源码直播全流程探索在线直播源码直播全流程探索生成阶段生成阶段包括对音视频的采集和处理: 音视频的采集,采集阶段主要是对原始视频内容进行采集即直播内容的来源,根据应用场景的差别,我们可以分 ...
java 直播_一对一直播源码开发过程中区分Java和PHP的重要性
开发一对一直播源码光有热情可是不够的,还需要对技术有点了解.除了懂点基本的后台操作外,得先明白一对一直播源码选择Java还是PHP?两者之中那个会更好.今天同创小编主要就是给大家介绍一下两者之间的区别 ...
r相机采集的图片转化为halcon识别的图像源码_直播系统开发：关于直播源码中美颜SDK的作用...
美颜.美型.滤镜等功能已经是拍照类APP的标配,直播系统开发中也更是离不开这些功能.拍照拍视频或者开启直播时,总希望能够加一些萌萌的兔耳朵,或者一些更复杂的3D人脸面具等特效.但是由于这类技术涉及人脸 ...
在线直播源码评论弹幕是如何“练”成的？
在线直播源码评论弹幕是如何"练"成的? 提起弹幕(dànmù),大家都会想到「视频弹幕」.视频弹幕是指网友们在观看视频的同时参与评论,即所谓"即时反馈", 评论 ...
一对一直播源码，实现一个简单的登录界面
一对一直播源码,实现一个简单的登录界面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
如何实现在线直播源码的美颜功能——接入美颜SDK
美颜是在线直播源码很重要的一部分功能,为了保证美颜质量并降低开发时间,在线直播源码会接入第三方美颜SDK,实现系统的美颜功能,接下来就介绍一下,在线直播源码是怎么接入美颜SDK的. SDK接入流程 1 ...
一对一直播源码开发，如何改善音视频通话过程中的用户体验？
在一对一直播源码开发中,由于是单个用户对话单个用户,所以对音视频通话质量的要求会比较高,那应该如何在开发时改善音视频通话中的用户体验呢? 一.选择播放模式在一对一直播源码中视频通话过程中出现马赛克或 ...

php直播源码，css实现流星效果

php直播源码，css实现流星效果相关推荐

最新文章

热门文章