/* å—体 */
@font-face{
font-family: "Opposans";
src:url("../font/OPPOSans-R.ttf");
font-weight: normal;
font-style: normal;
}
/* @font-face {
font-family: Emoji;
src: local("Apple Color Emojiji"), local("Segoe UI Emoji"), local("Segoe UI Symbol"), local("Noto Color Emoji");
unicode-range: U+1F000-1F644, U+203C-3299;
} */
.opposans{
font-family: "Opposans",sans-serif;
}
body{
position: relative;
/* font-family: 'Helvetica Neue','Microsoft YaHei','Noto Sans','Arial',sans-serif; */
font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica, Arial, sans-serif;
}
*{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.full-a{
width:100%;
height:100%;
display: block;
}
.left{
float:left;
}
.right{
float:right;
}
.text-center{
text-align: center;
}
.text-justify{
text-align: justify;
}
.bold{
font-weight: bold;
}
.relative{
position: relative;
}
.inline-block{
display: inline-block;
}
.transition{
transition: 0.3s all ease;
}
.transition-text{
transition: 0.2s all ease;
}
.transition-pic{
transition: 0.4s all ease;
}
.transition-slow{
transition: 0.5s all ease;
}
.line1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
overflow: hidden;
}
.line3{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
}
.lh-default{
line-height: 1.5;
}
.pointer{
cursor: pointer;
}
.vertical-align-top{
vertical-align: top;
}
.vertical-align-middle{
vertical-align: middle;
}
/* 颜色 */
.subject-color{
color:#FF3226;
}
.color-tit{
color:#1C2236;
}
.color-subtit{
color:#454B5F;
}
.color-gray{}
/* 图片 cover */
.img-cover img{
width:100%;
height:100%;
object-fit: cover;
}
/* breathe动画 */
@keyframes breathe{
0% {
transform: scale(1);
opacity: 1;
}
25% {
transform: scale(1.05);
opacity: 0.9;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
75% {
transform: scale(1.05);
opacity: 0.9;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* 类似钟摆左å³æ‘‡æ‘†åŠ¨ç”» */
@keyframes shake{
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(30deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-30deg);
}
100% {
transform: rotate(0deg);
}
}
/* banneré®ç½©å±‚动画 首页 */
@keyframes myfirst {
0% {
opacity: 0;
}
1% {
opacity: 1;
left: -20%;
bottom: 0;
z-index: 10;
transform: scale(1);
}
25% {
transform: scale(1.6);
bottom: -10%;
left: 40%;
opacity: 1;
z-index: 10;
}
100% {
transform: scale(2);
left: 110%;
opacity: 1;
z-index: 10;
}
}
/* 按钮 水波纹 */
@keyframes rippleDrop {
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
/* 首页product å‘ä¸‹ç¿»æ»šå›¾æ ‡åŠ¨ç”» */
/* @keyframes arrow{
0%,100%
{
top:28px;
opacity:1;
}
50%
{
top:46px;
opacity:0.5;
}
} */
/* 浮窗 弹窗打开动画 */
@keyframes slideInUp {
0%{
transform:translate3d(0,100%,0);
visibility:visible;
}
100%{
transform:translateZ(0);
}
}
/* æ–‡å—打å—效果动画 */
/* 定义打å—动画 */
/* @keyframes typing {
from { width: 0; }
to { width: 100%; }
} */
/* å®šä¹‰å…‰æ ‡é—ªçƒåŠ¨ç”» */
/* @keyframes blink-caret {
from, to { opacity: 0; }
50% { opacity: 1; }
} */
/* .typing {
white-space: nowrap;
overflow: hidden;
animation:typing 3s steps(12), blink-caret 1s step-end infinite;
} */
/* æ¸å˜èƒŒæ™¯æµåŠ¨æ•ˆæžœ */
@keyframes flow {
0% {
background-position: 100% 50%;
}
50% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.flow-bg{
background-size: 150% auto;
background-position: 100% 50%;
animation: flow 5s ease-in-out infinite;
}
/* 弹窗ç®å¤´æ»šåŠ¨æ•ˆæžœ */
@keyframes arrowRun {
0% {
transform: translate3d(0%, 0%, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d
}
7% {
transform: translate3d(150%, -150%, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d
}
7.1% {
transform: translate3d(-150%, 150%, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d
}
14% {
transform: translate3d(0%, 0%, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d
}
}
/* 弹窗 */
#popup{
position: fixed;
top:0;
left:0;
width:100%;
height:0;
background: rgba(0,0,0,0.7);
z-index: 100;
}
#popup .popup{
width:260px;
height:480px;
position: absolute;
left:calc(50% - 130px);
top:calc(50% - 240px);
display: none;
}
#popup .popup .pop_con{
width:100%;
height:100%;
position: relative;
overflow: hidden;
border-radius:0 0 10px 10px;
}
#popup .pop_con .close{
position:absolute;
top:0;
right:0;
}
#popup .pop_con .close img{
width:16px;
height:16px;
}
#popup .pop_con .content_ornament{
width:100%;
height:100px;
position: absolute;
left:0;
top:80px;
background: linear-gradient(to bottom,rgba(255, 186, 186,1),rgba(255, 221, 221,1));
border-radius: 10px 10px 0 0;
z-index: 101;
}
#popup .pop_con .content_ornament img{
width:186px;
height:auto;
position: absolute;
bottom:-10px;
left:calc(50% - 93px);
}
#popup .pop_con .pop_content{
width:264px;
height:360px;
margin-left:-2px;
background:url(../images/pop_content_bg.png) no-repeat center top / cover;
position: absolute;
top:120px;
left:0;
padding:20px 20px;
box-sizing: border-box;
z-index: 102;
}
#popup .pop_con .pop_content::before{
content:"";
position: absolute;
left:0;
top:0;
width:100px;
height:3px;
clip-path: polygon(0 0,100% 0, 100% 1px,0 3px);
background-image: linear-gradient(to right,rgba(255,255,255,1),rgba(255,255,255,0));
/* æµåŠ¨ */
background-size: 200% auto;
background-position: 100% 50%;
animation: flow 2s ease-in-out infinite;
}
#popup .pop_con .pop_content::after{
content:"";
position: absolute;
right:0;
top:0;
width:100px;
height:3px;
clip-path: polygon(0 0,100% 0, 100% 3px,0 1px);
background-image: linear-gradient(to left,rgba(255,255,255,1),rgba(255,255,255,0));
/* æµåŠ¨ */
background-size: 200% auto;
background-position: 100% 50%;
animation: flow 2s ease-in-out infinite;
}
#popup .pop_con .pop_content li{
font-size: 16px;
color:#1C2236;
font-weight: bold;
line-height: 32px;
padding-left: 8px;
box-sizing: border-box;
position: relative;
}
#popup .pop_con .pop_content li::before{
content: "";
width:6px;
height:6px;
border-radius:50%;
background:#E60411;
position: absolute;
top:14px;
left:0;
}
#popup .pop_con .pop_content .ewm{
width:100%;
height:128px;
text-align: center;
margin-top: 10px;
}
#popup .pop_con .pop_content .ewm img{
height:100%;
width:auto;
}
#popup .pop_con .pop_content .profile{
text-align: center;
}
#popup .pop_con .pop_content .profile{
font-size: 16px;
color:#383838;
}
#popup .pop_con .pop_content .profile span{
font-size: 24px;
color:#E60411;
}
#popup .pop_con .pop_content .btn{
width:200px;
height:48px;
line-height: 48px;
border-radius: 24px;
background-image: linear-gradient(to right,rgb(240, 52, 0),rgb(252, 123, 53));
text-align: center;
margin:10px auto 0;
padding:0 25px;
box-sizing: border-box;
}
#popup .pop_con .pop_content .btn span{
font-size: 18px;
color:#fff;
font-weight: bold;
float:left;
}
#popup .pop_con .pop_content .btn .arrow_box{
width:40px;
height:40px;
overflow: hidden;
float:right;
margin-top: 4px;
}
#popup .pop_con .pop_content .btn img{
width:20px;
height:20px;
vertical-align: middle;
animation: arrowRun 5s infinite;
}
/* 智云 */
@keyframes zhiyun_s51{
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes zhiyun_s52{
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200%);
}
}
.site_list{
width:60%;
margin: 20px auto 50px;
height:100px;
overflow: hidden;
}
.site_list a{
color: rgba(250,250,250,.6);
padding: 10px 30px 10px 0px;
display: inline-block;
float: left;
animation: scrollText 5s linear infinite;
}
@keyframes scrollText {
from {
transform: translateY(0); /* åˆå§‹ä½ç½® */
}
to {
transform: translateY(-100%); /* å‘上移动100%，å³æ–‡æœ¬çš„高度 */
}
}