设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › 炫酷悬停特效（可复制源代码）
返回列表 发新帖
查看: 8|回复: 0

炫酷悬停特效（可复制源代码）

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 昨天 21:35 | 显示全部楼层 |阅读模式
640.gif

源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       html,
  9.       body {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       body {
  14.         width: 100vw;
  15.         height: 100vh;
  16.         display: flex;
  17.         justify-content: center;
  18.         align-items: center;
  19.         background: #000;
  20.       }
  21.       .card {
  22.         position: relative;
  23.         width: 220px;
  24.         height: 320px;
  25.         background: mediumturquoise;
  26.         display: flex;
  27.         align-items: center;
  28.         justify-content: center;
  29.         font-size: 25px;
  30.         font-weight: bold;
  31.         border-radius: 15px;
  32.         cursor: pointer;
  33.       }

  35.       .card::before,
  36.       .card::after {
  37.         position: absolute;
  38.         content: "";
  39.         width: 20%;
  40.         height: 20%;
  41.         display: flex;
  42.         align-items: center;
  43.         justify-content: center;
  44.         font-size: 25px;
  45.         font-weight: bold;
  46.         background-color: lightblue;
  47.         transition: all 0.5s;
  48.       }

  50.       .card::before {
  51.         top: 0;
  52.         right: 0;
  53.         border-radius: 0 15px 0 100%;
  54.       }

  56.       .card::after {
  57.         bottom: 0;
  58.         left: 0;
  59.         border-radius: 0 100% 0 15px;
  60.       }

  62.       .card:hover::before,
  63.       .card:hover:after {
  64.         width: 100%;
  65.         height: 100%;
  66.         border-radius: 15px;
  67.         transition: all 0.5s;
  68.       }

  70.       .card:hover:after {
  71.         content: "HELLO";
  72.       }
  73. </style>
  74.   </head>
  75.   <body>
  76.     /* From Uiverse.io by eslam-hany */
  77.     <div class="card">HOVER</div>
  78.   </body>
  79. </html>
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表