@charset"utf-8";
/*
*Name: CSS hover
* Author:huzhangjun
* Time:2022-05-19
*/
/*** 滑箱特效 **/
.hx_hover {
    outline: none;
    border: none;
    z-index: 1;
    position: relative;
}
.hx_hover::before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fa541c;
    transform-origin: center bottom;
    transform: scaleY(0);
    transition: transform 0.4s ease-in-out;
}
.hx_hover:hover,.hxtx_hover:active {
    cursor: pointer;
}
.hx_hover:hover::before,.hxtx_hover:active::before {
    transform-origin: center top;
    transform: scaleY(1);
}
/*** 果冻特效 **/
.gd_hover {
    z-index: 1;
    outline: none;
    border: none;
}

.gd_hover:hover,.gd_hover:active {
    cursor: pointer;
    animation: jelly 0.5s;
}
@keyframes jelly {
    0%,
    100% {
        transform: scale(1, 1);
    }

    25%,
    75% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }
}
/*** 脉冲特效 **/
.mc_hover {
    position: relative;
    z-index: 1;
    border: none;
    outline: none;
}

.mc_hover:hover {
    cursor: pointer;
}
.mc_hover::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: scale(1);
    transform-origin: center;
}
.mc_hover:hover::before,.mc_hover:active::before {
    transition: all 0.75s ease-out;
    border: 1px solid#e6f7ff;
    transform: scale(1.25);
    opacity: 0;
}
/*** 闪光特效 **/
.sg_hover {
    outline: none;
    border: none;
    z-index: 1;
    position: relative;
    overflow: hidden;
    --shine-width: 1.25em;
}

.sg_hover::after {
    content: "";
    z-index: -1;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    top: -50%;
    left: -10%;
    bottom: -50%;
    width: 1.25em;
    transform: translate3d(-200%, 0, 0) rotate(35deg);
}

.sg_hover:hover,.sg_hover:active {
    cursor: pointer;
}

.sg_hover:hover::after,.sg_hover:active::after {
    transition: transform 0.5s ease-in-out;
    transform: translate3d(1000%, 0, 0) rotate(35deg);
}
/*** 气泡特效 中心扩散**/
.qp_center_hover {
    outline: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.qp_center_hover::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #9254de;
    transform-origin: center;
    transform: translate3d(-50%, -50%, 0) scale(0, 0);
    transition: transform 0.45s ease-in-out;
}

.qp_center_hover:hover::before,.qp_center_hover:active::before {
    transform: translate3d(-50%, -50%, 0) scale(15, 15);
}

/*** 气泡特效 左边扩散**/
.qp_left_hover {
    outline: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.qp_left_hover::before {
    z-index: -1;
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: #9254de;
    /* 变化位置的代码 */
    top: 0;
    left: 0;
    transform-origin: center;
    transform: scale3d(0, 0, 0);
    transition: transform 0.45s ease-in-out;
    /* *********** */
}

.qp_left_hover:hover::before,.qp_left_hover:active::before {
    transform: scale3d(15, 15, 15);
}
/*** 水波纹特效 ***/
.ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0,0,0);
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle,#000 10%,transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10,10);
    opacity: 0;
    transition: transform .5s,opacity 1s;
}
.ripple:active:after,.ripple:hover:after {
    transform: scale(0,0);
    opacity: .2;
    transition: 0s;
}

/*****  输入框输入特效部分 *****/

/***  input输入框输入特效部分
<div class="input_box">
  <input type="text" />
  <span></span>
</div>
***/
.input_box {
    position: relative;
    display: inline-block;
}
.input_box input .input_txt {
    outline: none;
    border: none;
    background: #fafafa;
}
.input_box input ~ span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: #262626;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.3s ease-in-out;
}

.input_box input:focus ~ span {
    transform: scaleX(1);
    transform-origin: left center;
}
/***  input输入框输入特效部分
<div class="input_box_1">
  <input type="text" class="input_txt"/>
  <span class="bottom"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span class="left"></span>
</div>
***/
.input_box_1 {
    position: relative;
    display: inline-block;
}

.input_box_1 input {
    outline: none;
    border: none;
}
.input_box_1 .bottom,
.input_box_1 .top,
.input_box_1 .left,
.input_box_1 .right {
    position: absolute;
    background-color: #262626;
    transition: transform 0.1s ease-in-out;
}
.input_box_1 .bottom,
.input_box_1 .top {
    left: 0;
    right: 0;
    height: 1px;
    transform: scaleX(0);
}

.input_box_1 .left,
.input_box_1 .right {
    top: 0;
    bottom: 0;
    width: 1px;
    transform: scaleY(0);
}
.input_box_1 .bottom {
    bottom: 0;
    transform-origin: right center;
}
.input_box_1 input:focus ~ .bottom {
    transform: scaleX(1);
    transform-origin: left center;
}

.input_box_1 .top {
    top: 0;
    transform-origin: left center;
    transition-delay: 0.2s;
}
.input_box_1 input:focus ~ .top {
    transform: scaleX(1);
    transform-origin: right center;
}

.input_box_1 .right {
    transform-origin: top center;
    right: 0;
    transition-delay: 0.1s;
}
.input_box_1 input:focus ~ .right {
    transform: scaleY(1);
    transform-origin: bottom center;
}

.input_box_1 .left {
    left: 0;
    transform-origin: bottom center;
    transition-delay: 0.3s;
}
.input_box_1 input:focus ~ .input_box_1 .left {
    transform: scaleY(1);
    transform-origin: top center;
}

/****
输入框提示文字跳动效果
<div class="form-control">
    <input type="text" required>
    <label>Email</label>
</div>
js部分:
const labels = document.querySelectorAll('.form-control label')
labels.forEach(label => {
    label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
        .join('')
})
***/
.form-control {
    position: relative;
    margin: 20px 0 40px;
    width: 300px;
}

.form-control input {
    background-color: transparent;
    border: 0;
    border-bottom: 2px #fff solid;
    display: block;
    width: 100%;
    padding: 15px 0;
    font-size: 18px;
    color: #fff;
}

.form-control input:focus,
.form-control input:valid {
    outline: 0;
    border-bottom-color: lightblue;
}

.form-control label {
    position: absolute;
    top: 15px;
    left: 0;
    pointer-events: none;
}

.form-control label span {
    display: inline-block;
    font-size: 18px;
    min-width: 5px;
    transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus+label span,
.form-control input:valid+label span {
    color: lightblue;
    transform: translateY(-30px);
}