selector{
overflow: hidden;
border-radius: 15px;
}
selector:after, selector:before{
content:" ";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
selector:after{
background: #1a1a1a;
width: calc(100% - 5px);
height: calc(100% - 5px);
border-radius: 15px;
}
selector:before{
background: #FFE195;
width: 200%;
height: 150px;
filter: blur(50px);
animation: borda-animada 5s linear infinite;
}
@keyframes borda-animada{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100%{
transform: translate(-50%, -50%) rotate(360deg);
}
}
selector:before {
border-bottom: 1px solid #2afea6;
border-top: 1px solid #2afea6;
content: "";
height: 100%;
left: 50%;
position: absolute;
top: 0;
transition: all 500ms;
width: 0;
}
selector:after {
border-left: 1px solid #2afea6;
border-right: 1px solid #2afea6;
content: "";
height: 0;
left: 0;
position: absolute;
top: 50%;
transition: all 500ms;
width: 100%;
}
selector:hover:before {
left: 0;
width: 100%;
}
selector:hover:after {
height: 100%;
top: 0;
}
selector{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.flare:nth-child(1){
border-left: 1px solid;
border-image: linear-gradient(to bottom, transparent 20%, #FFE195, transparent 80% ) 1;
}
.flare:nth-child(1)::after{
content:"";
background: linear-gradient(to bottom, transparent, #FFE195, transparent);
width: 6px;
height: 30%;
position: absolute;
top: 50%;
transform: translatey(-50%);
left: -3px;
border-radius: 50%;
filter: blur(2px);
mix-blend-mode: plus-lighter;
}
.flare:nth-child(1)::before{
content:"";
border: 1px solid;
border-image: linear-gradient(to bottom, transparent 20%, #FFE195, transparent 80%) 1;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0px;
border-radius: 50%;
mix-blend-mode: plus-lighter;
}
.flare:nth-child(2){
border-right: 1px solid;
border-image: linear-gradient(to bottom, transparent 20%, #FFE195, transparent 80% ) 1;
}
.flare:nth-child(2)::after{
content:"";
background: linear-gradient(to bottom, transparent, #FFE195, transparent);
width: 6px;
height: 30%;
position: absolute;
top: 50%;
transform: translatey(-50%);
right: -3px;
border-radius: 50%;
filter: blur(2px);
mix-blend-mode: plus-lighter;
}
.flare:nth-child(2)::before{
content:"";
border: 1px solid;
border-image: linear-gradient(to bottom, transparent 20%, #FFE195, transparent 80%) 1;
width: 1px;
height: 100%;
position: absolute;
top: 0;
right: 0px;
border-radius: 50%;
mix-blend-mode: plus-lighter;
}
<div class="flare"></div>
<div class="flare"></div>
selector{
padding: 1em;
border: 1px solid;
border-right: 0px;
border-image: linear-gradient(to right, #41A4FF, transparent) 1;
background: linear-gradient(to right, #41A4FF60, transparent);
}
selector::after{
content:"";
background: linear-gradient(to bottom, transparent, #41A4FF, transparent);
width: 6px;
height: 70%;
position: absolute;
top: 50%;
transform: translatey(-50%);
left: -4px;
border-radius: 50%;
filter: blur(2px);
mix-blend-mode: plus-lighter;
}
selector::before{
content:"";
border: 1px solid;
border-image: linear-gradient(to bottom, transparent, #41A4FF, transparent) 1;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0px;
border-radius: 50%;
mix-blend-mode: plus-lighter;
}
selector .elementor-widget-container::after{
content:"";
background: linear-gradient(to bottom, transparent, #41A4FF, transparent);
width: 6px;
height: 70%;
position: absolute;
top: 50%;
transform: translatey(-50%);
left: -3px;
border-radius: 50%;
filter: blur(2px);
mix-blend-mode: plus-lighter;
}
selector .elementor-widget-container::before{
content:"";
border: 1px solid;
border-image: linear-gradient(to bottom, transparent, #41A4FF, transparent) 1;
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 0px;
border-radius: 50%;
mix-blend-mode: plus-lighter;
}
selector{
border-radius: 16px;
}
selector:after, selector:before{
content:" ";
position: absolute;
/*left: 50%;*/
/*top: 100%;*/
/*transform: translate(-50%, -50%);*/
}
.rgb::after{
background: #1a1a1a;
width: calc(100%);
height: calc(100%);
border-radius: 16px;
}
.rgb::before {
background: linear-gradient(-140deg,
#d0a100 0%,
#d0a100 10%,
#d0a100 20%,
#d0a100 30%,
#d0a100 40%,
rgba(255, 221, 149, 0.24) 50%,
rgba(255, 221, 149, 0.24) 60%,
rgba(255, 221, 149, 0.24) 70%,
rgba(255, 221, 149, 0.24) 80%,
rgba(255, 221, 149, 0.24) 90%,
rgba(255, 221, 149, 0.24) 100% )
repeat 0% 0% / 300% 100%;
position: absolute;
/*inset: 8px;*/
border-radius: 16px;
filter: blur(13px);
transform: translateZ(-1px);
animation: rgb 6s linear infinite;
}
@keyframes rgb {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
selector{
border: 2px solid;
border-image: linear-gradient(180deg,#ff0000,#ffff00) 1;
}
selector{
position: relative;
}
selector::before{
content: "";
position: absolute;
inset: 0;
border-radius: 15px;
padding: 2px;
background:linear-gradient(180deg, rgba(2,224,203,1) 0%, rgba(0,0,0,1) 80%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
selector{
position: relative;
}
selector::before{
content: "";
position: absolute;
inset: 0;
border-radius: 15px;
padding: 2px;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #FFB411 50%, rgba(0,0,0,0) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
selector{
border-bottom-width: 2px;
border-bottom-style: solid;
border-image: linear-gradient(to right,#02070E,#f40031,#02070E) 1;
}
selector{
border: 1px solid;
border-image: linear-gradient(90deg,#F2298200, #F22982, #F2298200) 1;
border-left: 0px;
border-bottom: 0px;
border-right: 0px;
}
selector{
border-top: 1px solid;
border-image: linear-gradient(to right, #f22982, transparent) 1;
}
selector{
border-top: 1px solid;
border-image: linear-gradient(to left, #f22982, transparent) 1;
}
selector{
white-space: nowrap;
}
selector > .elementor-widget-container {
transition: all 0.7s;
}
<script>
function getRndInteger(minimum, maximum) {
return Math.floor(Math.random() * (maximum - minimum)) + minimum;
}
function updateNumber() {
var randomNumber = getRndInteger(480, 510);
var numberElement = document.getElementById("random_number");
var currentNumber = parseInt(numberElement.innerHTML);
// Define a duração da animação em milissegundos
var duration = 2000;
// Define o intervalo de atualização (quantas vezes por segundo a animação é atualizada)
var updateInterval = 50;
// Calcula o incremento gradual com base na duração e no intervalo de atualização
var increment = (randomNumber - currentNumber) * (updateInterval / duration);
// Função responsável por atualizar gradualmente o número
function animateNumber() {
// Incrementa o número atual
currentNumber += increment;
// Atualiza o número exibido na página
numberElement.innerHTML = Math.round(currentNumber);
// Verifica se a animação ainda não chegou ao número aleatório final
if (Math.abs(currentNumber - randomNumber) > Math.abs(increment)) {
// Se ainda não chegou, aguarda o próximo intervalo e continua a animação
setTimeout(animateNumber, updateInterval);
} else {
// Se chegou ao número aleatório final, define o número exato e encerra a animação
numberElement.innerHTML = randomNumber;
}
}
// Inicia a animação
animateNumber();
}
// Atualiza o número inicialmente
updateNumber();
// Atualiza o número a cada 2 segundos
setInterval(updateNumber, 6000);
</script>
<span id="random_number">497</span> pessoas estão vendo esse vídeo agora.
<script>
const getMarqueeNode = content => {
const el = document.createElement('div');
el.setAttribute('data-marquee-style', true);
el.textContent = content
return el;
}
class Marquee {
constructor(el){
this.el = el;
this.content = el.getAttribute('data-marquee')
this.render();
}
render(){
const shadow = getMarqueeNode(this.content);
shadow.setAttribute('data-marquee-shadow', true);
this.el.innerHTML = "";
this.el.appendChild(shadow);
const inView = this.calculateItemsInView(shadow);
const overflow = document.createElement('div');
overflow.setAttribute('data-marquee-overflow', true);
const content = document.createElement('div');
content.setAttribute('data-marquee-container', true);
overflow.appendChild(content);
const count = inView * 3;
for( var i = 0; i < count; i++) {
content.appendChild(getMarqueeNode(this.content))
}
this.el.appendChild(overflow);
}
calculateItemsInView(ref){
const [single, total] = [ref.clientWidth, ref.parentNode.clientWidth];
return Math.floor(total / single) + 1;
}
}
const nodes = document.querySelectorAll('[data-marquee]')
const arr = Array.from(nodes);
const refs = (arr || []).map( node => new Marquee(node) );
window.addEventListener( 'resize', () => refs.map( r => r.render() ) );
</script>
data-marquee|SEU TEXTO AQUI •
@-webkit-keyframes marquee {
100% {
transform: translateX(-100%);
}
}
@keyframes marquee {
100% {
transform: translateX(-100%);
}
}
[data-marquee] {
--loop-duration: 30s;
display: block;
}
[data-marquee] [data-marquee-shadow] {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
[data-marquee] [data-marquee-overflow] {
overflow: hidden;
transform: translate3d(0, 0, 0);
}
[data-marquee] [data-marquee-container] {
display: flex;
-webkit-animation: marquee var(--loop-duration) linear infinite;
animation: marquee var(--loop-duration) linear infinite;
}
[data-marquee] [data-marquee-style] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
[data-marquee-style] {
padding: 1em 0.3em;
display: flex;
color: #000000;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
}
selector .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho, pisca 1.5s infinite;
background-image: linear-gradient(45deg, #008400, #04d304, #008400, #04d304); /* troque as cores aqui, repetindo conforme indicado */
background-size: 400% 200%;
transition: all .8s;
z-index: 999;
box-shadow: 0px 0px 21px -6px #00B619; /*mude a cor aqui*/
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes pisca {
70% {
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
selector .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho, pisca 1.5s infinite;
background-image: linear-gradient(45deg, #51e951, #04d304, #51e951, #04d304); /* troque as cores aqui, repetindo conforme indicado */
background-size: 400% 200%;
transition: all .8s;
z-index: 999;
box-shadow: 0px 0px 21px -6px #00B619; /*mude a cor aqui*/
border-style: solid !important ;
border-width: 0px 5px 5px 0px !important ;
border-color: #23A206 !important ;
border-radius: 7px 7px 7px 7px !important
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes pisca {
70% {
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
selector .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho, pisca 1.5s infinite;
background-image: linear-gradient(45deg, #51e951, #04d304, #51e951, #04d304); /* troque as cores aqui, repetindo conforme indicado */
background-size: 400% 200%;
transition: all .8s;
z-index: 999;
box-shadow: 0px 0px 21px -6px #00B619; /*mude a cor aqui*/
border-style: solid !important ;
border-width: 0px 5px 5px 0px !important ;
border-color: #23A206 !important ;
border-radius: 7px 7px 7px 7px !important
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes pisca {
70% {
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
selector .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho, pisca 1.5s infinite;
background-image: linear-gradient(45deg, #51e951, #04d304, #51e951, #04d304); /* troque as cores aqui, repetindo conforme indicado */
background-size: 400% 200%;
transition: all .8s;
z-index: 999;
box-shadow: 0px 0px 21px -6px #00B619; /*mude a cor aqui*/
border-style: solid !important ;
border-width: 0px 5px 5px 0px !important ;
border-color: #23A206 !important ;
border-radius: 7px 7px 7px 7px !important
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes pisca {
70% {
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
selector .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho, pisca 1.5s infinite;
background-image: linear-gradient(45deg, #039916, #00C41A, #039916, #00C41A); /* troque as cores aqui, repetindo conforme indicado */
background-size: 400% 200%;
transition: all .8s;
z-index: 999;
box-shadow: 0px 0px 21px -6px #00FA21; /*mude a cor aqui*/
border-style: solid !important ;
border-width: 0px 0px 7px 0px !important ;
border-color: #036900 !important ;
border-radius: 7px 7px 7px 7px !important
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes pisca {
70% {
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
selector .elementor-button {
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho, pisca 1.5s infinite;
background-image: linear-gradient(45deg, #61CE70, #45ac53, #61CE70, #45ac53); /* troque as cores aqui, repetindo conforme indicado */
background-size: 400% 200%;
transition: all .8s;
z-index: 999;
box-shadow: 0px 0px 21px -6px #00B619; /*mude a cor aqui*/
border-style: solid !important ;
border-width: 0px 0px 6px 0px !important ;
border-color: #2c8a38 !important ;
border-radius: 7px 7px 7px 7px !important
}
@keyframes brilho {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
@keyframes pisca {
70% {
box-shadow: 0 0 0 25px rgba(0, 0, 0, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
.scroll-left{
opacity: 0;
transition: 0.5s all;
transform: translate3d(-30px, 0, 0);
}
.scroll-right{
opacity: 0;
transition: 0.5s all;
transform: translate3d(30px, 0, 0);
}
.scroll-bottom{
opacity: 0;
transition: 0.5s all;
transform: translate3d(0, 80px, 0);
}
.scroll-top{
opacity: 0;
transition: 0.5s all;
transform: translate3d(0, -80px, 0);
}
.ativo{
opacity: 1;
transition: 0.5s all;
transform: translate3d(0, 0, 0);
}
.scroll-left {
opacity:0;
transition:0.5s all;
transform:translate3d(-20px,0,0);
filter:blur(10px)
}
.scroll-right {
opacity:0;
transition:0.5s all;
transform:translate3d(20px,0,0);
filter:blur(10px)
}
.scroll-bottom {
opacity:0;
transition:0.5s all;
transform:translate3d(0,80px,0);
filter:blur(10px)
}
.scroll-top {
opacity:0;
transition:0.5s all;
transform:translate3d(0,-80px,0);
filter:blur(10px)
}
.ativo {
opacity:1;
transition:0.5s all;
transform:translate3d(0,0,0);
filter:blur(0)
}
.scroll-left {
opacity: 0;
transition: 1s all;
transform: translate(-30px, 0);
}
.scroll-right {
opacity: 0;
transition: 1s all;
transform: translate(30px, 0);
}
.scroll-bottom {
opacity: 0;
transition: 1s all;
transform: translate(0, 80px);
}
.ativo {
opacity: 1;
transition: 1s all;
transform: translate(0, 0);
}
.ativo.persona1 {
transition-delay: 0s;
}
.ativo.persona2 {
transition-delay: 0.3s;
}
.ativo.persona3 {
transition-delay: 0.6s;
}
@media(min-width: 1025px) and (max-width: 1366px) {
.ativo.persona1 {
transition-delay: 0s;
}
.ativo.persona2 {
transition-delay: 0s;
}
.ativo.persona3 {
transition-delay: 0s;
}
}
@media(max-width: 1024px) {
.ativo.persona1 {
transition-delay: 0s;
}
.ativo.persona2 {
transition-delay: 0s;
}
.ativo.persona3 {
transition-delay: 0s;
}
}
<script>
const elementos = document.querySelectorAll('.scroll-left, .scroll-right, .scroll-bottom, .scroll-top');
const posicaoScroll = window.innerHeight * 0.5;
function fadeScroll(){
elementos.forEach((elemento) => {
const elementoTop = elemento.getBoundingClientRect().top - posicaoScroll;
if(elementoTop < 120) {
elemento.classList.add('ativo');
}
else {
elemento.classList.remove('ativo');
}
})
}
window.addEventListener('scroll', fadeScroll);
</script>
.primeiro, .segundo, .terceiro {
opacity: 0;
filter: blur(10px);
transition: 1s;
}
.scroll-left {
opacity: 0;
filter: blur(10px);
transition: 0.8s all;
transform: translate(-30px, 0);
}
.scroll-right {
opacity: 0;
filter: blur(10px);
transition: 0.8s all;
transform: translate(30px, 0);
}
.scroll-bottom {
opacity: 0;
filter: blur(10px);
transition: 0.8s all;
transform: translate(0, 30px);
}
.scroll-top {
opacity: 0;
filter: blur(10px);
transition: 0.8s all;
transform: translate(0, -30px);
}
.ativo {
opacity: 1;
filter: blur(0px);
transition: 0.8s all;
transform: translate(0, 0);
}
selector {
position: relative;
}
selector::before {
content: '';
position: absolute;
top: 70px;
left: 0;
width: 45%;
height: 195px;
border-radius: 0px 60px 60px 0px;
background-color: #FFCC00;
}
@media (max-width: 600px)
{
selector::before {
content: '';
position: absolute;
top: 70px;
left: 0;
width: 65%;
height: 195px;
border-radius: 0px 60px 60px 0px;
background-color: #FFCC00;
}
selector {
background-image: repeating-linear-gradient(0deg, #00AC00, #00AC00 10px, transparent 10px, transparent 20px, #00AC00 20px), repeating-linear-gradient(90deg, #00AC00, #00AC00 10px, transparent 10px, transparent 20px, #00AC00 20px), repeating-linear-gradient(180deg, #00AC00, #00AC00 10px, transparent 10px, transparent 20px, #00AC00 20px), repeating-linear-gradient(270deg, #00AC00, #00AC00 10px, transparent 10px, transparent 20px, #00AC00 20px);
background-size: 2px calc(100% + 20px), calc(100% + 20px) 2px, 2px calc(100% + 20px) , calc(100% + 20px) 2px;
background-position: 0 0, 0 0, 100% 0, 0 100%;
background-repeat: no-repeat;
animation: borderAnimation 0.6s infinite linear;
}
@keyframes borderAnimation {
from { background-position: 0 0, -20px 0, 100% -20px, 0 100%; }
to { background-position: 0 -20px, 0 0, 100% 0, -20px 100%; }
}
/*alterar cor da selecao*/
*::selection {
color: #ffffff;
background: #ff2982;
}
/*personalizar barra de rolagem*/
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background: #15111E;
}
body::-webkit-scrollbar-thumb {
background-color: #f22982;
border-radius: 10px;
border: 2px solid #15111e;
}
<script type="text/javascript">
// Função para verificar se estamos no modo de edição no Elementor
function isInElementorEditMode() {
return !!document.querySelector('.elementor-editor-active');
}
// Executar o redirecionamento após o atraso (5 segundos) somente se não estiver no modo de edição do Elementor
if (!isInElementorEditMode()) {
setTimeout(function(){
window.location = "LINK AQUI";
}, 5000); // 5000 = 5 seconds
}
</script>
body, html { overflow-x:hidden; }
.degrade1{
background: #9E00CA;
background: -webkit-linear-gradient(to right, #9E00CA 0%, #FF00B1 100%);
background: -moz-linear-gradient(to right, #9E00CA 0%, #FF00B1 100%);
background: linear-gradient(to right, #9E00CA 0%, #FF00B1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<link rel="icon" type="image/png" href="/wp-content/uploads/2022/01/flavicon2.png"/>
<div id="vid_64dffeae5d4157000942b2aa" style="position:relative;width:100%;padding: 56.25% 0 0;"><img decoding="async" id="thumb_64dffeae5d4157000942b2aa" src="https://images.converteai.net/14df6edc-a99f-4c17-a5b5-77bac6c23ae2/players/64dffeae5d4157000942b2aa/thumbnail.jpg" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;"><div id="backdrop_64dffeae5d4157000942b2aa" style="position:absolute;top:0;width:100%;height:100%;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);"></div></div><script type="text/javascript" id="scr_64dffeae5d4157000942b2aa">var s=document.createElement("script");s.src="https://scripts.converteai.net/14df6edc-a99f-4c17-a5b5-77bac6c23ae2/players/64dffeae5d4157000942b2aa/player.js",s.async=!0,document.head.appendChild(s);</script>
selector #fora{
animation: spin 6s linear infinite;
transform-origin: center;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}