精华内容
下载资源
问答
  • 2021-08-05 01:23:43

    CSS

    语言:

    CSSSCSS

    确定

    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);

    body {

    display: table;

    width: 100%;

    height: 100vh;

    margin: 0;

    background: #333;

    font-family: 'Roboto Condensed', sans-serif;

    font-size: 20px;

    font-weight: 300;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: #fff;

    }

    .container {

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    width: 600px;

    }

    ul {

    list-style: none;

    margin: 0;

    padding: 0;

    }

    li {

    display: inline-block;

    padding: 0 20px;

    }

    span {

    position: relative;

    display: block;

    cursor: pointer;

    }

    span:before,

    span:after {

    content: '';

    position: absolute;

    width: 0%;

    height: 1px;

    top: 50%;

    margin-top: -0.5px;

    background: #fff;

    }

    span:before {

    left: -2.5px;

    }

    span:after {

    right: 2.5px;

    background: #fff;

    -webkit-transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);

    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);

    }

    span:hover:before {

    background: #fff;

    width: 100%;

    -webkit-transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

    transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);

    }

    span:hover:after {

    background: transparent;

    width: 100%;

    -webkit-transition: 0s;

    transition: 0s;

    }

    更多相关内容
  • 一些基本的hover效果........................................................................................................
  • 想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点
  • 12种CSS3 hover效果插件

    2016-01-12 18:45:52
    插件描述:好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验.参考示例:http://www.jq22.com/jquery-info5498
  • 一.发送效果HTML
  • :hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器就显示不出来。 在IE6中只兼容a:hover,要...
  • 7种CSS3鼠标hover图片效果是一款基于magic.css来实现,可以制作出非常漂亮的鼠标hover图片效果
  • 图标hover效果

    2019-09-08 16:44:49
    图标hover效果 图标hover效果
  • 对于网页浏览者来说,按钮控件的变化可以说是再熟悉不过的一种机制了:一般使用鼠标浏览时最容易感受到的有Normal、Hover以及Archive这三种效果,分别为按钮平时的状态、鼠标游标移到上方的效果、以及点击按钮时的...

    对于网页浏览者来说,按钮控件的变化可以说是再熟悉不过的一种机制了:一般使用鼠标浏览时最容易感受到的有Normal、Hover以及Archive这三种效果,分别为按钮平时的状态、鼠标游标移到上方的效果、以及点击按钮时的效果。

    21dd13c812acd20c766b6fc58aed7658.png

    而另外还有一个我们称为Focus的效果,Focus主要是指使用键盘的Tab按键来“瞄准”网页上的控件时、被瞄准的那一个控件所显示的状态。

    虽然现在鼠标已经是操作电脑时的主要设备,但在某些情况下,例如填写表单时,让使用者直接使用键盘的Tab来切换输入栏位,比不断的在鼠标与键盘之间来回操作要来得顺畅多了,因此在注重使用者体验的表单系统设计,都会特别注重输入框的Focus效果:

    33a57f03904ed2891d24d3a3281a6620.png

    1、网页上最常见的互动效果:Hover

    在网页中,Hover效果是常被应用的一种效果,除了可以有效的提供使用者“我现在鼠标准确地瞄准了这个按钮”、以及“这可能是一个可以互动的控件”的资讯以外,Hover效果还常常被用来提供许多额外资讯的一种方式。

    例如:在Dribble的浏览上我们平常看到的都是作品的图片、而作品的名称以及描述等资讯则是设计在Hover的效果:

    fbe67c2a88d3fc8292b779f953c6a7ae.png

    以及最常见的提示说明:当使用者不清楚按钮的功能时、Hover可以在不改变原始版面的情况下、提示使用者该按钮的功能描述:

    ae590ed5c6f885de01894c0460e53a4a.png

    马海祥觉得合理的安排Hover可以让版面的设计更为简洁、许多容易造成版面杂乱的文字与描述都可以暂时地消失在版面上、却又可以在适合的时间提供给使用者必要的资讯。

    2、在触控式萤幕中,Hover却变得寸步难行

    与桌上型电脑作业系统不同,触控式萤幕设备由于操作上的特性,是不存在鼠标游标的,因此操作上是使用手指或触控笔直接点击感应面板、于是使用者可以执行的动作不外乎:单击、双击、长压以及各种方向的滑动(多指手势属于部分系统的特殊动作、故不在此讨论)。

    例如:iOS系统中对于App图示的控制就设计成单击启动App、长压则可以进行删除或移动的操作:

    3360a0ac1b3845fe128da6c161190016.png

    另外一个常见的触控式操作模式则是iOS系统中大家熟悉的下拉式重新整理功能,单指往下滑动的手势取代了传统的Refresh按钮:

    cfc60ac5b36a7d5a8b6d68aa42fa0c88.png

    因此,在开发App的时候,马海祥建议设计师应考虑到设备本身的特性、必须针对触控系统的操作改变设计,例如:Plant Nanny中即设计了必须长压2秒钟才能完成任务的按钮:一方面避免了误触,一方面更可以在这2秒中配合音效、营造出“喝水”的感觉。

    3、在触控设备中,该怎么达到Hover的效果

    既然在触控设备上具有完全不同的操作特性,而使用者使用触控设备浏览资讯的比例越来越增加,许多网站也不得不考虑如何应对触控设备浏览的需求加以调整:

    放弃Hover效果、利用侦测浏览端的设备给予不同的版面排列方式,例如:Behance的网页版以及手机App即展示了不同的版面配置:

    4ae27f5fe7da9e81377c45ccb79f15da.png

    点击一次触发Hover的效果、再点一次即触发点击的效果,例如:Grids这个网站亦使用了鼠标Hover上去才会显示标题与资讯的设计,而当使用触控设备浏览时,机制则自动变更为按第一次显示Hover效果,再按第二次则真正进行点击的动作:

    13f35ce95857b51b51ee131a6c5689f5.png

    另一个类似的作法是App Store彦面的购买按钮,以两阶段按钮来提示使用者“更多的额外资讯”,例如原本是显示App的价格,当使用者点击一次后,则变更按钮的外观,描述变更成再度按下后会真正执行的动作(购买并下载安装)。

    a1f2e0468dbca53f8f0bcfe64bca3034.png

    当然,它也同时具备了防止使用者不小心误触而导致购买了App的两阶段按钮设计。

    7e4c30f6cec5a8eef84a9435c88bb709.png

    不知道是不是为了设计上的一致性,虽然桌面上对于按钮误触的情形较不明显,但其实OSX桌面版的App Stroe也设计了这个两阶段的按钮,而iTunes 11却没有这麽做,也许在接下来的版本会趋于统一吧!

    4、使用长压并滑动的方式来模拟鼠标游标经过的状况

    还有一种方法是:使用长压并滑动的方式来模拟鼠标游标经过的状况,但这种方法的学习成本较高,一般触控式萤幕使用者并不熟悉此种UI操作方式,况且在浏览全版面的情况下,让使用者不断压著触控萤幕并且进行全萤幕的滑动是相当辛苦的一件事情、手指头亦容易挡住视线,反而遮蔽到想显示给使用者的资讯。

    所以,此种长压、滑动的操作方式大多使用在游戏中、并且多是使用在限定某一区域的控制(具体可查看马海祥博客《基于滑动维度的交互设计变化》的相关介绍)。

    例如:Angry Bird、Fruit Ninja 等体感游戏,或是如Minigore这类模拟传统摇杆的游戏等等。

    761d6529d1e3c0d0d4e35149e14f9626.png

    5、提供特殊功能来模拟鼠标的效果

    不同浏览装置上的浏览方式不同,在设计时,自然必须将各种状况考虑进去,如此简单一个网页上的Hover效果,在触控装置上时是要怎麽安排呢?是改变排版方式、让Hover的资讯直接显示出来吗?采用两段式点击是否会影响使用者的浏览体验?或是其实Hover的显示资讯根本一点也不重要,那麽直接舍弃掉,是否会更好?

    虽然触控设备没有鼠标游标,但其实还是可以利用笔记型电脑模拟触控板的方式、来模拟出有鼠标游标的效果。

    例如:Puffin这个浏览器即提供了“虚拟触控版”的功能、来模拟鼠标游标的存在。

    196db6d8181d24f73206b706bf3b79cb.png

    但依然有缺点:虚拟触控版的设计严重影响触控设备体验上的直觉性以及流畅感。

    马海祥博客点评:

    完美并可以适用所有设计的解决方式并不存在,大家在设计时还是得根据自己产品的特性、为产品选择一个最适当的方案来进行,触控设备不一定会改变世界,但改变了某些设计。

    本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/jhsj/1037.html,注明出处;否则,禁止转载;谢谢配合!

    展开全文
  • 纯css实导航hover效果

    2021-06-13 02:37:21
    } /* 还原效果 --------------------------------------------------*/ .nav01 { width:100%; height:60px; background:#333; } .nav01 ul { width:1000px; height:100%; margin:0 auto; display:flex; } .nav01 ul...

    /* 初始化页面 */

    html,body,div,span,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {

    margin:0;

    padding:0;

    border:0;

    outline:none;

    }

    li,ul,ol {

    list-style:none;

    }

    .top50 {

    margin-top:50px !important;

    }

    /* 还原效果

    --------------------------------------------------*/

    .nav01 {

    width:100%;

    height:60px;

    background:#333;

    }

    .nav01 ul {

    width:1000px;

    height:100%;

    margin:0 auto;

    display:flex;

    }

    .nav01 ul li {

    position:relative;

    /* 重点 */

    width:250px;

    text-align:center;

    line-height:60px;

    font-size:20px;

    color:#fff;

    cursor:pointer;

    /* transition:color .5s;

    */

    }

    .nav01 ul li::before {

    content:"";

    position:absolute;

    /* 重点 */

    left:0;

    /* 重点 */

    bottom:0;

    /* 重点 */

    width:0;

    /* 重点 */

    height:2px;

    background:#FFE300;

    transition:width .5s;

    }

    .nav01 ul li:hover::before {

    width:250px;

    }

    /* 线条运动

    --------------------------------------------------*/

    .nav02 {

    width:100%;

    height:60px;

    background:#333;

    }

    .nav02 ul {

    width:1000px;

    height:100%;

    margin:0 auto;

    display:flex;

    }

    .nav02 ul li {

    position:relative;

    width:250px;

    text-align:center;

    line-height:60px;

    font-size:20px;

    color:#fff;

    cursor:pointer;

    }

    .nav02 ul li::before {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:250px;

    /* 重点 */

    height:2px;

    background:#FFE300;

    transform:scaleX(0);

    /* 重点 */

    transition:all .5s;

    /* 重点 */

    }

    .nav02 ul li:hover::before {

    transform:scaleX(1);

    /* 重点 */

    }

    /* 线条运动方向

    --------------------------------------------------*/

    .nav03 {

    width:1200px;

    margin:0 auto;

    }

    .nav03 ul {

    width:300px;

    }

    .nav03 ul li {

    position:relative;

    width:100%;

    text-align:center;

    line-height:60px;

    font-size:20px;

    color:#333;

    cursor:pointer;

    }

    .nav03 ul li::before {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:300px;

    /* 重点 */

    height:2px;

    background:#FFE300;

    transition:transform .5s;

    /* 重点 */

    transform:scaleX(0);

    /* 重点 */

    transform-origin:100% 0;

    /* 重点 */

    }

    .nav03 ul li:hover::before {

    transform:scaleX(1);

    /* 重点 */

    transform-origin:0 0;

    /* 重点 */

    }

    /* 拓展1

    --------------------------------------------------*/

    .nav04 {

    width:100%;

    }

    .nav04 ul {

    width:1200px;

    height:100%;

    margin:0 auto;

    }

    .nav04 ul li {

    position:relative;

    width:300px;

    text-align:center;

    line-height:60px;

    font-size:20px;

    color:#333;

    cursor:pointer;

    }

    .nav04 ul li::before {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:300px;

    height:60px;

    background:#FFE300;

    z-index:-1;

    /* 重点 */

    transition:transform .5s;

    /* 重点 */

    transform:scale3d(0,1,1);

    /* 重点 */

    transform-origin:100% 50%;

    /* 重点 */

    }

    .nav04 ul li:hover {

    color:#333;

    }

    .nav04 ul li:hover::before {

    transform:scale3d(1,1,1);

    /* 重点 */

    transform-origin:0 50%;

    /* 重点 */

    transition-timing-function:ease-in;

    }

    /* 拓展2

    --------------------------------------------------*/

    .nav05 {

    width:100%;

    }

    .nav05 ul {

    width:1200px;

    height:100%;

    margin:0 auto;

    }

    .nav05 ul li {

    position:relative;

    width:300px;

    text-align:center;

    line-height:60px;

    font-size:20px;

    color:#333;

    cursor:pointer;

    }

    .nav05 ul li::before {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:300px;

    height:60px;

    background:#FFE300;

    z-index:-1;

    transition:transform .5s;

    transform:scale3d(0,0,1);

    /* 重点 */

    transform-origin:100% 100%;

    /* 重点 */

    }

    .nav05 ul li:hover {

    color:#333;

    }

    .nav05 ul li:hover::before {

    transform:scale3d(1,1,1);

    /* 重点 */

    transform-origin:0 0;

    /* 重点 */

    transition-timing-function:ease-in;

    }

    /* 拓展3

    --------------------------------------------------*/

    .nav06 {

    width:100%;

    height:60px;

    background:#333;

    }

    .nav06 ul {

    width:1200px;

    height:100%;

    margin:0 auto;

    display:flex;

    }

    .nav06 ul li {

    position:relative;

    width:300px;

    text-align:center;

    line-height:60px;

    font-size:20px;

    color:#fff;

    cursor:pointer;

    z-index:99;

    }

    .nav06 ul li::before {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:300px;

    height:60px;

    background:#FFE300;

    z-index:-1;

    transition:transform .5s;

    transform:scale3d(0,0,1);

    /* 重点 */

    transform-origin:50% 100%;

    /* 重点 */

    }

    .nav06 ul li:hover {

    color:#333;

    }

    .nav06 ul li:hover::before {

    transform:scale3d(1,1,1);

    /* 重点 */

    transform-origin:50% 100%;

    /* 重点 */

    transition-timing-function:ease-out;

    }

    展开全文
  • hover是css中的选择器,用于选择鼠标指针浮动在上面的元素。这篇文章主要介绍了vue使用v-for实现hover点击效果,需要的朋友可以参考下
  • CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果 一、发送效果 二、霓虹效果 三、边框效果 四、圆形渐进效果 五、圆角效果 六、冰冻效果 七、闪亮效果 八、加载效果 CSS 8种让人眼前一亮的hover效果...

    目录

     

    CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果

    一、发送效果

    二、霓虹效果

    三、边框效果

    四、圆形渐进效果

    五、圆角效果

    六、冰冻效果

    七、闪亮效果

    八、加载效果

     


    CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果

    一、发送效果

    效果

    HTML

    <div id="send-btn">
      <button>
        // 这里是一个svg的占位
        Send
      </button>
    </div>

    CSS

    #send-btn{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button {
      background: #5f55af;
      border: 0;
      border-radius: 5px;
      padding: 10px 30px 10px 20px;
      color: white;
      text-transform: uppercase;
      font-weight: bold;
    }
    
    button svg {
      display: inline-block;
      vertical-align: middle;
      padding-right: 5px;
    }
    
    button:hover svg {
      animation: fly 2s ease 1;
    }
    
    @keyframes fly {
      0% {
        transform: translateX(0%);
      }
    
      50% {
        transform: translateX(300%);
      }
    
      100% {
        transform: translateX(0);
      }
    }

    二、霓虹效果

    效果

    HTML

    <div id="neon-btn">
      <button class="btn one">Hover me</button>
      <button  class="btn two">Hover me</button>
      <button  class="btn three">Hover me</button>
    </div>

    CSS

    #neon-btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 100vh;
      background: #031628;
    }
    
    .btn {
      border: 1px solid;
      background-color: transparent;
      text-transform: uppercase;
      font-size: 14px;
      padding: 10px 20px;
      font-weight: 300;
    }
    
    .one {
      color: #4cc9f0;
    }
    
    .two {
      color: #f038ff;
    }
    
    .three {
      color: #b9e769;
    }
    
    .btn:hover {
      color: white;
      border: 0;
    }
    
    .one:hover {
      background-color: #4cc9f0;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
      box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
    }
    
    .two:hover {
      background-color: #f038ff;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
      box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
    }
    
    .three:hover {
      background-color: #b9e769;
      -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
      -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
      box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
    }
    

    三、边框效果

    效果

    HTML

    <div id="draw-border">
      <button>Hover me</button>
    </div>

    CSS

    #draw-border {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button {
      border: 0;
      background: none;
      text-transform: uppercase;
      color: #4361ee;
      font-weight: bold;
      position: relative;
      outline: none;
      padding: 10px 20px;
      box-sizing: border-box;
    }
    
    button::before, button::after {
      box-sizing: inherit;
      position: absolute;
      content: '';
      border: 2px solid transparent;
      width: 0;
      height: 0;
    }
    
    button::after {
      bottom: 0;
      right: 0;
    }
    
    button::before {
      top: 0;
      left: 0;
    }
    
    button:hover::before, button:hover::after {
      width: 100%;
      height: 100%;
    }
    
    button:hover::before {
      border-top-color: #4361ee;
      border-right-color: #4361ee;
      transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
    }
    
    button:hover::after {
      border-bottom-color: #4361ee;
      border-left-color: #4361ee;
      transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
    }

    四、圆形渐进效果

    效果

    HTML

    <div id="circle-btn">
      <div class="btn-container">
        // 这里有一个svg元素
        <button>Hover me</button>
      </div>
    </div>

    CSS

    #circle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    .btn-container {
      position: relative;
    }
    
    button {
      border: 0;
      border-radius: 50px;
      color: white;
      background: #5f55af;
      padding: 15px 20px 16px 60px;
      text-transform: uppercase;
      background: linear-gradient(to right, #f72585 50%, #5f55af 50%);
      background-size: 200% 100%;
      background-position: right bottom;
      transition:all 2s ease;
    }
    
    svg {
      background: #f72585;
      padding: 8px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 0%;
    }
    
    button:hover {
       background-position: left bottom;
    }

    五、圆角效果

    效果

    HTML

    <div id="border-btn">
      <button>Hover me</button>
    </div>

    CSS

    #border-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button {
      border: 0;
      border-radius: 10px;
      background: #2ec4b6;
      text-transform: uppercase;
      color: white;
      font-size: 16px;
      font-weight: bold;
      padding: 15px 30px;
      outline: none;
      position: relative;
      transition: border-radius 3s;
      -webkit-transition: border-radius 3s;
    }
    
    button:hover {
       border-bottom-right-radius: 50px;
       border-top-left-radius: 50px;
       border-bottom-left-radius: 10px;
       border-top-right-radius: 10px;
    }

    六、冰冻效果

    效果

    HTML

    <div id="frozen-btn">
      <button class="green">Hover me</button>
      <button class="purple">Hover me</button>
    </div>

    CSS

    #frozen-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button {
      border: 0;
      margin: 20px;
      text-transform: uppercase;
      font-size: 20px;
      font-weight: bold;
      padding: 15px 50px;
      border-radius: 50px;
      color: white;
      outline: none;
      position: relative;
    }
    
    button:before{
      content: '';
      display: block;
      background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
      background-size: 210% 100%;
      background-position: right bottom;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom:0;
      right:0;
      left: 0;
      border-radius: 50px;
      transition: all 1s;
      -webkit-transition: all 1s;
    }
    
    .green {
       background-image: linear-gradient(to right, #25aae1, #40e495);
       box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    }
    
    .purple {
       background-image: linear-gradient(to right, #6253e1, #852D91);
       box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
    }
    
    .purple:hover:before {
      background-position: left bottom;
    }
    
    .green:hover:before {
      background-position: left bottom;
    }

    七、闪亮效果

    效果

    HTML

    <div id="shiny-shadow">
      <button><span>Hover me</span></button>
    </div>

    CSS

    #shiny-shadow {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background: #1c2541;
    }
    
    button {
      border: 2px solid white;
      background: transparent;
      text-transform: uppercase;
      color: white;
      padding: 15px 50px;
      outline: none;
      overflow: hidden;
      position: relative;
    }
    
    span {
      z-index: 20;
    }
    
    button:after {
      content: '';
        display: block;
        position: absolute;
        top: -36px;
        left: -100px;
        background: white;
        width: 50px;
        height: 125px;
        opacity: 20%;
        transform: rotate(-45deg);
    }
    
    button:hover:after {
      left: 120%;
      transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
       -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
    }
    

    八、加载效果

    效果

    HTML

    <div id="loading-btn">
      <button><span>Hover me</span></button>
    </div>

    CSS

    #loading-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
    
    button {
      background: transparent;
      border: 0;
      border-radius: 0;
      text-transform: uppercase;
      font-weight: bold;
      font-size: 20px;
      padding: 15px 50px;
      position: relative;
    }
    
    button:before {
      transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
      content: '';
      width: 1%;
      height: 100%;
      background: #ff5964;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    button span {
      mix-blend-mode: darken;
    }
    
    button:hover:before {
      background: #ff5964;
      width: 100%;
    }

     

    展开全文
  • css静态滤镜 + A:Hover 效果
  • 采用了大量html5和css3元素,配合hover做出的效果。下面取其中一个例子:html结构 Nice LilyLily likes to play with crayons and pencilsView morecss.grid{overflow:hidden;margin:0;padding:3e...
  • 给平淡的站点带来活力hover效果能给网页增加一些动态效果,并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果,但是随着CSS3的引入和现代浏览器的支持,我们可以用纯粹的CSS代码来实现这些有趣...
  • 发送效果 HTML <div id="send-btn"> <button> // 这里是一个svg的占位 Send </button> </div> CSS #send-btn{ display: flex; align-items: center; justify-content: center;...
  • 本案例由小码农前端导航提供,xmn-xdm.com CSS3鼠标悬停图片放大效果,hover效果
  • CSS3实现可翻转的hover效果,具体代码如下所示: 1.css /*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0 auto; text-align: ...
  • 本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <...
  • 8种让人眼前一亮的hover效果--CSS

    千次阅读 2020-09-01 22:33:22
    8种好看实用的CSS悬浮效果,值得期待
  • VUE中写一个hover效果

    2022-05-25 16:58:19
    <template> <div> 啊哈哈哈 <div :class="flag ? 'item ani' : 'item'" @mouseenter = ...效果出来吧</div> </div> </template> <script> export default { data() { .
  • 移动端实现hover效果

    千次阅读 2021-04-13 11:05:46
    document.body.addEventListener(‘touchstart’, function(){ });加上这行代码,空函数就行 然后:hover改成:active,实现PC端hover效果
  • 按钮hover效果

    2021-06-25 05:19:23
    今天看一个网站的按钮效果不错就试着做了一下,可是怎么也不出效果,大家看下问题在哪里。a标签没有添加overflow: hidden;效果是正常,以添加这个属性就出错了(背景不能完全覆盖),要点一下才正常,但是如果换成别的...
  • css3有哪些不错的hover效果CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦 效果一:360°旋转 修改rotate(旋转度数) 01 * { 02 transition:All 0.4s ease-in-out; 03 -webkit-transition:All 0.4...
  • 效果描述: 我们知道,当鼠标悬停在图片或者文字上的时候,会有一行文字说明悬停显示出来 这行文字都是默认的效果,有一天你的客户跟你说,哎呀,这个这么丑,能不能美化一下呢 你一听,艾玛这个是系统默认的...
  • 监听el-table点击事件 监听el-table的hover事件 el-table点击某行高亮

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 117,119
精华内容 46,847
关键字:

hover 效果

友情链接: pingtu.zip