range实现推石头上山黑夜白昼切换效果代码
代码语言:html
所属分类:其他
代码描述: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