专栏首页膨胀的面包github 的黑夜模式小猫咪动画源码

github 的黑夜模式小猫咪动画源码

github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。 秉着开源精神,将源码分享给大家。

废话少说,上代码

html:

<!-- 暗黑模式 -->
<div class="profile-color-modes js-promo-color-modes-banner-profile">
    <svg aria-hidden="true" height="45" viewBox="0 0 106 60" fill="none" stroke-width="3"
         stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
        <g class="profile-color-modes-illu-group profile-color-modes-illu-red">
            <path d="M37.5 58.5V57.5C37.5 49.768 43.768 43.5 51.5 43.5V43.5C59.232 43.5 65.5 49.768 65.5 57.5V58.5"></path>
        </g>
        <g class="profile-color-modes-illu-group profile-color-modes-illu-orange">
            <path d="M104.07 58.5C103.401 55.092 97.7635 54.3869 95.5375 57.489C97.4039 54.6411 99.7685 48.8845 94.6889 46.6592C89.4817 44.378 86.1428 50.1604 85.3786 54.1158C85.9519 50.4768 83.7226 43.294 78.219 44.6737C72.7154 46.0534 72.7793 51.3754 74.4992 55.489C74.169 54.7601 72.4917 53.3567 70.5 52.8196"></path>
        </g>
        <g class="profile-color-modes-illu-group profile-color-modes-illu-purple">
            <path d="M5.51109 58.5V52.5C5.51109 41.4543 14.4654 32.5 25.5111 32.5C31.4845 32.5 36.8464 35.1188 40.5111 39.2709C40.7212 39.5089 40.9258 39.7521 41.1245 40"></path>
            <path d="M27.511 49.5C29.6777 49.5 28.911 49.5 32.511 49.5"></path>
            <path d="M27.511 56.5C29.6776 56.5 26.911 56.5 30.511 56.5"></path>
        </g>
        <g class="profile-color-modes-illu-group profile-color-modes-illu-green">
            <circle cx="5.5" cy="12.5" r="4"></circle>
            <circle cx="18.5" cy="5.5" r="4"></circle>
            <path d="M18.5 9.5L18.5 27.5"></path>
            <path d="M18.5 23.5C6 23.5 5.5 23.6064 5.5 16.5"></path>
        </g>
        <g class="profile-color-modes-illu-group profile-color-modes-illu-blue">
            <g class="profile-color-modes-illu-frame">
                <path d="M40.6983 31.5C40.5387 29.6246 40.6456 28.0199 41.1762 27.2317C42.9939 24.5312 49.7417 26.6027 52.5428 30.2409C54.2551 29.8552 56.0796 29.6619 57.9731 29.6619C59.8169 29.6619 61.5953 29.8452 63.2682 30.211C66.0833 26.5913 72.799 24.5386 74.6117 27.2317C75.6839 28.8246 75.0259 33.7525 73.9345 37.5094C74.2013 37.9848 74.4422 38.4817 74.6555 39"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M41.508 31.5C41.6336 31.2259 41.7672 30.9582 41.9085 30.6968C40.7845 26.9182 40.086 21.8512 41.1762 20.2317C42.9939 17.5312 49.7417 19.6027 52.5428 23.2409C54.2551 22.8552 56.0796 22.6619 57.9731 22.6619C59.8169 22.6619 61.5953 22.8452 63.2682 23.211C66.0833 19.5913 72.799 17.5386 74.6117 20.2317C75.6839 21.8246 75.0259 26.7525 73.9345 30.5094C75.1352 32.6488 75.811 35.2229 75.811 38.2283C75.811 38.49 75.8058 38.7472 75.7957 39"></path>
                <path d="M49.4996 33V35.6757"></path>
                <path d="M67.3375 33V35.6757"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M41.508 31.5C41.6336 31.2259 41.7672 30.9582 41.9085 30.6968C40.7845 26.9182 40.086 21.8512 41.1762 20.2317C42.9939 17.5312 49.7417 19.6027 52.5428 23.2409C54.2551 22.8552 56.0796 22.6619 57.9731 22.6619C59.8169 22.6619 61.5953 22.8452 63.2682 23.211C66.0833 19.5913 72.799 17.5386 74.6117 20.2317C75.6839 21.8246 75.0259 26.7525 73.9345 30.5094C75.1352 32.6488 75.811 35.2229 75.811 38.2283C75.811 38.49 75.8058 38.7472 75.7957 39"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M41.508 31.5C41.6336 31.2259 41.7672 30.9582 41.9085 30.6968C40.7845 26.9182 40.086 21.8512 41.1762 20.2317C42.9939 17.5312 49.7417 19.6027 52.5428 23.2409C54.2551 22.8552 56.0796 22.6619 57.9731 22.6619C59.8169 22.6619 61.5953 22.8452 63.2682 23.211C66.0833 19.5913 72.799 17.5386 74.6117 20.2317C75.6839 21.8246 75.0259 26.7525 73.9345 30.5094C75.1352 32.6488 75.811 35.2229 75.811 38.2283C75.811 38.49 75.8058 38.7472 75.7957 39"></path>
                <path d="M49.4996 33V35.6757"></path>
                <path d="M67.3375 33V35.6757"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M41.508 31.5C41.6336 31.2259 41.7672 30.9582 41.9085 30.6968C40.7845 26.9182 40.086 21.8512 41.1762 20.2317C42.9939 17.5312 49.7417 19.6027 52.5428 23.2409C54.2551 22.8552 56.0796 22.6619 57.9731 22.6619C59.8169 22.6619 61.5953 22.8452 63.2682 23.211C66.0833 19.5913 72.799 17.5386 74.6117 20.2317C75.6839 21.8246 75.0259 26.7525 73.9345 30.5094C75.1352 32.6488 75.811 35.2229 75.811 38.2283C75.811 38.49 75.8058 38.7472 75.7957 39"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M41.508 31.5C41.6336 31.2259 41.7672 30.9582 41.9085 30.6968C40.7845 26.9182 40.086 21.8512 41.1762 20.2317C42.9939 17.5312 49.7417 19.6027 52.5428 23.2409C54.2551 22.8552 56.0796 22.6619 57.9731 22.6619C59.8169 22.6619 61.5953 22.8452 63.2682 23.211C66.0833 19.5913 72.799 17.5386 74.6117 20.2317C75.6839 21.8246 75.0259 26.7525 73.9345 30.5094C75.1352 32.6488 75.811 35.2229 75.811 38.2283C75.811 38.49 75.8058 38.7472 75.7957 39"></path>
                <path d="M49.4996 33V35.6757"></path>
                <path d="M67.3375 33V35.6757"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M73.4999 40.2236C74.9709 38.2049 75.8108 35.5791 75.8108 32.2283C75.8108 29.2229 75.1351 26.6488 73.9344 24.5094C75.0258 20.7525 75.6838 15.8246 74.6116 14.2317C72.7989 11.5386 66.0832 13.5913 63.2681 17.211C61.5952 16.8452 59.8167 16.6619 57.973 16.6619C56.0795 16.6619 54.2549 16.8552 52.5427 17.2409C49.7416 13.6027 42.9938 11.5312 41.176 14.2317C40.0859 15.8512 40.7843 20.9182 41.9084 24.6968C41.003 26.3716 40.4146 28.3065 40.2129 30.5"></path>
                <path d="M82.9458 30.5471L76.8413 31.657"></path>
                <path d="M76.2867 34.4319L81.8362 37.7616"></path>
                <path d="M49.4995 27.8242V30.4999"></path>
                <path d="M67.3374 27.8242V30.4998"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M45.3697 34.2658C41.8877 32.1376 39.7113 28.6222 39.7113 23.2283C39.7113 20.3101 40.3483 17.7986 41.4845 15.6968C40.3605 11.9182 39.662 6.85125 40.7522 5.23168C42.5699 2.53117 49.3177 4.6027 52.1188 8.24095C53.831 7.85521 55.6556 7.66186 57.5491 7.66186C59.3929 7.66186 61.1713 7.84519 62.8442 8.21095C65.6593 4.59134 72.375 2.5386 74.1877 5.23168C75.2599 6.82461 74.6019 11.7525 73.5105 15.5094C74.7112 17.6488 75.3869 20.2229 75.3869 23.2283C75.3869 28.6222 73.2105 32.1376 69.7285 34.2658C70.8603 35.5363 72.6057 38.3556 73.3076 40"></path>
                <path d="M49.0747 19.8242V22.4999"></path>
                <path d="M54.0991 28C54.6651 29.0893 55.7863 30.0812 57.9929 30.0812C59.0642 30.0812 59.8797 29.8461 60.5 29.4788"></path>
                <path d="M66.9126 19.8242V22.4999"></path>
                <path d="M33.2533 20.0237L39.0723 22.1767"></path>
                <path d="M39.1369 25.0058L33.0935 27.3212"></path>
                <path d="M81.8442 19.022L76.0252 21.1751"></path>
                <path d="M75.961 24.0041L82.0045 26.3196"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M73.4999 40.2236C74.9709 38.2049 75.8108 35.5791 75.8108 32.2283C75.8108 29.2229 75.1351 26.6488 73.9344 24.5094C75.0258 20.7525 75.6838 15.8246 74.6116 14.2317C72.7989 11.5386 66.0832 13.5913 63.2681 17.211C61.5952 16.8452 59.8167 16.6619 57.973 16.6619C56.0795 16.6619 54.2549 16.8552 52.5427 17.2409C49.7416 13.6027 42.9938 11.5312 41.176 14.2317C40.0859 15.8512 40.7843 20.9182 41.9084 24.6968C41.003 26.3716 40.4146 28.3065 40.2129 30.5"></path>
                <path d="M82.9458 30.5471L76.8413 31.657"></path>
                <path d="M76.2867 34.4319L81.8362 37.7616"></path>
                <path d="M49.4995 27.8242V30.4999"></path>
                <path d="M67.3374 27.8242V30.4998"></path>
            </g>
            <g class="profile-color-modes-illu-frame">
                <path d="M40.6983 31.5C40.5387 29.6246 40.6456 28.0199 41.1762 27.2317C42.9939 24.5312 49.7417 26.6027 52.5428 30.2409C54.2551 29.8552 56.0796 29.6619 57.9731 29.6619C59.8169 29.6619 61.5953 29.8452 63.2682 30.211C66.0833 26.5913 72.799 24.5386 74.6117 27.2317C75.6839 28.8246 75.0259 33.7525 73.9345 37.5094C74.2013 37.9848 74.4422 38.4817 74.6555 39"></path>
            </g>
        </g>
    </svg>
    <span class="profile-color-modes-toggle js-promo-color-modes-toggle" role="checkbox"
          aria-checked="false" aria-label="Toggle dark mode" tabindex="0">
        <div class="profile-color-modes-toggle-track"></div>
        <div class="profile-color-modes-toggle-thumb js-promo-color-modes-thumb">
          <svg style="fill: #ffdf5d; margin: 7px 0 0 7px;" aria-hidden="true"
               width="14" height="13" viewBox="0 0 14 13" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M4.52208 7.71754C7.5782 7.71754 10.0557 5.24006 10.0557 2.18394C10.0557 1.93498 10.0392 1.68986 10.0074 1.44961C9.95801 1.07727 10.3495 0.771159 10.6474 0.99992C12.1153 2.12716 13.0615 3.89999 13.0615 5.89383C13.0615 9.29958 10.3006 12.0605 6.89485 12.0605C3.95334 12.0605 1.49286 10.001 0.876728 7.24527C0.794841 6.87902 1.23668 6.65289 1.55321 6.85451C2.41106 7.40095 3.4296 7.71754 4.52208 7.71754Z"></path>
          </svg>
        </div>
      </span>
</div>

css:

/* 暗夜模式 */
// style
:root,[data-color-mode=light] {
    --color-text-primary: #24292e;
    --color-bg-canvas: #fff;
    --color-scale-gray-3: #d1d5da;
    --color-scale-purple-8: #3a1d6e;
    --color-scale-white: #fff;
    --color-scale-purple-9: #29134e;
    --color-scale-gray-8: #2f363d;
    --color-scale-purple-6: #5a32a3;
    --color-scale-yellow-4: #ffdf5d;
    --color-scale-yellow-0: #fffdef;
    --color-auto-gray-3: #d1d5da;
    --color-scale-red-5: #d73a49;
    --color-scale-orange-3: #ffab70;
    --color-scale-purple-5: #6f42c1;
    --color-scale-green-3: #85e89d;
    --color-scale-blue-4: #2188ff;
    --color-scale-gray-6: #586069;
}

[data-color-mode=dark] {
    --color-text-primary: #c9d1d9;
    --color-bg-canvas: #0d1117;
    --color-scale-gray-3: #8b949e;
    --color-scale-purple-8: #3c1e70;
    --color-scale-white: #f0f6fc;
    --color-scale-purple-9: #271052;
    --color-scale-gray-8: #161b22;
    --color-scale-purple-6: #6e40c9;
    --color-scale-yellow-4: #bb8009;
    --color-scale-yellow-0: #f8e3a1;
    --color-auto-gray-3: #30363d;
    --color-scale-red-5: #da3633;
    --color-scale-orange-3: #f0883e;
    --color-scale-purple-5: #8957e5;
    --color-scale-green-3: #3fb950;
    --color-scale-blue-4: #388bfd;
    --color-scale-gray-6: #30363d;
}

/* 暗夜模式 */
[data-color-mode] {
    color: var(--color-text-primary);
    background-color: var(--color-bg-canvas)
}

:root,[data-color-mode=light] {
    color-scheme: light
}

[data-color-mode=dark] {
    color-scheme: dark
}

// style end
:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-track-border:var(--color-scale-gray-3)}



[data-color-mode=dark] {
    --color-profile-color-modes-toggle-track-border:var(--color-scale-purple-8)}

:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-track-bg:var(--color-scale-white)}


[data-color-mode=dark] {
    --color-profile-color-modes-toggle-track-bg:var(--color-scale-purple-9)}



:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-thumb-bg:var(--color-scale-gray-8)}



[data-color-mode=dark] {
    --color-profile-color-modes-toggle-thumb-bg:var(--color-scale-purple-6)}


:root,[data-color-mode=light] {
    --color-profile-color-modes-toggle-moon:var(--color-scale-yellow-4)}


[data-color-mode=dark] {
    --color-profile-color-modes-toggle-moon:var(--color-scale-yellow-0)}



//color
.profile-color-modes {
    display: block;
    position: relative;
    padding-right: 32px
}

.profile-color-modes-toggle {
    position: absolute;
    top: 12px;
    right: 0
}

.profile-color-modes-toggle-track {
    width: 42px;
    height: 24px;
    border-radius: 24px;
    border: 3px solid var(--color-profile-color-modes-toggle-track-border);
    background-color: var(--color-profile-color-modes-toggle-track-bg)
}

.profile-color-modes-toggle-thumb {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-profile-color-modes-toggle-thumb-bg);
    transition: transform .3s cubic-bezier(.4,.03,0,1);
    cursor: pointer
}

[data-color-mode=dark] .profile-color-modes-toggle-thumb {
    transform: translateX(18px)
}


.profile-color-modes-popover {
    opacity: .01;
    transition: opacity .5s cubic-bezier(.4,.03,0,1)
}

.profile-color-modes-popover.shown {
    opacity: 1
}

.profile-color-modes-illu-group {
    stroke: var(--color-auto-gray-3)
}

.profile-color-modes-illu-frame {
    opacity: 0
}

:root .profile-color-modes-illu-frame:nth-child(8),[data-color-mode=light] .profile-color-modes-illu-frame:nth-child(8) {
    animation: profile-light-color-modes-illu-anim-frame-show 0s forwards,profile-light-color-modes-illu-anim-frame-hide 0s .3s forwards
}

:root .profile-color-modes-illu-frame:nth-child(9),[data-color-mode=light] .profile-color-modes-illu-frame:nth-child(9) {
    animation: profile-light-color-modes-illu-anim-frame-show 0s .3s forwards,profile-light-color-modes-illu-anim-frame-hide 0s .36s forwards
}

:root .profile-color-modes-illu-frame:nth-child(10),[data-color-mode=light] .profile-color-modes-illu-frame:nth-child(10) {
    animation: profile-light-color-modes-illu-anim-frame-show 0s .36s forwards
}

@keyframes profile-light-color-modes-illu-anim-frame-show {
    0% {
        opacity: 0;
        animation-timing-function: ease-out
    }

    to {
        opacity: 1
    }
}

@keyframes profile-light-color-modes-illu-anim-frame-hide {
    0% {
        opacity: 1;
        animation-timing-function: ease-in
    }

    to {
        opacity: 0
    }
}

[data-color-mode=dark] .profile-color-modes-illu-red {
    stroke: var(--color-scale-red-5)
}

[data-color-mode=dark] .profile-color-modes-illu-orange {
    stroke: var(--color-scale-orange-3)
}

[data-color-mode=dark] .profile-color-modes-illu-purple {
    stroke: var(--color-scale-purple-5)
}

[data-color-mode=dark] .profile-color-modes-illu-green {
    stroke: var(--color-scale-green-3)
}

[data-color-mode=dark] .profile-color-modes-illu-blue {
    stroke: var(--color-scale-blue-4)
}

[data-color-mode=dark] .profile-color-modes-illu-group {
    animation: profile-color-modes-illu-anim .2s cubic-bezier(.72,.08,1,.68) backwards
}

@keyframes profile-color-modes-illu-anim {
    0% {
        stroke: var(--color-scale-gray-6)
    }
}

[data-color-mode=dark] .profile-color-modes-illu-frame {
    animation: profile-color-modes-illu-anim-frame-show 0s forwards,profile-color-modes-illu-anim-frame-hide 0s forwards
}

[data-color-mode=dark] .profile-color-modes-illu-frame:first-child {
    opacity: 1;
    animation: profile-color-modes-illu-anim-frame-hide 0s forwards
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(8) {
    animation: profile-color-modes-illu-anim-frame-show 0s forwards
}

@keyframes profile-color-modes-illu-anim-frame-show {
    0% {
        opacity: 0;
        animation-timing-function: ease-out
    }

    to {
        opacity: 1
    }
}

@keyframes profile-color-modes-illu-anim-frame-hide {
    0% {
        opacity: 1;
        animation-timing-function: ease-in
    }

    to {
        opacity: 0
    }
}

[data-color-mode=dark] .profile-color-modes-illu-red {
    animation-delay: .4s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-orange {
    animation-delay: .5s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-purple {
    animation-delay: .6s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-blue {
    animation-delay: .7s;
    animation-duration: .1s
}

[data-color-mode=dark] .profile-color-modes-illu-green {
    animation-delay: .8s;
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(.47,2.92,.84,-1.5)
}

[data-color-mode=dark] .profile-color-modes-illu-frame:first-child {
    animation-delay: 1.8s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(2) {
    animation-delay: 1.8s,2.58s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(3) {
    animation-delay: 2.58s,2.66s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(4) {
    animation-delay: 2.66s,2.78s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(5) {
    animation-delay: 2.78s,2.84s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(6) {
    animation-delay: 2.84s,3.44s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(7) {
    animation-delay: 3.44s,3.56s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(8) {
    animation-delay: 3.56s
}

[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(9),[data-color-mode=dark] .profile-color-modes-illu-frame:nth-child(10) {
    animation: none
}

/* 暗夜end */

切换控制是通过修改 html 根节点来控制的,因此需要修改 html 根节点代码:

<html lang="en">
//改为:
<html lang="en" data-color-mode="light">

js:

// 切换按钮
function set_mode_toggle(e) {
    let t = !0, mode = "dark";
    "true" === e.getAttribute("aria-checked") && (t = !1 , mode = "light")
        e.setAttribute("aria-checked", String(t))
        change_mode(mode);
}
// 改变模式 并设置 cookie
function change_mode(e) {
    const t = document.querySelector("html[data-color-mode]");
    if (e === "dark") document.cookie = "night=1;path=/";
    else document.cookie = "night=0;path=/"
    t && t.setAttribute("data-color-mode", e)
}
// 获取当前模式
function get_user_scheme_mode() {
    const e = document.querySelector("html[data-color-mode]");
    if (!e)
        return;
    const t = e.getAttribute("data-color-mode");
    return "auto" === t ? function() {
        if (get_sys_scheme_mode("dark"))
            return "dark";
        if (get_sys_scheme_mode("light"))
            return "light";
    }() : t
}
// 获取系统模式 先判断 cookie 在获取系统的
function get_sys_scheme_mode(e) {
    let night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1")
    if (night){
        if(night === '0'){
            return false
        }else if(night === '1'){
            return true
        }
    }else
    return window.matchMedia && window.matchMedia(`(prefers-color-scheme: ${e})`).matches
}
!async function() {
    const e = document.querySelector(".js-promo-color-modes-toggle");
    if (e && "auto" === function() {
        const e = document.querySelector("html[data-color-mode]");
        if (!e)
            return;
        return e.getAttribute("data-color-mode")
    }()) {
        "dark" === get_user_scheme_mode() && e.setAttribute("aria-checked", "true")
    }
}()
!async function() {
    document.querySelector(".js-color-mode-settings") && window.history.replaceState({}, document.title, document.URL.split("?")[0])
}()
// 添加点击事件
let toggle_btn = document.getElementsByClassName("js-promo-color-modes-toggle")
toggle_btn[0]? toggle_btn[0].addEventListener('click',function (e) {
    set_mode_toggle(e.currentTarget)
},false):false

via: github 的黑夜模式小猫咪动画源码 - 即刻学术-学术论文写作-linux前后端开发-体系结构-存储架构-分布式-VPS https://ijkxs.com/archives/71.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 白天变黑夜,猫咪变狮子,人工智能修改视频神乎其技

    有图都未必有真相的今天,有了AI工具,连视频都很容易被大幅修改,变成“面目全非”的景象。 前不久,Adobe推出继PS之后最重磅神器:Project Cloak...

    企鹅号小编
  • 汤姆休想把杰瑞叼回家!ML识别器将口含小动物的猫猫拒之门外

    客厅里传来一阵蹦蹦跶跶的声响,沉静的夜晚被打破,名叫Ben Hamm小哥从酣睡中被惊醒,他看了一眼时间,凌晨三点。

    大数据文摘
  • 脑洞清奇AI君,给小猫咪们起了8000多个无厘头名字丨Colab Demo可用

    这是一位美国博主用AI给猫咪起的名字之一,她收集了费城的莫里斯动物保护所(Morris Animal Refuge)数百只猫咪的名字,还有注册在多伦多的几千只宠...

    量子位
  • 第十七课 【ERC721实践】迷恋猫从玩耍到开发

    玩迷恋猫游戏,玩家需要在以太坊区块链上下载到这款游戏的APP,游戏开始系统会赠送玩家一只喵。刚推出时是送猫的,现在只有活动时才赠送。它让你沉迷于吸猫,然后当你无...

    辉哥
  • 在VR环境中养一只专属宠物,是种什么样的体验?

    没有时间和精力养宠物?但看见软糯糯的小家伙们又移不开脚步,这说的就是当代打工人吧。

    VRPinea
  • 喵咪制造机:生成式对抗网络的花式画喵大法

    2012年,吴恩达和Jeff Dean用Google Brain的1.6万个CPU所打造的大型神经网络,在被1000万YouTube视频中的猫图像训练三天后,自...

    AI科技大本营
  • 用Python制作一个猫咪小秒表

    秒表是一项随处可见的神奇小物件,最常用到秒表的两大场景,一个是运动会,另一个是健身房,因此也总是让人联想到汗水和心跳,贲张的血管,粗重的呼吸,时间似乎变得缓慢,...

    诸葛青云
  • WenYu特效管理插件

    <div class="tab-container post_tab box-shadow-wrap-lg">

    闻语博客
  • 教你爱的正确姿势-QQ红包520项目总结

    腾讯ISUX
  • 猫脸辨识没这么容易!GPU加持深度学习才突破瓶颈

    本篇献给奋战在深度学习领域里的铲屎官们! 奇群科技执行长宋牧奇一直想为旗下团队熟悉的先进GPU技术研发实力,找到一个杀手级的应用,经过多次碰壁后,没想到最后却是...

    GPUS Lady
  • [第二波] QTX个人艺术家限定品公布!

    ? 五一假期去哪里? 5月1日-5月3日 深圳福田会展中心 QQ潮玩展   200+潮玩限定品 更有[QQ潮玩]重磅新品和限定品 整装待发,等你来冲! 前天...

    腾讯ISUX
  • 根本停不下来!给它一个轮廓,TensorFlow还你一只完整的喵 (附论文下载)

    大数据文摘
  • 超级变变变:喵星人汪星人还有街景神奇变身 | Paper+Code

    夏乙 千平 发自猴姆 量子位 出品 | 公众号 QbitAI 只会卖萌的猫主子分分钟变身百兽之王? 白天能不能懂夜的黑? 你的汪星人如果是其他品种会是什么样? ...

    量子位
  • 盘点|那些有趣的AR/VR宠物养成游戏及相关虚拟设备

    VRPinea
  • 猛男把400+条猫咪叫声做成数据集,可识别猫咪的3种不同状态丨开源

    没错,来自米兰大学计算机系的几位猛男,和生物系、兽医系的小伙伴们一起,收集了21只猫咪的400+条语音数据,做了个猫叫声数据集。

    量子位
  • 太吓人!人工智能领域的巨头开始“造假”,人类肉眼根本分辨不出真伪!

    创新社 体验未来生活 ? 来源:创新社 我们都知道, 英伟达是家专门做电脑显卡的公司~ 非常出名! 但估计没多少人知道, 如今的英伟达还是人工智能领域的巨头! ...

    企鹅号小编
  • AI不思议|AI城市狂想曲

    阳光照进房间,小P被温柔的声音唤醒:“主人您好,今天是2040年6月21日,天气晴,室外最高温会达到35度,室内24度。早餐已经根据您的需求配置好了,请您洗漱后...

    用户1386409
  • 【IOT应用创新大赛】 云猫咪之家

    伴随着宠物数量的增多,流浪动物的数量也在急剧的增长。街道上随处都可以看到流浪动物的身影,甚至有些城市小区遍布满地,单单中国每年就有近4000万的流浪猫狗,流浪动...

    Niv显欢
  • 涂鹅大赛2021获奖结果揭晓!

    作为一年一度QQ潮玩展的重要组成环节,本届涂鹅大赛的比赛结果终于揭!晓!了! ? 今年的参赛作品,不得不感慨:真是高手如云,神仙打架,难分胜负!就连评委们都纠...

    腾讯ISUX

扫码关注云+社区

领取腾讯云代金券