ESTRUTURA UNIVERSAL PARA MÁSCARA selector{ position: absolute; mask: url('A URL DA MÁSCARA AQUI'); -webkit-mask: url('A URL DA MÁSCARA AQUI'); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-repeat: no-repeat; } EFEITO DE LUZ VERTICAL selector:before { content: ""; position: absolute; left: 0; width: 100%; height: 100%; top: 100%; z-index: 20; filter: blur(10px); background: linear-gradient(to bottom, #00ffd1 10%,transparent 70%); pointer-events: none; animation: LUZVERTICAL 5s linear infinite; } @keyframes LUZVERTICAL{ 0%{ top: 150%; opacity: 1; } 50%{ top: -100%; opacity: 1; } 100%{ top: -100%; opacity: 0; } } EFEITO DE LUZ LATERAL​ selector:before { content: ""; position: absolute; left: -100%; width: 80px; height: 100%; top: 0%; z-index: 20; background: linear-gradient(to right, transparent 1%, #00ff6f 40%,#00ff6f 60% , transparent 100%); pointer-events: none; animation: luzlateralesquerda 5s linear infinite; } selector:after { content: ""; position: absolute; right: 100%; width: 80px; height: 100%; top: 0%; z-index: 20; background: linear-gradient(to right, transparent 1%, #00ff6f 40%,#00ff6f 60% , transparent 100%); pointer-events: none; animation: luzlateraldireita 5s linear infinite; } @keyframes luzlateralesquerda{ 0%{ left:-5%; opacity:0; } 10%{ left:2%; opacity:1; } 90%{ left: 45%; } 100%{ left: 47%; opacity:0; } } @keyframes luzlateraldireita{ 0%{ right:-5%; opacity:0; } 10%{ right:2%; opacity:1; } 90%{ right: 45%; } 100%{ right: 47%; opacity:0; } } EFEITO DE LUZ FECHANDO​ selector:before { content: ""; position: absolute; left: 0; transform: scaleY(100%); width: 100%; height: 100%; top: 0; z-index: 20; filter: blur(0px); background: linear-gradient(to top, transparent 1%, #83a39e 50%, transparent 99%); transform-origin: CENTER; pointer-events: none; animation: LUZFECHANDO 5s linear infinite; } @keyframes LUZFECHANDO{ 0%{ transform: scaleY(100%); opacity: 0; } 10%{ transform: scaleY(100%); opacity: 1; } 50%{ transform: scaleY(80%); opacity: 1; } 70%{ transform: scaleY(80%); opacity: 1; } 100%{ transform: scaleY(0%); opacity: 0; } } EFEITO DE LUZ CIRCULAR AUMENTANDO​ selector:before { content: ""; position: absolute; left: 50%; transform: scaleY(100%); width: 400px; height: 400px; top: 50%; transform: translate(-50%,-50%); z-index: 20; filter: blur(20px); border-radius: 1000px; background: radial-gradient(#00ffd1 10%,transparent 40%, #00ffd1 100%); transform-origin: CENTER; pointer-events: none; animation: LUZCIRCULARAUMENTANDO 5s linear infinite; } @keyframes LUZCIRCULARAUMENTANDO{ 0%{ transform: translate(-50%,-50%) scale(0); } 50%{ transform: translate(-50%,-50%) scale(1); opacity: 1; } 90%{ transform: translate(-50%,-50%) scale(5); opacity: 1; } 100%{ transform: translate(-50%,-50%) scale(6); opacity: 0; } } EFEITO DE BORDA PARA MÁSCARA EM FOTO​ selector:before { position: absolute; content: ""; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 800px; height: 800px; background: conic-gradient(from 0deg at 50.12% 50%, transparent 0deg, #ccd3ff 60deg, transparent 60.1deg), conic-gradient(from 0deg at 50.12% 50%, transparent 190deg, #ccd3ff 250deg, transparent 250.1deg), transparent; animation: complete-line 30s linear infinite; } @keyframes complete-line { to { transform: translate(-50%,-50%) rotate(1turn); } }