130 lines
3.1 KiB
CSS
130 lines
3.1 KiB
CSS
/* 引用网络字体（Kanit字体） */
|
||
@import url("http://fonts.googleapis.com/css?family=Kanit");
|
||
|
||
*{
|
||
/* 初始化 */
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
body{
|
||
background-color: #333;
|
||
}
|
||
.star{
|
||
width: 36px;
|
||
height: 36px;
|
||
/* 绝对定位 计算位置 */
|
||
position: absolute;
|
||
left: calc(50% - 18px);
|
||
top: calc(20vh - 22px);
|
||
z-index: 2;
|
||
background-color: #ffce54;
|
||
/* 裁切成五角星 */
|
||
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
|
||
transition: 0.3s;
|
||
}
|
||
/* 鼠标移入小星星，星星变图片 */
|
||
.star:hover{
|
||
/* 设置背景图片 不平铺 */
|
||
background: url("../images/op1/1.jpg") no-repeat;
|
||
/* 保持原有尺寸比例，裁切长边 */
|
||
background-size: cover;
|
||
background-position: center;
|
||
width: 50vw;
|
||
height: 50vh;
|
||
border-radius: 20px;
|
||
/* 取消裁切五角星 */
|
||
clip-path: none;
|
||
/* 计算left，让其居中 */
|
||
left: calc(50% - 25vw);
|
||
}
|
||
/* 再加一句圣诞快乐文本 */
|
||
.star::before{
|
||
/* 默认没有文字 */
|
||
content: "";
|
||
/* 绝对定位 */
|
||
position: absolute;
|
||
top: 55vh;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #555;
|
||
font-size: 6vw;
|
||
font-family: "Kanit";
|
||
font-weight: 900;
|
||
/* 不让文字换行 */
|
||
white-space: nowrap;
|
||
/* 文字发光效果 */
|
||
text-shadow: 0 0 10px #fff,
|
||
0 0 20px #fff,
|
||
0 0 40px #fff,
|
||
0 0 80px #fff,
|
||
0 0 120px #fff,
|
||
0 0 180px #fff;
|
||
}
|
||
/* 鼠标移入，设置文本 */
|
||
.star:hover::before{
|
||
content: "Merry Christmas";
|
||
}
|
||
ul{
|
||
padding: 0;
|
||
}
|
||
ul li{
|
||
list-style: none;
|
||
}
|
||
.tree li{
|
||
position: absolute;
|
||
top: 20vh;
|
||
right: 50%;
|
||
width: 1px;
|
||
/* 通过var函数调用自定义属性--h，设置每一条线的高度 */
|
||
height: var(--h);
|
||
/* 线条背景颜色，透明往浅绿色渐变 */
|
||
background: linear-gradient(transparent,rgba(46,204,113,0.35));
|
||
/* 设置旋转元素的基点位置 */
|
||
transform-origin: 50% 0;
|
||
/* 执行动画：动画名 时长 加速后减速 无限次播放 */
|
||
animation: swing 4s ease-in-out infinite;
|
||
/* 通过var函数调用自定义属性--d，设置每一条线的动画延迟时间 */
|
||
animation-delay: var(--d);
|
||
}
|
||
/* 彩色小圆点 */
|
||
.tree li::before{
|
||
content: "";
|
||
position: absolute;
|
||
left: -1px;
|
||
bottom: -1px;
|
||
width: 4px;
|
||
height: 4px;
|
||
border-radius: 50%;
|
||
}
|
||
/* 为下标是4的倍数的所有小圆点设置背景色 */
|
||
.tree li:nth-child(4n)::before{
|
||
background-color: #d8334a;
|
||
}
|
||
/* 为下标是4的倍数加1的所有小圆点设置背景色 */
|
||
.tree li:nth-child(4n+1)::before{
|
||
background-color: #ffce54;
|
||
}
|
||
/* 为下标是4的倍数加2的所有小圆点设置背景色 */
|
||
.tree li:nth-child(4n+2)::before{
|
||
background-color: #2ecc71;
|
||
}
|
||
/* 为下标是4的倍数加3的所有小圆点设置背景色 */
|
||
.tree li:nth-child(4n+3)::before{
|
||
background-color: #5d9cec;
|
||
}
|
||
|
||
/* 定义动画 */
|
||
@keyframes swing {
|
||
0%,100%{
|
||
transform: rotateZ(-30deg);
|
||
}
|
||
5%,45%{
|
||
opacity: 0.25;
|
||
}
|
||
50%,100%,0%{
|
||
opacity: 1;
|
||
}
|
||
50%{
|
||
transform: rotateZ(30deg);
|
||
}
|
||
} |