精华内容
下载资源
问答
  • html实现鼠标悬停效果实现

    千次阅读 2020-11-18 17:38:50
    html实现鼠标悬停效果实现 css写法: a.hand:hover {cursor:hand} style=“cursor:wait” cursor其他取值 复制代码 1 auto :标准光标 2 default :标准箭头 3 hand :手形光标 4 wait :等待光标 5 text :I形

    css写法:

    a.hand:hover   {cursor:Pointer}  
    style="cursor:wait"
    

    cursor其他取值

      auto        		:标准光标   
      default     		:标准箭头   
      Pointer      		:手形光标   
      wait         		:等待光标   
      text         		:I形光标   
      vertical-text 	:水平I形光标   
      no-drop           :不可拖动光标   
      not-allowed       :无效光标   
      help              :?帮助光标   
      all-scroll        :三角方向标   
      move              :移动标   
      crosshair         :十字标   
      e-resize   
      n-resize   
      nw-resize   
      w-resize   
      s-resize   
      se-resize   
      sw-resize   
    
    
    展开全文
  • 很酷的六种CSS 鼠标经过图片效果(含HTML文件),免费下载地址:http://www.ui3g.com/design/uiweb-466.html
  • ![图片说明](https://img-ask.csdn.net/upload/201604/07/1460014856_882837.jpg...由这个图片鼠标悬停后变成![图片说明](https://img-ask.csdn.net/upload/201604/07/1460014970_89461.jpg)大概就是这样,求大神帮忙!
  • HTML鼠标滑过特效教程

    万次阅读 2017-02-06 15:54:33
    时下,各种个性化展示... 本文将给大家介绍一类简约而不简单的鼠标滑过按钮特效,既能让个人网站充分展示个性,也能为效果相对单调的门户类网站增色不少。  首先我们来看一下,其中一种特效效果图。  本

    时下,各种个性化展示网站都会通过鼠标特效增强与用户之间的交互,使得网站更加生动,仿佛懂得跟用户谈话一样。就连展示模式相对古板的信息类网站或者门户网站也抵挡不住诱惑,悄悄地加入了一些按钮互动的效果。

      本文将给大家介绍一类简约而不简单的鼠标滑过按钮特效,既能让个人网站充分展示个性,也能为效果相对单调的门户类网站增色不少。

      首先我们来看一下,其中一种特效效果图

    制作鼠标经过按钮特效CSS3教程_css3教程_特效_css3代码_课课家

      本例一共展示了13个动画效果,按钮的基本样式相近,均为标签居中的矩形按钮,背景均为无色透明,边框粗细一致,鼠标移到按钮上,标签颜色变浅,背景通过缓动擦除过渡为边框的初始颜色。因此我们可以先制作一套统一的样式,然后再为各个按钮扩展出不同的效果。

      在开始之前,我们先来分析下这类按钮的层级结构,自上而下分别是标签,动画背景和固定的线框,如下图所示。

    按钮层级结构图

      忽略动画的部分,它可以是一个带边框的div+居中对齐的文字。

      动画部分跟标签文字重叠,所以一般使用绝对定位套入其中。此时要把上面提到的div改为相对定位,否则无法对齐到边框的左上角。

      案例演示的13种动画效果均为这种结构,为了让中间的动画部分可以重复使用,我们希望可以通过引用同一段代码来节省字节数。实现的方法有很多,比如通过js插入节点。但作为css教程,小编更倾向于利用CSS样式直接实现。具备这种插入功能的,是CSS的伪元素before和after,具体使用哪个,视实际效果而定。

      用了伪元素来插入,按钮就剩下一个带边框的层了,所以我们可以再简化一点,利用链接来实现这款按钮,基础的html代码如下。

    按钮的基础html代码

      默认效果如下图所示,链接带下划线,非常不美观,而且没有边距,对按钮来说不太合适。

    初始按钮效果

      所以我们为链接样式设置以下两项属性,第一项代表去除文本修饰(比如下划线),第二项通过设置行高来实现垂直边距的调整。至于水平边距,我们稍候再实现。

    设置链接样式代码

      接下来我们设置btn-0的样式,为了让后续添加的btn-1,btn-2,...,btn-x都能共用,此处我们利用CSS的属性选择器来实现(想了解更多关于属性选择器的朋友可以到W3CSchool进行深入学习)。 

    实现共用的代码

      [class^="btn-"]代表所有class以btn-为开头的元素,所以上面的btn-0将会应用以上的所有样式,它将链接设置为块状,为的是让它的行为更像一个真正的按钮,接着设置按钮宽高,换一下字体,让文字居中对齐,并加上1像素的边框。最后设置相对定位,其原因前面已经解释,此处不再重复。

      完整代码如下:

    设置按钮属性格式代码

      再次运行,效果如下图所示。

    设置按钮属性格式后效果图

      你可能会发现这种边框并不通用,因为在效果演示里面,边框颜色始终跟文字颜色保持一致,所幸CSS支持一些变量型的值,比如颜色可以用currentColor动态获取:

    动态获取颜色代码

      再次运行,效果如下图所示,边框颜色跟文字颜色同步了。

    边框跟文字颜色同步效果图

      接着我们用刚才的紫色换掉这个难看的纯蓝。因为边框已经跟文字颜色同步,所以我们改下元素的color属性即可。

    修改元素的的color属性代码

      注意该颜色只应用于当前按钮上,所以我们把color定义到了btn-0选择器中。

      再次运行,效果如下图所示。按钮变紫色了。

    按钮变紫色效果

      接下来就到本教程的重头戏——伪元素了。由于每个按钮的擦除特效不完全一致,所以我们还是先为btn定义伪元素before。

    定义伪元素before代码

      红色部分的样式表示在btn-0元素的前面插入一个占满整个btn-0的色块,其背景色是一种较文字颜色深一点点的紫色。

      占满的一般写法:left和top都等于0,width和height都等于100%,position等于absolute。

      再次运行,效果如下图所示,文字直接被色块挡住了。

    文字被色块遮挡

      可能是文字颜色跟背景色太接近了?我们可以试着把btn-0的color改成白色(#fff),但效果依然没有发生太大变化,只是边框略微缩小了一点(跟白色背景没对比了所以看起来像是没掉了外层边框)。

      所以根本原因是色块确实直接叠放在了文字上面,为此我们可以通过调整z-index修复这一问题。

    修复色块位置代码

      再次运行,效果如下图所示,这下文字恢复过来了。

    位置恢复后效果图

      这是鼠标移到按钮时的效果,所以我们把色块和文字颜色的设置到hover上,并恢复正常状态下的颜色,同时去掉背景的色块。

    鼠标滑过后恢复常态的代码

      注意到这次的调整并没有把正常状态下的before伪元素彻底删掉,而是通过将width设置为0%来进行隐藏。因为我们稍候要通过CSS3的动画进行过渡,所以必须要让这个伪元素在一开始的时候就存在,而不能无中生有导致过渡效果突兀。

      补充一个小小的细节,鼠标滑过按钮的时候,我们用的不是纯白色,而是色调跟按钮背景接近的淡紫色,从而提升文字跟背景的融合度。

      再次运行,效果如下图所示。

    常态下效果

      鼠标滑过按钮,效果将发生如下图所示的变化。

      鼠标滑过时效果

      最后就是实现过渡了,两个状态的平滑过渡可通过transition属性来实现。

      要过渡的包括按钮边框,按钮文字和before伪元素(背景色块),所以代码调整如下:

    过渡代码

      其中,4个不同前缀的transition用于兼容不同的浏览器。

      此外,其它按钮样式可能会根据需要使用after伪元素,所以笔者特地加入了对after伪元素的样式定义。

      再次运行,鼠标移到按钮上,即可观察到动画效果了,如下图所示。

    过渡代码效果

      类似地,我们还可以实现从右到左或者垂直方向的擦除效果。相信通过本教程的学习,调整出这些效果都是轻而易举的事了。

      如果想斜着擦除,那对于矩形结构的网页元素来说,实现起来有点困难,所幸的是CSS3引入了transform属性使矩形支持旋转,比如我们给btn-0:before样式追加一项:

      transform:rotate(135deg);

      那么矩形块就会旋转135度了,如下图所示。

    斜擦除效果图

      色块越界了,不过这完全不是问题,因为越界早在CSS1时代就有方法解决,用overflow:hidden就能把多余的部分给裁剪掉。

      我们为btn通用的样式(属性选择器)追加这个定义,代码如下。

    裁剪越界色块

      再次运行,效果如下图所示。

    裁剪越界色块后效果图

      在这个基础上,把宽高的比例调整到大于100%的某个数值,就可以让这个斜着擦除的色块填满整个按钮的背景了,而且在此基础上,我们还可以充分发挥创意,制作出更多更华丽的滑过效果,这当中甚至包括圆形动画(可通过border-radius属性实现)。

      如果你现在缺乏灵感,那就回到本教程开头,再次观看演示页面或者下载本教程的源码吧。你会从中学到更多更有趣的动画技巧

      这案例共包含13种动画效果,受篇幅所限,小编只给大家介绍了通用模板的制作过程以及在模板基础上扩展出来的一个例子。在此小编通过最简单的一个实例带领大家入门,力求达到抛砖引玉的效果。希望大家在学会了这类动画的原理之后,可以举一反三,设计出更多精彩绝伦的CSS3按钮特效,并且不吝将成果分享到课课家,让其他读者和小编们也开开眼界,大家共同进步!

    展开全文
  • 6种css3鼠标滑过动画效果

    万次阅读 2017-11-19 11:41:03
    <html> <title>6种css3鼠标滑过动画效果 <style type="text/css"> /*****全局样式*****/ *{padding:0;margin:0;font-family:"微软雅黑"}
    <html>
        <head>
            <meta charset="utf-8" />
            <title>6种css3鼠标滑过动画效果</title>
            <style type="text/css">
    
                /*****全局样式*****/
                *{padding:0;margin:0;font-family:"微软雅黑"}
                h2{margin:15px 0;font-weight: 300;}
                .content{margin: 0 auto;max-width:728px;margin-top:20px;text-align:center}
                footer{margin: 10px 0;font-size: 14px;}
                hr{margin: 20px 0;}
                code{font-size: 12px;}
    
                /*****鼠标悬停图片变大文字消失*****/
                .style1 ul li{float:left;margin:0 6px;position:relative;list-style:none}
                .style1 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
                .style1 ul li img{width: 170px;height: 120px;border-radius: 2px;}
                .style1 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; -ms-transition: all 0.5s;}
                .style1 ul li:hover {-webkit-transform: scale(1.1); /*1.1放大值*/
                                      -moz-transform: scale(1.1); 
                                      -o-transform: scale(1.1);
                                      -ms-transform: scale(1.1); 
                                       /*  本hover用的是:transform属性;scale是属性下放大;*/
    
    
                                       }
                .style1 ul li:hover span{ opacity:0}
    
                /*****鼠标悬停文字消失*****/
                .style2 ul li{float:left;margin:0 6px;position:relative;list-style:none}
                .style2 ul li img{width: 170px;height: 120px;border-radius: 2px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
                .style2 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;
                -webkit-transition: all 0.5s; 
                -moz-transition: all 0.5s;
                 -o-transition: all 0.5s; 
                 -ms-transition: all 0.5s;
                 /*其意相同:transition:all;初始过度属性 值0;*/}
    
    
                .style2 ul li:hover span{ opacity:0}/*opacit:0;代表完全消失;0.5半透明*/
    
                /*****鼠标悬停整体旋转*****/
                .style3 ul li{float:left;margin:0 6px;position:relative;list-style:none}
                .style3 ul li{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
                .style3 ul li img{width: 170px;height: 120px;border-radius: 2px;}
                .style3 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
                .style3 ul li:hover { transform:rotate(360deg);
                                     -webkit-transform:rotate(360deg);
                                      -moz-transform:rotate(360deg);
                                      -o-transform:rotate(360deg);    /*css3旋转属性; 360deg(顺时针旋转360度)*/
                                      -ms-transform:rotate(360deg);}
    
    
                /*****鼠标悬停整体旋转放大*****/
                .style4 ul li{float:left;margin:0 6px;position:relative;list-style:none}
                .style4 ul li{transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}
                .style4 ul li img{width: 170px;height: 120px;border-radius: 2px;}
                .style4 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
                .style4 ul li:hover {transform:rotate(360deg) scale(1.2); 
                   -webkit-transform:rotate(360deg) scale(1.2);  
                     -moz-transform:rotate(360deg) scale(1.2);   
                      -o-transform:rotate(360deg) scale(1.2);  /*transform 属性下 rotate(旋转)和scale(放大)属性;可以同时用*/
                         -ms-transform:rotate(360deg) scale(1.2);}
    
    
                /*****鼠标悬停整体上升*****/
                .style5 ul li{float:left;margin:0 6px;position:relative;list-style:none}
                .style5 ul li{transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}
                .style5 ul li img{width: 170px;height: 120px;border-radius: 2px;}
                .style5 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
                .style5 ul li:hover {transform:translate(0,-10px);    -webkit-transform:translate(0,-10px);    -moz-transform:translate(0,-10px);    -o-transform:translate(0,-10px);    -ms-transform:translate(0,-10px);}
    
                /*****鼠标悬停图片放大缩小动画*****/
                @-webkit-keyframes play{
                  50% {
                    transform: scale(0.8);
                  }
    
                  100% {
                    transform: scale(1);
                  }
                }
                .style6 ul li{float:left;margin:0 6px;position:relative;list-style:none}
                .style6 ul li{transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}
                .style6 ul li img{width: 170px;height: 120px;border-radius: 2px;}
                .style6 ul li span{background:rgba(0, 0, 0, 0.5);color:#fff;border-bottom-left-radius: 2px;border-bottom-right-radius: 2px;line-height: 23px;position:absolute;bottom: 3px;width: 170px;left:0;font-size:12px;transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
                .style6 ul li:first-child:hover{animation: play 0.3s 50 linear;}
                .style6 ul li:last-child:hover{animation: play 0.3s 50 linear;position: relative;}
                .style6 ul li:last-child h1{position: absolute;color: red;top: 50px;font-size: 40px;left: 96px;}
                .style6 ul li:nth-child(2):hover {animation: play 0.3s 1 linear;}
                .style6 ul li:nth-child(3):hover {animation: play 0.3s 2 linear;}
            </style>
        </head>
        <body>
    <body class="content">
    
    <div class="style1 ">
        <h2>1.鼠标悬停图片变大文字消失</h2>
        <ul>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停图片变大文字消失</span></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    
    <div class="style2">
        <h2>2.鼠标悬停文字消失</h2>
        <ul>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停文字消失</span></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    
    <div class="style3">
        <h2>3.鼠标悬停整体旋转</h2>
        <ul>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转</span></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    
    <div class="style4">
        <h2>4.鼠标悬停整体旋转放大</h2>
        <ul>
        <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体旋转放大</span></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    
    <div class="style5">
        <h2>5.鼠标悬停整体上升</h2>
        <ul>
        <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停整体上升</span></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    
    <div class="style6">
        <h2>6.鼠标悬停心脏咔咔跳</h2>
        <ul>
         <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
            <li><img src="http://img1.gtimg.com/autoxingtai/pics/hv1/25/31/204/13273030.jpg"><span>鼠标悬停心脏咔咔跳</span></li>
        </ul>
    </div>
    <div style="clear:both"></div>
    
        <footer>
        <code>
            放大 修改scale(放大的值)<br />
            旋转放大 修改rotate(旋转度数) scale(放大值)<br />
            上下左右移动 修改translate(x轴,y轴)
        </code>
        <br />
        <hr />
    
        </footer>
        </body>
    </html>
    展开全文
  • css样式: 1、盒子阴影 box-shadow : h-shadow v-shadow blur spread color inset;...DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

    css样式:
    1、盒子阴影 box-shadow : h-shadow v-shadow blur spread color inset;
    属性
    在这里插入图片描述
    2、文字阴影 text-shadow: h-shadow v-shadow blur color;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                background-color: #f5f5f5;
                padding: 0%;
                margin: 0%;
            }
            .box {
                width: 982px;
                height: 270px;
                margin: 100px auto;
            }
            a {
                text-decoration: none;
            }
            .smallbox {
                width: 235px;
                height: 260px;
                margin-left: 14px;
                margin-top: 10px;
                float: right;
                background-color: #fff;
                /* css3效果过渡 */
                transition: all .2s linear;
            }
            .box .smallbox img {
                height: 160px;
                margin: 0 37.5px 12px; 
            }
            .box .smallbox h4 {
                margin: 0 10px 2px;
                color: #333333;
                font-size: 14px;
                font-weight: 400;
                text-align: center;
            }
            .box .smallbox .conten {
                font-size: 12px;
                color: #b0b0b0;
                text-align: center;
                margin: 0 auto;
            }
            .box .smallbox .price {
                color: #ff6700;
                font-size: 14px;
                text-align: center;
            }
            .smallbox:hover {
                /* 盒子阴影 */
                box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1); 
                /* 盒子向上移动效果,改变上外边距 */
                margin-top: 8px;
            }
           .box .aa {
                margin-left: 0;    
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="smallbox">
                <a href="https://www.mi.com/">
                    <img src="案例.png" alt="">
                    <h4>小米9 至尊版</h4>
                    <p class="conten">120x变焦/120w秒充/120Hz屏幕</p>
                    <p class="price">2499元起</p>
                </a>
            </div>    
            <div class="smallbox">
                <a href="https://www.mi.com/">
                    <img src="案例.png" alt="">
                    <h4>小米10 至尊版</h4>
                    <p class="conten">120x变焦/120w秒充/120Hz屏幕</p>
                    <p class="price">2499元起</p>
                </a>
            </div>    
            <div class="smallbox">
                <a href="https://www.mi.com/">
                    <img src="案例.png" alt="">
                    <h4>小米10 至尊版</h4>
                    <p class="conten">120x变焦/120w秒充/120Hz屏幕</p>
                    <p class="price">2499元起</p>
                </a>
            </div>    
    
            <div class="smallbox aa">
                <a href="https://www.mi.com/">
                    <img src="案例.png" alt="">
                    <h4>小米10 至尊版</h4>
                    <p class="conten">120x变焦/120w秒充/120Hz屏幕</p>
                    <p class="price">2499元起</p>
                </a>
            </div>    
    
        </div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • Html鼠标 滑过特效

    千次阅读 2017-02-08 10:13:20
    css 鼠标滑过 特效 CSS样式
  • html+css鼠标经过网页图片放大效果

    千次阅读 2019-01-18 11:55:00
    想实现当鼠标经过时图片放大: html: <div class="img_fd"><img src="tp.jpg"/></div> css: div.img_fd img:hover{  -webkit-transform:scale(2,2);  -moz-transform:s...
  • HTML CSS 鼠标样式效果

    千次阅读 2016-12-08 23:48:58
    HTML/CSS/JS 目录:...鼠标手型效果&lt;/div&gt; &lt;div style="cursor:pointer"&gt;鼠标手型效果&lt;/div&gt; &lt;!-- pointer 兼容性比较好
  • js 特效 html 特效 鼠标点击效果 js 特效 html 特效 鼠标点击效果
  • 自己在浏览器实现时当鼠标移上图片有放大效果 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片放大案例</title> <...
  • css+html鼠标划入hover效果(一)

    千次阅读 2020-07-05 22:37:04
    效果图: html部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
  • 前端html鼠标移入图片动作效果 效果展示: 没有用到js和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • HTML+CSS实现鼠标滑过图片放大效果

    千次阅读 2020-09-02 22:03:48
    鼠标滑过图片块,图片放大,划出恢复大小。 效果图如下 HTML代码如下: <div class="box"> <ul> <li><img src="../images/photo01.jpg" alt=""></li> <li><img src=...
  • HTML 图片鼠标悬停动态效果

    万次阅读 2016-02-17 17:01:02
    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml ">  ...
  • HTML中经常需要完成这样的一个效果鼠标悬停切换图片:效果如下:
  • 8.HTML+CSS——鼠标经过翻转图片特效 图片稍惊悚 HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • vue实现鼠标经过显示悬浮框效果

    千次阅读 2020-03-09 14:54:14
    vue实现悬浮框效果
  • HTML+CSS实现鼠标点上去动画效果

    千次阅读 2019-10-01 20:47:49
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
  • HTML5 canvas鼠标经过星星连线

    千次阅读 2021-01-03 20:08:16
    HTML5 canvas鼠标经过星星连线,鼠标经过星空可将星星一颗颗连成直线,页面背景有变色效果HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>互动星空<...
  • 利用html+css实现当鼠标滑过分页按钮时,按钮自动放大的效果 <!DOCTYPE html> <html> <head> <title>demo</title> <style> li { float: left; width: 30px; height: ...
  • 源码Demo: <!DOCTYPE html> <html lang="en" > <head>...meta charset="UTF-8">...鼠标悬停下划线</title> <style> body { display: flex; justify-content: center; ...
  • HTML5+CSS3 鼠标悬停3D立体图片效果

    千次阅读 2019-02-17 17:49:11
    效果图: 设置一个盒子,里面放两个div。 2.div旋转并设阴影。 3.加伪类,使鼠标移入这个盒子的时候div有动画效果。 这样就完成应该是一个鼠标悬停立体图片的效果。 ...
  • 十分钟实现鼠标悬停效果,CSS3悬停效果

    千次阅读 多人点赞 2020-12-15 21:22:21
    font awesome 图标使用方法参考网站: ... HTML: <!DOCTYPE html> ...html>...鼠标悬停效果:微信公众号AlbertYang</title> <link rel="stylesheet" type="text/css" href="curso
  • html页面中鼠标悬停更换图片

    千次阅读 2020-12-10 22:33:37
    <img src="images/mybook.png" onmouseover="this.src='images/mybook2.png'" onmouseout="this.src='images/mybook.png'"/> onmouseover鼠标悬浮在图片上使用这...onmouseout当鼠标离开该图片使用这个图片
  • 简单的鼠标悬停效果

    千次阅读 2017-09-27 16:11:25
    运用简单的标签和标签样式设计自己喜欢的鼠标悬停样式: 网址"></a> //可以点击文本使之跳转到相应的网址。 <style></style>中设置各个标签的样式,设置标签样式可以使用class名,例如:class="btn" 在...
  • hover鼠标的悬停效果

    千次阅读 2020-12-16 20:11:29
    设置鼠标的悬停效果 !DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* hover专门设置标悬停效果 */ span:...
  • 5小时入门HTML5-基础篇

    千人学习 2017-05-10 16:05:25
    html5相对于html4或者xhtml1.0,进步是很明显的。以前很多靠html代码无法实现的效果现在都可以通过html5实现,如视频,音频,网页绘图,而且并不需要复杂的代码,所以说html5宛如一场革命。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 199,332
精华内容 79,732
关键字:

html鼠标经过效果