幽灵按钮-按钮特效

最新推荐文章于 2024-07-12 09:57:13 发布
最新推荐文章于 2024-07-12 09:57:13 发布
阅读量1.7k 收藏 4
点赞数
分类专栏： web前端 文章标签： web前端

效果是：图标鼠标以上旋转并缩放，按钮鼠标移上有线条飞入且箭头移动有提示框鼠标移开线条飞出

效果图如下：

代码如下：

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            background-color:steelblue;
        }
        .box{
            width:1000px;
            height:280px;
            margin:50px auto;
        }
        .box .link{
            width:205px;
            height:280px;
            margin:0 20px;
            float:left;
            position:relative;
        }
        /*transition过渡效果*/
        .link .icon{
            width:100%;
            height:190px;
            display:block;
            -webkit-transition: 0.2s linear;
            -moz-transition: 0.2s linear;
            -ms-transition: 0.2s linear;
            -o-transition: 0.2s linear;
            transition: 0.2s linear;
        }
        .link-miss .icon{
            background:url("mission.png") no-repeat center center;
        }
        .link-play .icon{
            background:url("play.png") no-repeat center center;
        }
        .link-touch .icon{
            background:url("touch.png") no-repeat center center;
        }
        /*图标旋转和缩放*/
        .link .icon:hover{
            -webkit-transform: rotate(360deg) scale(1.2);
            -moz-transform: rotate(360deg) scale(1.2);
            -ms-transform: rotate(360deg) scale(1.2);
            -o-transform: rotate(360deg) scale(1.2);
            transform: rotate(360deg) scale(1.2);
        }
        .button{
            display:block;
            width:156px;
            height:50px;
            text-decoration:none;
            line-height:50px;
            color:#2DCB70;
            font-family:"微软雅黑";
            font-weight:bold;
            border:2px solid rgba(255,255,255,0.8);
            padding-left:20px;
            margin:0 auto;
            box-sizing:border-box;
            background:url("right.png") no-repeat 90px center;
            position:relative;
            -webkit-transition: 0.4s ease;
            -moz-transition: 0.4s ease;
            -ms-transition: 0.4s ease;
            -o-transition: 0.4s ease;
            transition: 0.4s ease;
        }
        .button:hover{
            border:2px solid rgba(255,255,255,1);
            background-position:100px center;
        }
        /*下面是鼠标移上去的线条飞入飞出动画*/
        .button .line{
            display:block;
            position:absolute;
        }
        .button:hover .line{
            background:white;

        }
        /*高度不变，宽度变，位置变*/
        .button .line-top{
            height:2px;
            width:0px;
            left:-110%;
            top:-2px;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }
        .button:hover .line-top{
            width:100%;
            left:-2px;
        }
        .button .line-bottom{
             width:0;
             height:2px;
             right:-110%;
             bottom:-2px;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
         }
        .button:hover .line-bottom{
            width:100%;
            right:-2px;
        }
        .button .line-left{
            width:2px;
            height:0;
            bottom:-110%;
            left:-2px;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }
        .button:hover .line-left{
            height:100%;
            bottom:-2px;
        }
        .button .line-right{
            width:2px;
            height:0;
            top:-110%;
            right:-2px;
            -webkit-transition: 0.2s ease;
            -moz-transition: 0.2s ease;
            -ms-transition: 0.2s ease;
            -o-transition: 0.2s ease;
            transition: 0.2s ease;
        }
        .button:hover .line-right{
            height:100%;
            top:-2px;
        }
        /*下面是提示栏的制作*/
        .box .tip{
            position: absolute;
            padding:0 14px;
            height:35px;
            line-height:35px;
            background:#2DCB70;
            color:white;
            top:160px;
            font-size:16px;
            font-weight: bold;
            text-transform: none;
            margin:0 auto;
            border-radius:3px;
            opacity:0;
        }
        .tip em{
            font-style:normal;
        }
        .tip span{
            position:absolute;
            width:0;
            height:0;
            overflow: hidden;
            border:7px solid transparent;
            border-top-color:#2DCB70;
            left:50%;
            margin-left:-3px;
            bottom:-14px;
        }
    </style>
</head>
<body>
<!--布局-->
  <div class="box">
      <div class="link link-miss">
          <span class="icon"></span>
          <a href="#" class="button" data-title="My mission is clear">
              <span class="line line-top"></span>
              <span class="line line-left"></span>
              <span class="line line-right"></span>
              <span class="line line-bottom"></span>
              MISSION
          </a>
      </div>
      <div class="link link-play">
          <span class="icon"></span>
          <a href="#" class="button" data-title="This is my playgroom">
              <span class="line line-top"></span>
              <span class="line line-left"></span>
              <span class="line line-right"></span>
              <span class="line line-bottom"></span>
              PLAY
          </a>
      </div>
      <div class="link link-touch">
          <span class="icon"></span>
          <a href="#" class="button" data-title="Let's do something">
              <span class="line line-top"></span>
              <span class="line line-left"></span>
              <span class="line line-right"></span>
              <span class="line line-bottom"></span>
              TOUCH
          </a>
      </div>
      <div class="tip">
          <em></em>
          <span></span>
      </div>
  </div>
<script src="jquery-1.10.2.min.js"></script>
<script>
    $(function(){
        $(".link .button").hover(function(){
           var title=$(this).attr("data-title");//得到提示内容
            $(".tip em").text(title);//把提示内容放入em元素中
            var pos=$(this).offset().left;
            var dis=($(".tip").outerWidth()-$(this).outerWidth())/2;
            var f=pos-dis;
            $(".tip").css({"left":f+"px"}).animate({"top":195,"opacity":1},300);
        },function(){
            $(".tip").animate({"top":160,"opacity":0},300);
        })//动画效果
    })
</script>
</body>
</html>

 

 

 

辣姐什么鬼
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【web前端特效源码】27 个很酷的 CSS 渐变按钮示例
南北极之间
07-07 2489
渐变颜色很酷，尤其是当您将它们应用于 Web 按钮时。因此，这里有25个很酷的CSS渐变按钮示例，可以为您的Web和移动应用程序制作一个独特而独特的按钮。https://codepen.io/ARS/pen/vEwEPPhttps://codepen.io/ARS/pen/vEwEPP https://codepen.io/JavaScriptJunkie/pen/pPRooVhttps://codepen.io/JavaScriptJunkie/pen/pPRooV https://codepen.io/
H5实战(五)：幽灵按钮效果
weiweitb8的博客
09-20 3044
1.目标效果 现在幽灵按钮是网站上十分常见的一种效果，通过使按钮变的薄透来提高页面的美观性，这里我们要实现的效果是有三个图片，在鼠标悬浮时可以放大并旋转360度，每个图标下面都有一个幽灵按钮，当鼠标悬浮时会有四边飞入，tooltip等效果，下面介绍下实现的具体过程。 2.实现思路 1）图片部分： 首先设定整体盒子的宽度，然后设定每个装有图片和按钮的盒子的宽度，span标签以背景图片的方式导
幽灵按钮，用css特效做的一种很炫酷的按钮。
唐灵波
09-16 1108
幽灵按钮，用css特效做的一种很炫酷的按钮，鼠标移动过去会有很炫酷的特效。 源码连接： http://download.csdn.net/detail/tanglingbo/9631420
cesium-军事标绘（燕尾箭头）
最新发布
GIS
07-12 636
已知两点坐标如何实现直接在cesium上直接绘制燕尾攻击箭头
幽灵按钮css3
Christine95的博客
07-16 2577
暑假第14天，学习了幽灵按钮。 幽灵按钮，也就是Ghost Buttons，是一个透明的按钮，通常是矩形或者圆角矩形，仅保留基本的形制，使用细线来标识边界；按钮内的文字通常使用纤细的非衬线体字体的纯文本，来指明按钮功能。 幽灵按钮有时候也被称为“空按钮”，通常会被设计得比普通的按钮更大一些。而它们之所以被命名为“幽灵”，是应为这种按钮如同鬼魂一样透明，但是独特的造型会立刻吸引用户的注意
css幽灵按钮
RUYIBIG的博客
05-01 427
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">         Document     *{         margin: 0;         padding: 0;     }     body{    
jquery幽灵按钮
UNDEFINED_AUBE的博客
12-22 258
幽灵按钮：也叫透明按钮，就是在设计网页中的按钮时不再设计复杂色彩、样式和纹理，而是外仅以线框示意轮廓，内只用文字示意功能，背景透出，与整个页面/背景合而为一的设计方式。
html中特效按钮(幽灵按钮)制作.zip
05-14
总的来说，这个压缩包提供了一个快速学习和实践CSS按钮特效的机会，尤其是对于初学者，这是一个很好的起点。通过掌握这些基本技巧，你可以为网站添加更多互动性和吸引力，同时提升用户体验。记住，设计的目的是既要...
纯CSS3实现的幽灵上下浮动动画特效源码.zip
11-20
【标题】"纯CSS3实现的幽灵上下浮动动画特效源码.zip" 是一个压缩包，其中包含了使用纯CSS3技术实现的一种幽灵上下浮动的动画效果。这种特效通常用于网站设计，为网页添加动态视觉元素，提升用户体验。在当前的网页...
前端网页常见的炫酷特效
04-18
08-鼠标经过按钮折叠效果 09-小球左右摆动加载效果 10-小球上下跳动加载效果 11-小球穿梭放大loading动画 12-动态火焰效果 13-单标签纯CSS实现幽灵动画 14-使用drop-shadow配合clip-path生成规则阴影 15-使用drop-...
HTML5 SVG鬼屋场景点亮查看特效特效代码
03-20
在这个鬼屋场景中，SVG被用来绘制鬼屋的建筑结构、周围的环境以及可能隐藏的各种恐怖元素，如幽灵、树影等。通过精确的路径描述和填充规则，开发者可以细致地控制每一个形状和线条，实现精细的视觉效果。 HTML5则是...
css3幽灵按钮样本
10-05
我们常常会用css3的相关属性来做那些非常炫酷的按钮或者动画。这个例子就是一个css3的按钮动画效果。
幽灵按钮 源代码HTML5开发实战
06-03
幽灵按钮 源代码HTML5开发实战 幽灵按钮，代码实现。HTML5实现。
html5 幽灵按钮,弥散阴影幽灵按钮
weixin_32199769的博客
06-24 380
这几年设计圈比较流行高饱和度渐变色和弥散阴影效果，弥散阴影有一个特点就是投影的颜色和物体颜色保持一致，下面来介绍运用css3实现的弥散阴影幽灵按钮，效果如下图所示。弥散阴影幽灵按钮效果第一步：首先搭建结构。按钮整体用一个盒子div承载，设置类名为btns，每个按钮用a标签。弥散阴影和小箭头我们使用伪元素:before和:after去制作。html:moremoremore第二步：书写css样式，实...
css3做幽灵按钮
Mr_li13的博客
10-05 1862
问题？有时候我们会看到那种非常炫酷，又很有动画感的页面或者图标动画或者那种透明又由动画的按钮。那应该怎么做呢？ 原理：运用css3中的几个属性及jquery，css3，js 属性介绍： 举个例子：像这样的幽灵按钮。       像这样的按钮怎么做呢？ 例子：     例子目录 ： 目录文件有那些：
幽灵按钮
趁着年轻，多学学
12-12 340
这个有bug 幽灵按钮 MISSION
幽灵按钮html透明度,CSS3之传说中的幽灵按钮详解
weixin_39611506的博客
06-19 229
大家好，自CSS3诞生之日起，网页特效较之以往变得越来越简单，样式也越来越多，那么今天我们来分享下所谓幽灵按钮的实现方法，首先我们来看下效果：幽灵按钮1.结构分析基本结构图解由上图不难看出，该示例主要由三部分组成，每部分各包含一个图标(由背景图像生成)和一个按钮(由带边框的超链接生成)，按钮中有一个右指向的箭头(也由背景图像生成)，除此之外，在效果图中，当鼠标滑过按钮时有四条线从四个方向飞入与按钮...
幽灵按钮（按钮过渡，纯css）
dreamy_wx的博客
08-25 477
鼠标经过按钮样式改变，动画过渡 HTML部分： <div class="wrap"> <div class="top"></div> <div class="bottom"></div> 幽灵按钮 </div> CSS部分： * { margin: 0; padding: 0 } .wrap {
CSS-幽灵按钮
zhou
12-11 489
  这里为了体现效果，添加了一张图片作为背景。具体效果可以根据个人需求调试。 HTML <div class="backimg"> <img src="img/hero.jpg" /> </div> <div class="btnBox"> <div class="btn"> <div class="btn-bord...
STEP电梯控制使用手册-召唤控制器与按钮连接
召唤按钮的连接分别由JP6和JP4管理，1、2脚和3、4脚分别连接按钮和按钮灯。 此外，文档还提到召唤控制器与召唤按钮之间的连接，其中1、2脚和3、4脚分别用于上召和下召按钮。CH2.54插座和插头可能用作这些连接的接口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值