css动画实现炫酷的hover效果

最新推荐文章于 2024-03-30 18:20:23 发布

才不是小弱鸡

最新推荐文章于 2024-03-30 18:20:23 发布

阅读量1.4k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_40996739/article/details/106750682

版权

本文记录了从B站看到的一个优秀的hover动画效果，并通过HTML+JS和CSS进行了复现，详细介绍了实现过程。

摘要由CSDN通过智能技术生成

0x00 前言

今日在b站上看到一个hover动画效果，感觉写的非常好，所以复刻了一个

0x01 HTML+JS

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Log-in</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">

  <meta name="theme-color" content="#fafafa">
</head>

<body>
  <!--[if IE]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
  <![endif]-->
  <!-- Add your site or application content here -->
    <img src="img/timg.gif" class="mouse-img">
    <div class="container">
      <h1>Sup</h1>
      <form action="">
        <input class=