range实现推石头上山黑夜白昼切换效果代码

代码语言:html

所属分类:其他

代码描述:range实现推石头上山黑夜白昼切换效果代码,鼠标点击拖动石头试试。

代码标签: range 石头 上山 黑夜 白昼 切换

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 

 
 
 
<style>
@import url("https://fonts.cdnfonts.com/css/spartacus-2");

*,
*:before,
*:after {
        box-sizing: border-box;
}

html,
body {
        background: #222;
        padding: 0;
        margin: 0;
        display: flex;
        min-height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
}

.demo {
        --sky: #010015;
        position: relative;
        height: 379px;
        border-radius: 10px;
        width: 100%;
        max-width: 768px;
        margin: auto;
        overflow: hidden;
        background: var(--sky);
        transition: 0.3s background ease;
        font-family: "", sans-serif;
        user-select: none;

        @media screen and (max-width: 768px) {
                border-radius: 0;
        }
}

input[type="range"] {
        position: absolute;
        left: 1%;
        bottom: 10%;
        -webkit-appearance: none;
        background: transparent;
        height: 0;
        width: 80%;
        min-width: 300px;
        rotate: -90deg;
        transform-origin: left top;
        z-index: 5;

        @media screen and (max-width: 768px) {
                left: 2%;
                width: 70%;
        }

        &:focus-visible {
                outline: none;

                &::-webkit-slider-thumb {
                        border: 6px solid #99c8ff;
                }
        }
}

input[type="range"]::-webkit-slider-runnable-track {
        background: rgba(0 0 0 / 0.1);
        height: 5px;
        border-top-left-radius: 100%;
        border-bottom-right-radius: 100%;
}

input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 70px;
        height: 70px;
        margin-top: -65px;
        background: #332622;
        border: 6px solid #523e37;
        border-radius: 50%;
        cursor: grab;
        rotate: calc(var(--factor) * 0.3deg);
        box-shadow: -14px -14px 0 0px #44342e inset, -14px 14px 0 0px #3f302b inset,
                21px 0 0 0p.........完整代码请登录后点击上方下载按钮下载查看

网友评论0