Cursor animado CSS
Exemplo 1
Para criar o cursor animado, estamos usando HTML, CSS e JavaScript neste código. Primeiro, devemos fazer o arquivo html no código do Visual Studio. Você pode usar qualquer editor de sua escolha. Aqui, estamos usando o código do Visual Studio. Selecionamos o idioma para o código HTML como "html". E então escreva o código aqui. Também fornecemos o código para o cursor animado neste exemplo. Você pode usar este código para fazer o cursor animado. Agora, comece com o código HTML.
Criamos a classe "Div" "Cursor" e uma classe "Seção" chamada "Main" dentro do "div". Em seguida, criamos o seguinte cabeçalho, nossa cabeçada 1, e fechamos a tag "seção" aqui. Em seguida, estamos usando "javascript" neste arquivo "html". Usamos a tag "Script" e, em seu tipo, damos o nome do "JavaScript", que é "Texto/JavaScript". Com isso, definimos o cursor “const” e usamos a “consulta. seletor ”. A pergunta. Seletor ”é usado para retornar o elemento,“ documento ”, que corresponderá ao seletor, e esse seletor é“ cursor ”.
Agora, estamos usando "var" e chamou "Timeout". Então vem o método "addEventlisner". Ele anexará um manipulador de eventos ao elemento que especificamos aqui. O evento aqui é o "mousemove", que se liga ao elemento "documento". Estamos usando "Let" para declarar uma variável "x" e inicializá -la com "e.PageX ”. A propriedade "PageX" retornará o eixo horizontal do cursor quando o evento do cursor for acionado. E a variável "y" com o mesmo tipo de dados "Let", inicialize este "y" com "e.Página ”. A propriedade "Pagey" retornará o eixo vertical do cursor quando o evento do cursor for acionado. Além disso, defina o “cursor. estilo "para" top "," esquerda "e" exibição ".
Depois disso, usamos o "função mousestopped"; portanto, quando essa função chama, ele exibirá "nenhum". Em seguida, estamos usando a função "Clear Timeout" e passamos o "Timeout" como um parâmetro e definimos esse "tempo limite" abaixo. Utilizamos novamente "addEvenetlisner" e fechamos a tag "script" aqui. Estes são tudo sobre "htmlhtml" e "javascript". Agora, vamos usar o CSS para estilo.
Código CSS
No CSS, importamos o "URL" e usamos o seletor "*", que é usado para selecionar todos os elementos. Definimos a “margem” e “preenchimento” dentro do seletor “*” para “0”. O "dimensionamento de caixas" que definimos aqui é "caixa de fronteira", que é usada para especificar o comportamento da "largura" e "altura" e selecionar a "família da fonte". Em seguida, usamos "corpo" e definimos a altura como "100VH". O "fundo" é "preto" e define o "cursor" para "nenhum".
Agora, estamos estilizando o "principal" e sua altura é definida como "100VH". Estamos usando a tela "Flex" e "Justify-Content" para o "centro", também "alinhado" ao "centro". Aplique a cor "branca" ao "H1" e use o "0.Valor alfa de 8 ”para isso. Definimos o "tamanho da fonte" deste caminho para "65px". Agora, defina o "Z-Index" do "cursor" como "999". A "posição" para isso é "fixa" e definida como o "fundo". A "largura" e "altura" são "20px", e o "radiato de fronteira" é "50%". O "evento ponteiro" é "nenhum". A “Shadow Box” adicionará uma ou mais sombras ao redor da estrutura dos elementos. Definimos o "H-Offset", que é o deslocamento horizontal, para "0", e o "V-Offset", que é o deslocamento vertical, para "0", e o "Blur" é "20px" e " azul". O mesmo “deslocamento H” e “V-Offset” estão nas próximas duas linhas, mas o valor “Blur” muda em cada um como “60px” e “100px”.
Usamos a animação para a propriedade "5s" e a propriedade "Transform: Tradle" aqui. Além disso, defina sua "exibição" como "nenhum". Agora, os quadros -chave são usados para a animação. Além disso, estamos usando o seletor "antes" aqui e definindo o "conteúdo" antes disso. Defina a “posição” como “absoluta” e “fundo” como “azul”. A "largura" e "altura" é "50px". A "opacidade" que usamos é "0.2 "e a propriedade" Transform-Translate "está aqui. O "Radio da fronteira" é "50%".
Saída
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/cursor_animation_on_mousemove_mouseout_mousestopped_profile_1.MP400: 0000: 0000: 09Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.Exemplo # 2
Neste exemplo, criamos o arquivo JavaScript externo e vinculamos este arquivo ao nosso arquivo HTML e vinculamos o arquivo CSS.
Criamos uma classe "principal" chamada "BG_CANVAS" dentro disso. Temos uma classe “div” “cabeçalho”. Criamos o título neste "div". O outro nome da div é "cursor" e, após o segundo "div", fechamos o "principal" e vinculamos o arquivo JavaScript aqui. Colocamos o nome do arquivo JavaScript, “AnimatedMouse.JS ", e fechou a tag" Script ".
Código CSS
Definimos a "raiz", que seleciona os elementos raiz no HTML e define a cor "preta", a cor "azul" e a cor "branca" em "RGB", e "verde" em "RGB". Em seguida, usamos o seletor "*", que seleciona todos os elementos, e fazemos algum estilo aqui, que se aplicará a todos os "elementos". Acabamos de definir "margem" e "estofamento" aqui para "0".
Então, estilizamos o "cabeçalho". A "largura" e "altura" do cabeçalho é "100%" e "300px", respectivamente. O "dimensionamento da caixa" é "caixa de fronteira" e a "tela" é "flexível". Nós "justificamos o conteúdo" e "alinhamento" no "centro". Também estilizamos o "cursor" e definimos a "largura" e "altura" como "20px" cada. Também definimos a “borda” como “10px” da largura do tipo “sólido” e definimos a cor da borda. A "duração da transição" que usamos é "200ms". Usamos “animação” e animamos o cursor para “550s”. Em seguida, usamos o seletor "depois" com o "cursor" e definimos o conteúdo. Também definimos "largura" e "altura" como "40px", "borda" como "15px" no tipo "sólido", "radiato de fronteira" como "50%" e "absoluto" na "posição". O "Top" e "Esquerda" são definidos como "-25px" para cada um e depois usam a propriedade "Animação". Agora vem o "cabeçalho" e o estilo. Definimos sua “família de fontes” e o “peso” desta fonte é “300”. Nós o alinhamos no "centro", e "tamanho da fonte" é "60px". A “cor” é “preta” para a fonte. Agora, vamos estilizar "BG_CANVAS", que é o nome da classe "Main". Sua "largura" é "100%" e "altura" é "100VH" e define sua "cor de fundo" e "dimensionamento de caixa".
Depois disso, usamos "cursor-expand" e a propriedade "Animação". Também definimos a "fronteira" para isso. Em seguida, usamos o seletor "depois" com este "cursor-expand" e definimos sua "fronteira". Em seguida, estamos usando os "quadros -chave" aqui, que usamos para animação, e usamos a escala de transformação "de" de "(1)" para "a escala de transformação (1.5) e o mesmo nas seguintes linhas:
Código JavaScript
Na imagem a seguir, este é o código JavaScript. E esse código é o mesmo que o código JavaScript anterior, que explicamos em nosso primeiro exemplo. Salvamos o arquivo JavaScript com o “.Extensão do arquivo JS ”e deve vincular este arquivo ao nosso arquivo HTML.
Saída
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/Cursor de animação em CSS-Profile-1-Microsoft_-Edge-2022-06-03-11-07-03.MP400: 0000: 0000: 09Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.Conclusão
Neste guia, discutimos o cursor animado no CSS. Escrevemos este artigo para explicar como fazer do seu cursor um cursor animado usando CSS. Usamos propriedades diferentes no CSS e usamos o código HTML e JavaScript e vinculamos esses arquivos para fazer o cursor animado. Exploramos dois exemplos diferentes para fazer o cursor animado de diferentes estilos. Espero que, depois de ler este artigo, você faça o cursor animado em seus sites para tornar seu site mais atraente.