关于CSS的几种字体悬浮的设置方法

关于CSS的几种字体悬浮的设置方法

  • 1. 鼠标放上动态的
  • 2. 静态的(位置看上悬浮)
    • 2.1 参考QQ邮箱
    • 2.2 参考知乎

1. 鼠标放上动态的

  • 效果如下:
    关于CSS的几种字体悬浮的设置方法_第1张图片

  • 代码如下:

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <style>
    
            table{
                background-color: cadetblue;
                height: 150px;
                width: 300px;
            }
            th,td{
                border: 1px solid;
                text-align: center;
            }
    
    
            .test{
                position: relative;
            }
    
            .test:before{
                content: "1314"; /*如果不给数据就是清空伪元素内容*/
                position: absolute; /*设置为绝对定位*/
                opacity: 0; /*初始透明度为0 ,注意:如果是非0就会一直悬浮,如果是0的话,鼠标放上去悬浮*/
                background-color: rebeccapurple; /*设置背景颜色*/
                color: #d5d5e1; /*设置文字颜色*/
                transform: translateY(-10px); /*向上移动10像素*/
                transition: all 0.2s ease-in-out; /*设置过渡效果*/
    
                padding: 10px; /*设置内边距*/
                top: -50%; /*将其移出父容器*/
                /* left: 0; 在左侧 */
                right: -25px; /*在右侧*/
                /* width: 100%; 与父容器同宽 */
                width: 20px;
                height: 10px;
    
            }
            .test:hover:before{
                opacity: 10; /*鼠标悬浮时透明度为1*/
                transform: translateY(0); /*移动位置为0*/
            }
    
        style>
    head>
    <body>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>姓名th>
                    <th>年龄th>
                    <th>性别th>
                    <th>粉丝th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>
                        <div>
                            小李
                        div>
                    td>
                    <td>20td>
                    <td>td>
                    <td>
                        天津粉丝
                        <span class="test">span>
                    td>
                tr>
                <tr>
                    <td>
                        <div>
                            小李
                        div>
                    td>
                    <td>28td>
                    <td>td>
                    <td>全国粉丝td>
                tr>
                <tr>
                    <td>小赵td>
                    <td>31td>
                    <td>td>
                    <td>北京粉丝td>
                tr>
    
            tbody>
        table>
    
    body>
    html>
    
  • 参考地址:
    css如何设置悬浮文字.

  • 备注:这个用法有点像掘金上的,可以参考一下掘金上的,如下:
    关于CSS的几种字体悬浮的设置方法_第2张图片

2. 静态的(位置看上悬浮)

  • 是的,接下来就是告诉你对于小白前端怎么扒各大网站上的样式代码,一起看吧……

2.1 参考QQ邮箱

  • 首先,先登录自己的QQ邮箱看效果:
    关于CSS的几种字体悬浮的设置方法_第3张图片
    关于CSS的几种字体悬浮的设置方法_第4张图片
    这个点是图片,没有也没关系,借鉴的是实现方式!

  • 下面实现的效果有点丑,不过也算是位置悬浮了吧,效果如下:
    关于CSS的几种字体悬浮的设置方法_第5张图片

  • 核心代码如下:

      ```html
      .my_hover_number {
          width: 40px;
          height: 20px;
          display: inline-block;
          /* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */
          background-color: blueviolet;
          margin-left: 1px;
          vertical-align: top;
          position: relative;
          top: -10px;
      }
      ```
    
  • 整个网页代码如下:

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <style>
    
            table{
                background-color: cadetblue;
                height: 150px;
                width: 300px;
            }
            th,td{
                border: 1px solid;
                text-align: center;
            }
    
            .my_hover_number {
                width: 40px;
                height: 20px;
                display: inline-block;
                /* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */
                background-color: blueviolet;
                margin-left: 1px;
                vertical-align: top;
                position: relative;
                top: -10px;
            }
    
        style>
    head>
    <body>
        <table cellspacing="0">
            <thead>
                <tr>
                    <th>姓名th>
                    <th>年龄th>
                    <th>性别th>
                    <th>粉丝th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>
                        <div>
                            小李
                        div>
                    td>
                    <td>20td>
                    <td>td>
                    <td>
                        天津粉丝
                        <span class="my_hover_number">350span>
                    td>
                tr>
                <tr>
                    <td>
                        <div>
                            小李
                        div>
                    td>
                    <td>28td>
                    <td>td>
                    <td>全国粉丝td>
                tr>
                <tr>
                    <td>小赵td>
                    <td>31td>
                    <td>td>
                    <td>北京粉丝td>
                tr>
    
            tbody>
        table>
    
    body>
    html>
    

2.2 参考知乎

  • 首先,先登录自己的知识账号,看知乎网站的效果:
    关于CSS的几种字体悬浮的设置方法_第6张图片

  • 复制过来代码看自己的效果(只复制99+的样式):
    关于CSS的几种字体悬浮的设置方法_第7张图片

  • 代码如下:

    • 核心样式代码:
      .jiu_jiu{
          box-sizing: border-box;
          margin: 0px;
          min-width: 0px;
          color: rgb(255, 255, 255);
          background-color: rgb(241, 64, 60);
          padding-left: 4px;
          padding-right: 4px;
          position: relative;
          /* bottom: 65%; */
          /* left: 42%; */
          top: -60%;
          width: 30%;
          left: 70%;
          font-size: 11px;
          border-radius: 20px;
          border: 2px solid rgb(255, 255, 255);
          transform: scale(0.8);
      }
      
    • 整个页面代码:
      DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Documenttitle>
          <style>
      
              table{
                  background-color: cadetblue;
                  height: 150px;
                  width: 300px;
              }
              th,td{
                  border: 1px solid;
                  text-align: center;
              }
      
              .my_hover_number {
                  width: 40px;
                  height: 20px;
                  display: inline-block;
                  /* background: url(/zh_CN/htmledition/images/newicon/mail4788ca.png) -112px -192px no-repeat; */
                  background-color: blueviolet;
                  margin-left: 1px;
                  vertical-align: top;
                  position: relative;
                  top: -10px;
              }
      
              .jiu_jiu{
                  box-sizing: border-box;
                  margin: 0px;
                  min-width: 0px;
                  color: rgb(255, 255, 255);
                  background-color: rgb(241, 64, 60);
                  padding-left: 4px;
                  padding-right: 4px;
                  position: relative;
                  /* bottom: 65%; */
                  /* left: 42%; */
                  top: -60%;
                  width: 30%;
                  left: 70%;
                  font-size: 11px;
                  border-radius: 20px;
                  border: 2px solid rgb(255, 255, 255);
                  transform: scale(0.8);
              }
      
          style>
      head>
      <body>
          <table cellspacing="0">
              <thead>
                  <tr>
                      <th>姓名th>
                      <th>年龄th>
                      <th>性别th>
                      <th>粉丝th>
                  tr>
              thead>
              <tbody>
                  <tr>
                      <td>
                          <div>
                              小李
                          div>
                      td>
                      <td>20td>
                      <td>td>
                      <td>
                          天津粉丝
                          <span class="my_hover_number">350span>
                      td>
                  tr>
                  <tr>
                      <td>
                          <div>
                              小李
                          div>
                      td>
                      <td>28td>
                      <td>td>
                      <td>
                          全国粉丝
                          <div class="jiu_jiu">999+div>
                      td>
                  tr>
                  <tr>
                      <td>小赵td>
                      <td>31td>
                      <td>td>
                      <td>北京粉丝td>
                  tr>
      
              tbody>
          table>
      
      body>
      html>
      
  • 好了就这样吧,方式都差不多,多看看别的网站而已!

你可能感兴趣的:(JS,ES6,NodeJs等,css,前端)