te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - CSS Border transitions infinite animation loop - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - CSS Border transitions infinite animation loop - Stack Overflow

    javascript - CSS Border transitions infinite animation loop - Stack Overflow

    programmeradmin3浏览0评论

    I've captured this snippet of css code on internet which perform an animation around the border of a button when hovering. I find it very nice.

    Is there a way to customize it in order to make the border animation looping infinitely and not on hovering ?

    here is the code : 

          button {
            background: none;
            border: 0;
            box-sizing: border-box;
            box-shadow: inset 0 0 0 2px #f45e61;
            color: #f45e61;
            font-size: inherit;
            font-weight: 700;
            margin: 1em;
            padding: 1em 2em;
            text-align: center;
            text-transform: capitalize;
            position: relative;
            vertical-align: middle;
        }
        button::before, button::after {
            box-sizing: border-box;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .draw {
            -webkit-transition: color 0.25s;
            transition: color 0.25s;
        }
        .draw::before, .draw::after {
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }
        .draw::before {
            top: 0;
            left: 0;
        }
        .draw::after {
            bottom: 0;
            right: 0;
        }
       /* .draw:hover {
            color: #60daaa;
        }*/
        .draw:hover::before, .draw:hover::after {
            width: 100%;
            height: 100%;
        }
        .draw:hover::before {
            border-top-color: #60daaa;
            border-right-color: #60daaa;
            -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
            transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
        }
        .draw:hover::after {
            border-bottom-color: #60daaa;
            border-left-color: #60daaa;
            -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
            transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
        }
    <h1>CSS Border Transitions</h1>
<button class="draw">draw</button>

    I've captured this snippet of css code on internet which perform an animation around the border of a button when hovering. I find it very nice.

    Is there a way to customize it in order to make the border animation looping infinitely and not on hovering ?

    here is the code : 

          button {
            background: none;
            border: 0;
            box-sizing: border-box;
            box-shadow: inset 0 0 0 2px #f45e61;
            color: #f45e61;
            font-size: inherit;
            font-weight: 700;
            margin: 1em;
            padding: 1em 2em;
            text-align: center;
            text-transform: capitalize;
            position: relative;
            vertical-align: middle;
        }
        button::before, button::after {
            box-sizing: border-box;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .draw {
            -webkit-transition: color 0.25s;
            transition: color 0.25s;
        }
        .draw::before, .draw::after {
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }
        .draw::before {
            top: 0;
            left: 0;
        }
        .draw::after {
            bottom: 0;
            right: 0;
        }
       /* .draw:hover {
            color: #60daaa;
        }*/
        .draw:hover::before, .draw:hover::after {
            width: 100%;
            height: 100%;
        }
        .draw:hover::before {
            border-top-color: #60daaa;
            border-right-color: #60daaa;
            -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
            transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
        }
        .draw:hover::after {
            border-bottom-color: #60daaa;
            border-left-color: #60daaa;
            -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
            transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
        }
    <h1>CSS Border Transitions</h1>
<button class="draw">draw</button>

    Thank You

    • javascript
    • jquery
    • html
    • css
    Share Improve this question edited Jan 16, 2017 at 23:17 kabrice asked Jan 16, 2017 at 23:09 kabricekabrice 1,6256 gold badges30 silver badges54 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 13

    You can use almost the same styles, but with CSS animations instead of transitions.

    button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  vertical-align: middle;
}
.draw {
  overflow: hidden;
  position: relative;
}
.draw::before, .draw::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  animation: border 2s infinite;
}
.draw::after {
  bottom: 0;
  right: 0;
  animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}

@keyframes border {
  0% {
    width: 0;
    height: 0;
  }
  25% {
    width: 100%;
    height: 0;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes borderColor {
  0% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  50% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  51% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  100% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}
    <h1>CSS Border Transitions</h1>
<button class="draw">draw</button>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论