用户:Mxxisv/沙盒：修订间差异

来自PRTS
跳到导航 跳到搜索
无编辑摘要
无编辑摘要
第1行： 第1行：
<includeonly>
<includeonly>
    <!DOCTYPE html>
<!DOCTYPE html>
    <html lang="en">
<html lang="en">
 
<head>
    <head>
<meta charset="UTF-8">
        <meta charset="UTF-8">
<title>Title</title>
        <title>Title</title>
<style>
        <style>
html{
        html {
line-height:1.6;
            line-height: 1.6;
}
        }
:root{
 
--color1:<!--{$color1}-->;
        :root {
--color2:<!--{$color2}-->;
            --color1:< !-- {
--color3:<!--{$color3}-->;
                $color1
--color4:<!--{$color4}-->;
            }
--color5:<!--{$color5}-->;
 
--color6:<!--{$color6}-->;
            -->;
--color7:<!--{$color7}-->;
 
--color8:<!--{$color8}-->;
            --color2:< !-- {
--color9:<!--{$color9}-->;
                $color2
--color10:<!--{$color10}-->;
            }
}
 
.charlogo{
            -->;
position: absolute;
 
top:5px;
            --color3:< !-- {
left:0px;
                $color3
z-index: 4;
            }
width:260px;
 
height:260px;
            -->;
}
 
.logo-wrapper{
            --color4:< !-- {
position: relative;
                $color4
width: 260px;
            }
height:260px;
 
}
            -->;
.logo-wrap{
 
position: absolute;
            --color5:< !-- {
max-width: 100%;
                $color5
height: auto;
            }
top: 50%;
 
left: 50%;
            -->;
transform: translate3d(-50%,-50%,0);
 
-webkit-transform: translate3d(-50%,-50%,0);
            --color6:< !-- {
}
                $color6
.all{
            }
width:1024px;
 
height:576px;
            -->;
position: relative;
 
overflow: hidden;
            --color7:< !-- {
-webkit-user-select:none;
                $color7
-moz-user-select:none;
            }
-ms-user-select:none;
 
user-select:none;
            -->;
}
 
.all-wrapper{
            --color8:< !-- {
position: absolute;
                $color8
width:1024px;
            }
height:576px;
 
}
            -->;
.all-wrap{
 
position:relative;
            --color9:< !-- {
width:1024px;
                $color9
height:576px;
            }
}
 
.bg{
            -->;
position: absolute;
 
z-index: 1;
            --color10:< !-- {
}
                $color10
.skinbg{
            }
position: absolute;
 
z-index: 2;
            -->;
}
        }
.skinbg-in{
 
position: absolute;
        .charlogo {
z-index: 2;
            position: absolute;
animation: skinbg-in 0.15s ease-out 1 forwards;
            top: 5px;
}
            left: 0px;
.skinbg-out{
            z-index: 4;
position: absolute;
            width: 260px;
z-index: 2;
            height: 260px;
animation: skinbg-out 0.15s ease-out 1 forwards;
        }
}
 
.skinbgcolor-in{
        .logo-wrapper {
position:absolute;
            position: relative;
left:-35px;
            width: 260px;
top:-200px;
            height: 260px;
width:560px;
        }
height:200px;
 
z-index: 3;
        .logo-wrap {
animation: skinbgcolor-in 0.1s ease-out 1 forwards;
            position: absolute;
}
            max-width: 100%;
.skinbgcolor-out{
            height: auto;
position:absolute;
            top: 50%;
left:-35px;
            left: 50%;
top:-200px;
            transform: translate3d(-50%, -50%, 0);
width:560px;
            -webkit-transform: translate3d(-50%, -50%, 0);
height:200px;
        }
z-index: 3;
 
animation: skinbgcolor-out 0.1s ease-out 1 forwards;
        .all {
}
            width: 1024px;
@keyframes skinbg-in {
            height: 576px;
0%{
            position: relative;
opacity:0;
            overflow: hidden;
}
            -webkit-user-select: none;
100%{
            -moz-user-select: none;
opacity:1;
            -ms-user-select: none;
}
            user-select: none;
}
        }
@keyframes skinbg-out {
 
0%{
        .all-wrapper {
opacity:1;
            position: absolute;
}
            width: 1024px;
100%{
            height: 576px;
opacity:0;
        }
}
 
}
        .all-wrap {
@keyframes skinbgcolor-in {
            position: relative;
0%{
            width: 1024px;
transform: rotate(0deg);
            height: 576px;
transform-origin:right bottom;
        }
}
 
100%{
        .bg {
transform: rotate(-20deg);
            position: absolute;
transform-origin:right bottom;
            z-index: 1;
}
        }
}
 
@keyframes skinbgcolor-out {
        .skinbg {
100%{
            position: absolute;
transform: rotate(0deg);
            z-index: 2;
transform-origin:right bottom;
        }
}
 
0%{
        .skinbg-in {
transform: rotate(-20deg);
            position: absolute;
transform-origin:right bottom;
            z-index: 2;
}
            animation: skinbg-in 0.15s ease-out 1 forwards;
}
        }
.explain-wrapper{
 
position: absolute;
        .skinbg-out {
right:15px;
            position: absolute;
bottom:15px;
            z-index: 2;
width:300px;
            animation: skinbg-out 0.15s ease-out 1 forwards;
height:190px;
        }
background-color: rgba(49,49,49,.85);
 
box-shadow:0 0 10px #000;
        .skinbgcolor-in {
line-height:1.6;
            position: absolute;
z-index: 999;
            left: -35px;
}
            top: -200px;
.explain-title{
            width: 560px;
padding-top: 5px;
            height: 200px;
padding-left: 10px;
            z-index: 3;
font-size: 16px;
            animation: skinbgcolor-in 0.1s ease-out 1 forwards;
color:#c9c9c9;
        }
}
 
.explain-type{
        .skinbgcolor-out {
font-size:14px;
            position: absolute;
color:black;
            left: -35px;
padding-left:5px;
            top: -200px;
padding-right: 5px;
            width: 560px;
background-color:#ffffff;
            height: 200px;
}
            z-index: 3;
.explain-skin1type{
            animation: skinbgcolor-out 0.1s ease-out 1 forwards;
font-size:14px;
        }
color:white;
 
padding-left:5px;
        @keyframes skinbg-in {
padding-right: 5px;
            0% {
background-color:var(--color1);
                opacity: 0;
}
            }
.explain-skin2type{
 
font-size:14px;
            100% {
color:white;
                opacity: 1;
padding-left:5px;
            }
padding-right: 5px;
        }
background-color:var(--color2);
 
}
        @keyframes skinbg-out {
.explain-skin3type{
            0% {
font-size:14px;
                opacity: 1;
color:white;
            }
padding-left:5px;
 
padding-right: 5px;
            100% {
background-color:var(--color3);
                opacity: 0;
}
            }
.explain-skin4type{
        }
font-size:14px;
 
color:white;
        @keyframes skinbgcolor-in {
padding-left:5px;
            0% {
padding-right: 5px;
                transform: rotate(0deg);
background-color:var(--color4);
                transform-origin: right bottom;
}
            }
.explain-skin5type{
 
font-size:14px;
            100% {
color:white;
                transform: rotate(-20deg);
padding-left:5px;
                transform-origin: right bottom;
padding-right: 5px;
            }
background-color:var(--color5);
        }
}
 
.explain-skin6type{
        @keyframes skinbgcolor-out {
font-size:14px;
            100% {
color:white;
                transform: rotate(0deg);
padding-left:5px;
                transform-origin: right bottom;
padding-right: 5px;
            }
background-color:var(--color6);
 
}
            0% {
.explain-skin7type{
                transform: rotate(-20deg);
font-size:14px;
                transform-origin: right bottom;
color:white;
            }
padding-left:5px;
        }
padding-right: 5px;
 
background-color:var(--color7);
        .explain-wrapper {
}
            position: absolute;
.explain-skin8type{
            right: 15px;
font-size:14px;
            bottom: 15px;
color:white;
            width: 300px;
padding-left:5px;
            height: 190px;
padding-right: 5px;
            background-color: rgba(49, 49, 49, .85);
background-color:var(--color8);
            box-shadow: 0 0 10px #000;
}
            line-height: 1.6;
.explain-skin9type{
            z-index: 999;
font-size:14px;
        }
color:white;
 
padding-left:5px;
        .explain-title {
padding-right: 5px;
            padding-top: 5px;
background-color:var(--color9);
            padding-left: 10px;
}
            font-size: 16px;
.explain-skin10type{
            color: #c9c9c9;
font-size:14px;
        }
color:white;
 
 
        .explain-type {
            font-size: 14px;
            color: black;
            padding-left: 5px;
            padding-right: 5px;
            background-color: #ffffff;
        }
 
        .explain-skin1type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color1);
        }
 
        .explain-skin2type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color2);
        }
 
        .explain-skin3type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color3);
        }
 
        .explain-skin4type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color4);
        }
 
        .explain-skin5type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color5);
        }
 
        .explain-skin6type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color6);
        }
 
        .explain-skin7type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color7);
        }
 
        .explain-skin8type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color8);
        }
 
        .explain-skin9type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color9);
        }
 
        .explain-skin10type {
            font-size: 14px;
            color: white;
            padding-left: 5px;
            padding-right: 5px;
            background-color: var(--color10);
        }
 
        .typewrapper {
            padding-top: 2px;
            padding-left: 10px;
        }
 
        .explain-content {
            padding-top: 2px;
            padding-left: 10px;
            padding-right: 10px;
            color: white;
            font-size: 14px;
        }
 
        .features-wrapper {
            position: absolute;
            right: 15px;
            bottom: 210px;
            width: 300px;
            height: 110px;
            background-color: rgba(49, 49, 49, .85);
            box-shadow: 0 0 20px #000;
            line-height: 1.6;
            z-index: 999;
        }
 
        .features-title {
            padding-top: 7px;
            padding

2019年12月11日 (三) 16:03的版本

取自“https://prts.wiki/index.php?title=用户:Mxxisv/沙盒&oldid=39367”