.fancy-button {
background-color: blue;
color: white;
transition: all 0.3s ease;
}
.fancy-button:hover {
background-color: red;
color: yellow;
}
/* ::before在你的元素之后添加内容 */
.fancy-button::after {
content: "?";
margin-left: 5px;
}
/* ::before在你的元素之前添加内容 */
.fancy-button::before {
content: "?♂️ ";
}
/* 每个段落第一个字母 */
.fancy-button::first-letter {
font-size: 2em;
color: #8A2BE2;
float: left;
margin-right: 5px;
}
/* 第一行 */
p::first-line {
font-weight: bold;
color: #4B0082;
}
/* ::select选中文本时生效 */
::selection {
background-color: #FFD700;
color: #000000;
}
/* 这将在带有“magical-quote”类的元素前后添加引号 */
.magical-quote::before,
.magical-quote::after {
content: '"';
font-size: 2em;
color: #FF1493;
}
@page {
size: A4;
margin: 1cm;
border: 1px;
}
@page :first {
margin-top: 2cm;
}
@keyframes 弹跳 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
.bouncy-button {
animation: 弹跳 1s 无限次;
}
@property --主颜色 {
语法: '<颜色>';
继承: false;
初始值: #ff0000;
}
.my-element {
background-color: var(--主颜色);
filter: brightness(150%)
}