用户:Nannnnn/代码测试/common.css:修订间差异
来自Limbo Wiki
< 用户:Nannnnn | 代码测试
无编辑摘要 标签:(旧)WikiEditor |
无编辑摘要 标签:手工回退 (旧)WikiEditor |
||
(未显示同一用户的15个中间版本) | |||
第1行: | 第1行: | ||
/* | |||
body { | body { | ||
background-color: #000080; | background-color: #000080; | ||
opacity:0.3; | opacity:0.3; | ||
} | } | ||
*/ | |||
/*button*/ | |||
.old { | .old { | ||
border-radius: 0; | border-radius: 0; | ||
第45行: | 第46行: | ||
color:White; | color:White; | ||
} | } | ||
/*ad*/ | /*ad*/ | ||
第133行: | 第135行: | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
} | } | ||
/*变色动效*/ | |||
#myDIV | |||
{ | |||
width:100px; | |||
height:100px; | |||
background:red; | |||
animation-name: mymove; | |||
animation-duration:5s; | |||
animation-iteration-count: infinite; | |||
} | |||
@keyframes mymove | |||
{ | |||
0% {background-color: red;} | |||
25% {background-color: yellow;} | |||
50% {background-color: green;} | |||
75% {background-color: blue;} | |||
100% {background-color: red;} | |||
} | |||
#colorful | |||
{ | |||
background:black; | |||
animation-name: colorfulmove; | |||
animation-duration:5s; | |||
animation-iteration-count: infinite; | |||
animation-direction: alternate; | |||
} | |||
@keyframes colorfulmove | |||
{ | |||
from {background-color:black;color:white;} | |||
to {background-color:white;color:black;} | |||
} | |||
#ADmove | |||
{ | |||
animation-name: admove; | |||
animation-duration:3s; | |||
animation-iteration-count: infinite; | |||
} | |||
@keyframes admove | |||
{ | |||
0% {left:100px; top:100px;} | |||
25% {left:200px; top:100px;} | |||
50% {left:200px; top:200px;} | |||
75% {left:100px; top:200px;} | |||
100% {left:100px; top:100px;} | |||
} | |||
/*rili*/ | |||
body{ | |||
margin: 0; /*外边距*/ | |||
padding: 0; /*内边距*/ | |||
display: flex; /*盒模型*/ | |||
justify-content: center; /*主轴居中*/ | |||
align-items: center; /*项目居中*/ | |||
height: 100vh; /*高度*/ | |||
background-color: #352b48; /*背景颜色*/ | |||
font-family: sans-serif; /*字体*/ | |||
} | |||
.calendar{ | |||
position: relative; | |||
background-color: #fff; | |||
width: 800px; | |||
height: 450px; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
border: 15px solid #fff; /*边框*/ | |||
box-shadow: 0 15px 35px rgba(0,0,0,0.5); | |||
} | |||
.calendar .date{ | |||
width: 400px; | |||
padding: 30px; | |||
box-sizing: border-box; /*盒子大小规则*/ | |||
} | |||
.calendar .date { | |||
margin: 0 0 20px; | |||
padding: 0; | |||
font-size: 24px; /*字体大小*/ | |||
font-weight: 500; /*字体维度*/ | |||
text-align: center; /*字体居中*/ | |||
user-select: none; /*不可选中*/ | |||
text-transform: capitalize; /*首字母大写*/ | |||
} | |||
.calendar .date .days{ | |||
display: flex; | |||
flex-wrap: wrap; /*可换行*/ | |||
} | |||
.calendar .date .days .day, | |||
.calendar .date .days .number{ | |||
width: 48px; | |||
height: 48px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
user-select: none; | |||
} | |||
.calendar .date .days .day:first-child, | |||
.calendar .date .days .number:nth-child(7n+1){ /*7个为一组,每组第一个*/ | |||
color: #f44336; | |||
font-weight: 600; | |||
} | |||
.calendar .img{ | |||
position: relative; /*定位*/ | |||
top:0; | |||
right: 0; | |||
width: 400px; | |||
height: 100%; | |||
background-color: #000; | |||
user-select: none; | |||
} | |||
.calendar .img img{ | |||
position: relative; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; /*元素内容如何适应屏幕*/ | |||
} |
2023年7月25日 (二) 06:52的最新版本
/* body { background-color: #000080; opacity:0.3; } */ /*button*/ .old { border-radius: 0; width: 4em; text-align: center; height: calc(1.4em + 4px); border-color: Gray; background-color: Tomato; color:#000080; } .green { border-top-right-radius: 10px; border-bottom-left-radius:2em; width: 6em; text-align: right; height: calc(2em + 6px); border-color: pink; color:#230080; background-color:green; } .blue { border-top-left-radius: 3em; border-bottom-right-radius:2em; width: 2em; text-align: left; height: calc(1em + 2px); border-color: black; color:#005080; background-color:blue; } .white { width: 20em; text-align: left; border-color: White; background-color: White; color:White; } /*ad*/ .yeshu-center { margin: 0 .4rem; background-color: #FEEF50; padding: .1rem; } .yeshu-title { color: #000; height: 5%; font-size: 1.1rem; } .yeshu-inner { background-color: #0021FC; border: .04rem solid #000000; color: #ffffff; padding: .04rem .04rem .4rem; } .yeshu-zhengzong { font-size: 1.1rem; vertical-align: baseline; margin: .1rem 0; } .yeshu-brand { border: .04rem solid #FEEF50; border-radius: 0.5rem; background-color: #FD0000; padding: .1rem; font-size: 2.5rem; } .yeshu-year { margin: .1rem 0; text-shadow: -.04rem -.04rem 0 #000, .04rem -.04rem 0 #000, -.04rem .04rem 0 #000, .04rem .04rem 0 #000; font-size: 2.1rem; } .yeshu-island { color: #FEEF50; font-size: 1.2rem; } .yeshu-fresh { border: .08rem solid #FD0000; border-radius: .1rem; background-color: #FEEF50; color: #FD0000; margin: .1rem -.1rem; padding: .1rem; font-size: 1.2rem; } .yeshu-xianzha { color: #FEEF50; font-size: 2.7rem; text-shadow: -.04rem -.04rem 0 #000, .04rem -.04rem 0 #000, -.04rem .04rem 0 #000, .04rem .04rem 0 #000; } .yeshu-no-addon { border: .06rem solid #FEEF50; border-radius: 0.3rem; background-color: #FD0000; padding: .1rem; margin: -.1rem .1rem; color: #ffffff; } .yeshu-no-addon > p { line-height: 1; margin: 0; font-size: 1.2rem; } .yeshu-no-addon > p:first-child { font-size: 1.5rem; } /*变色动效*/ #myDIV { width:100px; height:100px; background:red; animation-name: mymove; animation-duration:5s; animation-iteration-count: infinite; } @keyframes mymove { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: green;} 75% {background-color: blue;} 100% {background-color: red;} } #colorful { background:black; animation-name: colorfulmove; animation-duration:5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes colorfulmove { from {background-color:black;color:white;} to {background-color:white;color:black;} } #ADmove { animation-name: admove; animation-duration:3s; animation-iteration-count: infinite; } @keyframes admove { 0% {left:100px; top:100px;} 25% {left:200px; top:100px;} 50% {left:200px; top:200px;} 75% {left:100px; top:200px;} 100% {left:100px; top:100px;} } /*rili*/ body{ margin: 0; /*外边距*/ padding: 0; /*内边距*/ display: flex; /*盒模型*/ justify-content: center; /*主轴居中*/ align-items: center; /*项目居中*/ height: 100vh; /*高度*/ background-color: #352b48; /*背景颜色*/ font-family: sans-serif; /*字体*/ } .calendar{ position: relative; background-color: #fff; width: 800px; height: 450px; display: flex; justify-content: space-between; align-items: center; border: 15px solid #fff; /*边框*/ box-shadow: 0 15px 35px rgba(0,0,0,0.5); } .calendar .date{ width: 400px; padding: 30px; box-sizing: border-box; /*盒子大小规则*/ } .calendar .date { margin: 0 0 20px; padding: 0; font-size: 24px; /*字体大小*/ font-weight: 500; /*字体维度*/ text-align: center; /*字体居中*/ user-select: none; /*不可选中*/ text-transform: capitalize; /*首字母大写*/ } .calendar .date .days{ display: flex; flex-wrap: wrap; /*可换行*/ } .calendar .date .days .day, .calendar .date .days .number{ width: 48px; height: 48px; display: flex; justify-content: center; align-items: center; user-select: none; } .calendar .date .days .day:first-child, .calendar .date .days .number:nth-child(7n+1){ /*7个为一组,每组第一个*/ color: #f44336; font-weight: 600; } .calendar .img{ position: relative; /*定位*/ top:0; right: 0; width: 400px; height: 100%; background-color: #000; user-select: none; } .calendar .img img{ position: relative; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /*元素内容如何适应屏幕*/ }