好看的hover效果

最新推荐文章于 2024-04-19 15:57:51 发布

Adger@

最新推荐文章于 2024-04-19 15:57:51 发布

阅读量1.6k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_45004361/article/details/108068347

版权

hover.css简介

官网介绍：一组由CSS3驱动的悬停效果，应用于链接、按钮、徽标、SVG、特色图像等。很容易应用到你自己的元素，修改或只是使用灵感。可在CSS, Sass，和更少。简单来说：就是省去编写一些hover的效果，不用自己写动画帧

详细用法前看官网

https://ianlunn.github.io/Hover/

Demo演示

比如要做这种效果
在这里插入图片描述
找到官网

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hover.cssDemo演示</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <!-- 上面是BootStarp框架的 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css" rel="stylesheet">
  <style>
    .logo {
    
      font-size: 20px;
      background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-background-size: 200% 100%;
      -webkit-animation: masked-animation 1s infinite linear;
    }

    @-webkit-keyframes masked-animation {
    
      0%

最低0.47元/天解锁文章

Adger@

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
好看的hover效果

hover.css简介官网介绍：一组由CSS3驱动的悬停效果，应用于链接、按钮、徽标、SVG、特色图像等。很容易应用到你自己的元素，修改或只是使用灵感。可在CSS, Sass，和更少。简单来说：就是省去编写一些hover的效果，不用自己写动画帧详细用法前看官网https://ianlunn.github.io/Hover/Demo演示比如要做这种效果找到官网<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫