ror体育_ror体育app_ror体育官网 090-374918853

纯CSS3制作音乐舞台特效

作者:ror体育官网 时间:2021-09-02 01:05
本文摘要:今天给大家带来的是CSS3制作的音乐舞台特效,整个动画仅需一张静态图片即可实现高逼格的效果。这个动画效果实现起来有一点点难度,同时由于CSS的限制,舞台灯光效果没有起作用,看上去没有想象中酷炫。建议大家制作这种灯光效果的动画,只管使用canvas,CSS3有点力有未逮。

ror体育官网

今天给大家带来的是CSS3制作的音乐舞台特效,整个动画仅需一张静态图片即可实现高逼格的效果。这个动画效果实现起来有一点点难度,同时由于CSS的限制,舞台灯光效果没有起作用,看上去没有想象中酷炫。建议大家制作这种灯光效果的动画,只管使用canvas,CSS3有点力有未逮。

前端代码<div id="effect-background"> <div class="bg"> <img src="http://cdn.zhangyangjun.com/1824bd71-46a2-4d05-9800-6127cb6ad070.jpg"/> </div> <div class="mask"></div></div>Q-q-u-n: 784783012 分享学习的方法和需要注意的小细节#effect-background { position: relative; margin: auto; margin-top: 40px; width: 450px; height: 300px; overflow: hidden;}#effect-background > .bg { position: absolute; display: block; left: 0; top: 0; margin: auto; width: 1200px; animation: moveX 20s linear 0s infinite alternate; -webkit-animation: moveX 20s linear 0s infinite alternate;}#effect-background > .bg img { position: absolute; left: 0; top: 0; width: 100%; animation: moveY 10s linear 2s infinite alternate; -webkit-animation: moveY 10s linear 2s infinite alternate;}#effect-background > .mask { position: absolute; display: block; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: radial-gradient( circle at 200px 120px, transparent 18%, rgba(0, 0, 0, 0.6) 26% ) no-repeat; background-size: 100% 100%;}@keyframes moveX { from { left: 0; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } to { left: 450px; transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); }}@keyframes moveY { from { top: 0; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } to { top: 300px; transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); }}Q-q-u-n: 784783012 分享学习的方法和需要注意的小细节知识点提炼动画大图的移动使用了两组CSS3动画,两组动画错开可以让动画移动轨迹越发富厚。同时,你会发现这两组动画划分赋予了两个元素去实现,那为什么不在同一个元素上应用两组动画呢?如果你经常接触transform应该知道,其中的矩阵变化属性经常会发生冲突,这里也不破例,所以当两组动画同时用到transform时,要将他们离开。舞台的灯光效果是一个制作难点,要让灯光照穿玄色遮罩,这在CSS3中没有什么特别完美的解决方案。

实验了clip-path和mask-image都没有效果,最终还是使用了圆形渐变去完成,圆形渐变还能实现光晕效果,一石二鸟。在chrome等现代浏览器中,带渐变的配景无法应用animation属性(用了也没效果),这导致整个动画的灯光只能打在一个地方(强行变换位置效果很生硬)。总的来说,效果是实现了,但还不够完美,下次可以实验canvas或svg动画解决灯光的移动问题。


本文关键词:纯,CSS3,制作,音乐,舞台,特效,今天,给,大家,ror体育app

本文来源:ror体育-www.hnqiaodan.com