注释__何家燕 (#7)
Co-authored-by: pifh2pw87 <3276264739@qq.com> Co-committed-by: pifh2pw87 <3276264739@qq.com>develop
parent
cd8fcbf6d5
commit
a60905a41e
@ -1,133 +1,141 @@
|
||||
body{
|
||||
background: white;
|
||||
color: #DDD;
|
||||
font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif;
|
||||
body {
|
||||
background: white; /* 设置背景颜色为白色 */
|
||||
color: #DDD; /* 设置文本颜色为浅灰色 */
|
||||
font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; /* 设置字体 */
|
||||
}
|
||||
.border{
|
||||
height: 99%;
|
||||
width: 30%;
|
||||
|
||||
.border {
|
||||
height: 99%; /* 设置高度为父容器的99% */
|
||||
width: 30%; /* 设置宽度为父容器的30% */
|
||||
}
|
||||
.rain{
|
||||
height: 400px;
|
||||
width: 35%;
|
||||
|
||||
.rain {
|
||||
height: 400px; /* 设置固定高度为400像素 */
|
||||
width: 35%; /* 设置宽度为父容器的35% */
|
||||
}
|
||||
/* Layout with mask */
|
||||
.rain{
|
||||
padding: 10px 12px 12px 10px;
|
||||
-moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset;
|
||||
-webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset;
|
||||
box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset;
|
||||
margin: 100px auto;
|
||||
|
||||
/* 使用遮罩布局 */
|
||||
.rain {
|
||||
padding: 10px 12px 12px 10px; /* 设置内边距 */
|
||||
-moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Firefox阴影效果 */
|
||||
-webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Webkit阴影效果 */
|
||||
box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* 标准阴影效果 */
|
||||
margin: 100px auto; /* 设置外边距，使元素居中 */
|
||||
}
|
||||
/* Artifical "border" to clear border to bypass mask */
|
||||
.border{
|
||||
padding: 1px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
/* 人工“边框”以清除遮罩 */
|
||||
.border {
|
||||
padding: 1px; /* 设置内边距 */
|
||||
-moz-border-radius: 5px; /* Firefox圆角效果 */
|
||||
-webkit-border-radius: 5px; /* Webkit圆角效果 */
|
||||
border-radius: 5px; /* 标准圆角效果 */
|
||||
}
|
||||
|
||||
.border,
|
||||
.rain,
|
||||
.border.start,
|
||||
.rain.start{
|
||||
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
|
||||
background-position: 0 0, 0 0, 0 0, 0 0;
|
||||
/* Blue-ish Green Fallback for Mozilla */
|
||||
.rain.start {
|
||||
background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; /* 设置背景重复模式 */
|
||||
background-position: 0 0, 0 0, 0 0, 0 0; /* 设置背景位置 */
|
||||
/* Firefox下的蓝色渐变背景 */
|
||||
background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
|
||||
/* Add "Highlight" Texture to the Animation */
|
||||
/* 添加动画纹理 */
|
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
|
||||
/* Starting Color */
|
||||
/* 起始颜色 */
|
||||
background-color: #39f;
|
||||
/* Just do something for IE-suck */
|
||||
/* IE滤镜效果 */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
|
||||
}
|
||||
|
||||
/* Non-keyframe fallback animation */
|
||||
/* 非关键帧动画回退 */
|
||||
.border.end,
|
||||
.rain.end{
|
||||
-moz-transition-property: background-position;
|
||||
-moz-transition-duration: 30s;
|
||||
-moz-transition-timing-function: linear;
|
||||
-webkit-transition-property: background-position;
|
||||
-webkit-transition-duration: 30s;
|
||||
-webkit-transition-timing-function: linear;
|
||||
-o-transition-property: background-position;
|
||||
-o-transition-duration: 30s;
|
||||
-o-transition-timing-function: linear;
|
||||
transition-property: background-position;
|
||||
transition-duration: 30s;
|
||||
transition-timing-function: linear;
|
||||
background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;
|
||||
.rain.end {
|
||||
-moz-transition-property: background-position; /* Firefox过渡属性 */
|
||||
-moz-transition-duration: 30s; /* Firefox过渡持续时间 */
|
||||
-moz-transition-timing-function: linear; /* Firefox过渡时间函数 */
|
||||
-webkit-transition-property: background-position; /* Webkit过渡属性 */
|
||||
-webkit-transition-duration: 30s; /* Webkit过渡持续时间 */
|
||||
-webkit-transition-timing-function: linear; /* Webkit过渡时间函数 */
|
||||
-o-transition-property: background-position; /* Opera过渡属性 */
|
||||
-o-transition-duration: 30s; /* Opera过渡持续时间 */
|
||||
-o-transition-timing-function: linear; /* Opera过渡时间函数 */
|
||||
transition-property: background-position; /* 标准过渡属性 */
|
||||
transition-duration: 30s; /* 标准过渡持续时间 */
|
||||
transition-timing-function: linear; /* 标准过渡时间函数 */
|
||||
background-position: -5400px 0, -4800px 0, -4200px 0, -3600px 0; /* 设置背景位置 */
|
||||
}
|
||||
|
||||
/* Keyfram-licious animation */
|
||||
/* 关键帧动画 */
|
||||
@-webkit-keyframes colors {
|
||||
0% {background-color: pink;}
|
||||
15% {background-color: hotpink;}
|
||||
30% {background-color: rosybrown;}
|
||||
45% {background-color: steelblue;}
|
||||
60% {background-color: black;}
|
||||
75% {background-color: #c9c0d3;}
|
||||
90% {background-color: darkgreen;}
|
||||
100% {background-color: orange;}
|
||||
}
|
||||
.border,.rain{
|
||||
-webkit-animation-direction: normal;
|
||||
-webkit-animation-duration: 20s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
-webkit-animation-name: colors;
|
||||
-webkit-animation-timing-function: ease;
|
||||
0% {background: pink;} /* 开始时的颜色 */
|
||||
15% {background: hotpink;} /* 15%时的颜色 */
|
||||
30% {background: rosybrown;} /* 30%时的颜色 */
|
||||
45% {background: steelblue;} /* 45%时的颜色 */
|
||||
60% {background: black;} /* 60%时的颜色 */
|
||||
75% {background: #c9c0d3;} /* 75%时的颜色 */
|
||||
90% {background: darkgreen;} /* 90%时的颜色 */
|
||||
100% {background: orange;} /* 结束时的颜色 */
|
||||
}
|
||||
|
||||
/* In-Active State Style */
|
||||
.border.unfocus{
|
||||
background: #333 !important;
|
||||
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
|
||||
-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
|
||||
box-shadow: 0px 0px 15px rgba(255,255,255,.2);
|
||||
-webkit-animation-name: none;
|
||||
.border,
|
||||
.rain {
|
||||
-webkit-animation-direction: normal; /* Webkit动画方向 */
|
||||
-webkit-animation-duration: 20s; /* Webkit动画持续时间 */
|
||||
-webkit-animation-iteration-count: infinite; /* Webkit动画迭代次数 */
|
||||
-webkit-animation-timing-function: ease; /* Webkit动画时间函数 */
|
||||
-webkit-animation-name: colors; /* Webkit动画名称 */
|
||||
}
|
||||
.rain.unfocus{
|
||||
background: #000 !important;
|
||||
-webkit-animation-name: none;
|
||||
|
||||
/* 无焦点状态样式 */
|
||||
.border.unfocus {
|
||||
background: #333 !important; /* 强制背景颜色 */
|
||||
-moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Firefox阴影效果 */
|
||||
-webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Webkit阴影效果 */
|
||||
box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* 标准阴影效果 */
|
||||
-webkit-animation-name: none; /* Webkit无动画 */
|
||||
}
|
||||
|
||||
/* Regular Form Styles */
|
||||
form{
|
||||
background: darkred;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
height: 100%;
|
||||
width: 335%;
|
||||
background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, white, lightblue);
|
||||
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue));
|
||||
.rain.unfocus {
|
||||
background: #000 !important; /* 强制背景颜色 */
|
||||
-webkit-animation-name: none; /* Webkit无动画 */
|
||||
}
|
||||
form label{
|
||||
display: block;
|
||||
padding: 10px 10px 5px 15px;
|
||||
font-size: 20px;
|
||||
color: hotpink;
|
||||
|
||||
/* 表单样式 */
|
||||
form {
|
||||
background: darkred; /* 设置背景颜色为深红色 */
|
||||
-moz-border-radius: 5px; /* Firefox圆角效果 */
|
||||
-webkit-border-radius: 5px; /* Webkit圆角效果 */
|
||||
border-radius: 5px; /* 标准圆角效果 */
|
||||
height: 100%; /* 设置高度为父容器的100% */
|
||||
width: 335%; /* 设置宽度为父容器的335% */
|
||||
background: -moz-radial-gradient(center 46% 90deg, closest-corner, white, lightblue); /* Firefox径向渐变背景 */
|
||||
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue));/* Webkit径向渐变背景 */
|
||||
}
|
||||
|
||||
form textarea{
|
||||
display: block;
|
||||
margin: 5px 10px 10px 15px;
|
||||
width: 85%;
|
||||
background: #f0f8ff;
|
||||
-moz-box-shadow: 0px 0px 4px grey inset;
|
||||
-webkit-box-shadow: 0px 0px 4px grey inset;
|
||||
box-shadow: 0px 0px 4px grey inset;
|
||||
outline: 1px solid black;
|
||||
border: 1px solid grey;
|
||||
padding: 5px;
|
||||
color: black;
|
||||
font-size: 16px;
|
||||
form label {
|
||||
display: block; /* 块级显示 */
|
||||
padding: 10px 15px 10px 15px; /* 设置内边距 */
|
||||
font-size: 20px; /* 设置字体大小 */
|
||||
color: hotpink; /* 设置字体颜色 */
|
||||
}
|
||||
form textarea:focus{
|
||||
outline: 2px solid white;
|
||||
color: #c0c0c0;
|
||||
background-color: white;
|
||||
|
||||
form input {
|
||||
display: block; /* 块级显示 */
|
||||
margin: 5px 10px 10px 15px; /* 设置外边距 */
|
||||
width: 85%; /* 设置宽度为父容器的85% */
|
||||
background: #f0f8ff; /* 设置背景颜色 */
|
||||
-moz-box-shadow: 0px 0px 4px grey inset; /* Firefox阴影效果 */
|
||||
-webkit-box-shadow: 0px 0px 4px grey inset; /* Webkit阴影效果 */
|
||||
box-shadow: 0px 0px 4px grey inset; /* 标准阴影效果 */
|
||||
outline: 1px solid black; /* 设置轮廓线 */
|
||||
border: 1px solid grey; /* 设置边框 */
|
||||
padding: 5px; /* 设置内边距 */
|
||||
color: black; /* 设置字体颜色 */
|
||||
font-size: 16px; /* 设置字体大小 */
|
||||
}
|
||||
|
||||
form input:focus {
|
||||
outline: 2px solid white; /* 设置聚焦时的轮廓线 */
|
||||
color: #c0c0c0; /* 设置聚焦时的字体颜色 */
|
||||
background-color: white; /* 设置聚焦时的背景颜色 */
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue