404 lines
6.7 KiB
CSS
404 lines
6.7 KiB
CSS
/***
|
|
|
|
====================================================================
|
|
Case One
|
|
====================================================================
|
|
|
|
***/
|
|
|
|
.case-one {
|
|
position: relative;
|
|
display: block;
|
|
background-color: var(--thm-main-bg);
|
|
padding: 10px 0 120px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.case-one__single {
|
|
position: relative;
|
|
display: block;
|
|
border: 1px solid var(--thm-bdr-color);
|
|
border-radius: 16px;
|
|
background-color: var(--thm-main-bg);
|
|
padding: 40px 25px 40px;
|
|
margin-bottom: 24px;
|
|
z-index: 1;
|
|
height: 450px;
|
|
}
|
|
|
|
.case-one__shape-1 {
|
|
position: absolute;
|
|
bottom: 68px;
|
|
right: 63px;
|
|
height: 107px;
|
|
width: 107px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(180deg, #6243FF 0%, #FF2828 100%);
|
|
opacity: 0.8;
|
|
filter: blur(90px);
|
|
transform: scale(0);
|
|
-webkit-transition: all 500ms ease;
|
|
transition: all 500ms ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.case-one__single:hover .case-one__shape-1 {
|
|
transform: scale(1);
|
|
}
|
|
|
|
.case-one__icon {
|
|
text-align: center;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.case-one__icon img {
|
|
|
|
width: auto;
|
|
transition: all 500ms linear;
|
|
transition-delay: 0.1s;
|
|
transform: scale(1);
|
|
object-fit: contain;
|
|
}
|
|
|
|
.case-one__single:hover .case-one__icon img {
|
|
transform: scale(.9);
|
|
}
|
|
|
|
.case-one__title {
|
|
text-align: center;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 18px;
|
|
margin-top: 30px;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.case-one__title a {
|
|
color: var(--thm-white);
|
|
-webkit-transition: all 500ms ease;
|
|
transition: all 500ms ease;
|
|
}
|
|
|
|
.case-one__title a:hover {
|
|
color: var(--thm-base);
|
|
}
|
|
|
|
.case-one__text {
|
|
margin-bottom: 30px;
|
|
height:150px;
|
|
overflow: hidden; /* 隐藏超出内容 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
}
|
|
|
|
.case-one__btn-box {
|
|
text-align: center;
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.case-one__btn {
|
|
font-weight: 600;
|
|
color: var(--thm-white);
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
-webkit-transition: all 500ms ease;
|
|
transition: all 500ms ease;
|
|
}
|
|
|
|
.case-one__btn span {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
padding-left: 15px;
|
|
top: -2px;
|
|
}
|
|
|
|
.case-one__btn:before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background-color: var(--thm-white);
|
|
opacity: 0;
|
|
-webkit-transition: all 500ms ease;
|
|
transition: all 500ms ease;
|
|
}
|
|
|
|
.case-one__btn:hover {
|
|
color: var(--thm-white);
|
|
}
|
|
|
|
.case-one__btn:hover:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.case-one__btn-box-two {
|
|
position: relative;
|
|
display: block;
|
|
text-align: center;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
|
|
/***
|
|
|
|
====================================================================
|
|
Case Two
|
|
====================================================================
|
|
|
|
***/
|
|
|
|
.case-two {
|
|
position: relative;
|
|
display: block;
|
|
padding: 110px 0 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.case-two__shape-1 {
|
|
position: absolute;
|
|
bottom: -100px;
|
|
left: 205px;
|
|
width: 1346px;
|
|
height: 566px;
|
|
background: linear-gradient(97deg, #00E3F2 2.29%, #FF9B00 26.83%, #FF2828 48.98%, #8F00FF 75.28%);
|
|
opacity: 0.15;
|
|
filter: blur(75px);
|
|
z-index: -1;
|
|
}
|
|
|
|
.case-two__wrap {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.case-two__title {
|
|
position: relative;
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
line-height: 56px;
|
|
color: var(--thm-white);
|
|
font-weight: 600;
|
|
margin-bottom: 54px;
|
|
}
|
|
|
|
.case-two__title span {
|
|
color: var(--thm-primary);
|
|
}
|
|
|
|
.case-two__carosuel {
|
|
position: relative;
|
|
display: block;
|
|
max-width: 312px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.case-two__carosuel.owl-carousel .owl-stage-outer {
|
|
overflow: visible;
|
|
}
|
|
|
|
.case-two__carosuel.owl-carousel .owl-stage {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.case-two__single {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.case-two__img {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.case-two__img>img {
|
|
width: 100%;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.case-two__content {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
left: 8px;
|
|
right: 8px;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
stroke-width: 1px;
|
|
stroke: rgba(255, 255, 255, 0.24);
|
|
backdrop-filter: blur(8px);
|
|
border-radius: 12px;
|
|
padding: 10px 10px 20px;
|
|
transform: translateY(-66%);
|
|
transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.case-two__single:hover .case-two__content {
|
|
visibility: visible;
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.case-two__carosuel.owl-carousel .owl-stage-outer .owl-item.active .case-two__content {
|
|
visibility: visible;
|
|
transform: translateY(0%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.case-two__user-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.case-two__user {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.case-two__user-img {
|
|
position: relative;
|
|
display: block;
|
|
border-radius: 50%;
|
|
width: 32px;
|
|
}
|
|
|
|
.case-two__user-img>img {
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.case-two__user-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--thm-primary);
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.case-two__post-hour {
|
|
font-size: 12px;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.case-two__text {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.case-two__btn-box {
|
|
position: relative;
|
|
display: block;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.case-two__btn {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
background: linear-gradient(85deg, #00B67A -4.03%, #E1F763 99.23%);
|
|
width: 100%;
|
|
padding: 11px 0;
|
|
color: var(--thm-body-bg);
|
|
background-size: 200% auto;
|
|
transition: all 0.5s linear;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.case-two__btn>img {
|
|
width: auto !important;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.case-two__btn:hover {
|
|
color: var(--thm-body-bg);
|
|
background-position: right center;
|
|
}
|
|
|
|
.case-two__icon {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
height: 36px;
|
|
width: 36px;
|
|
backdrop-filter: blur(8px);
|
|
border: 1px solid var(--thm-bdr-color);
|
|
background-color: var(--thm-body-bg);
|
|
border-radius: var(--thm-border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translateX(100px);
|
|
opacity: 0;
|
|
transition: all 700ms ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.case-two__icon span {
|
|
font-size: 15px;
|
|
color: var(--thm-white);
|
|
}
|
|
|
|
.case-two__single:hover .case-two__icon {
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.case-two__carosuel.owl-carousel .owl-stage-outer .owl-item.active .case-two__icon {
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.case-two__btn-two-box {
|
|
position: relative;
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 55px;
|
|
}
|
|
|
|
.case-two__btn-two {
|
|
background: var(--thm-main-bg);
|
|
border: 1px solid var(--thm-bdr-color);
|
|
color: var(--thm-gray);
|
|
}
|
|
|
|
.case-two__btn-two span {
|
|
color: var(--thm-gray);
|
|
}
|
|
|
|
.case-two__btn-two:hover span {
|
|
color: var(--thm-white);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* End */ |