1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| .box {
width: 400px;
height: 300px;
font-size: 40px;
font-weight: bold;
color: white;
text-shadow: 0px 0px 6px white, 0px 0px 6px white, 0px 0px 6px white, 0px 0px 6px white, -2px -2px 6px deeppink, 2px 2px 6px gold;
/*可以设置多个shadow，很有用*/
white-space: nowrap;
/*overflow: hidden;*/
/*text-overflow: ellipsis;*/
}           column-span 这个属性是设置在子元素上的.   HSL 比 RGB , 感觉做一些 颜色上的渐变时, 比如明暗调节时,会更方便一点?   ```
.item{
width: 500px;
height: 250px;
background: linear-gradient(0deg , red 0%, yellow 50px,transparent 50px),
linear-gradient(180deg , blue 0%, yellow 50px,transparent 50px),
radial-gradient(ellipse at center, red 0%, yellow 50px,transparent 50px);
font-family: 'FontName';
} ``` ```
.box{
margin: 100px auto;
width: 300px;
height: 300px;
/*border: 1px solid black;*/
background-image: linear-gradient(to top right,rgba(0,66,250,0.8),rgba(250,62,0,0.8));
background-size: 400% 400%;
animation: name 1s ease alternate-reverse infinite;
box-shadow: 0px 0px 5px 2px deeppink,0px 0px 5px 2px deeppink inset;
border-radius: 50%;
/*transform: scale(1,1);*/
}
/*一旦渐变，多重shadow ,以及多重背景，最后加上动画，那么出来的效果非常好。不过估计非常杀性能*/
@keyframes name{
from{background-position: 0% 0%;box-shadow: 0px 0px 5px 2px deeppink,0px 0px 5px 2px inset;
transform: scale(0.5,0.5) translate(0px,500px);
}
to{background-position: 100% 0%;box-shadow: 0px 0px 5px 2px skyblue,0px 0px 5px 2px skyblue inset;
transform: scale(1.5,1.5) translate(0px,0px);
}
} ``` ```
.box{
width: 600px;
height: 300px;
/*margin: 100px auto;*/
border-radius: 50%;
/*border: 1px solid black;*/
background: radial-gradient(circle 100px at 25% center ,purple,red,yellow 99%,transparent),
radial-gradient(circle 100px at 75% center ,purple,red,yellow 99%,transparent),
repeating-radial-gradient(circle 100px at 50% center ,purple,red,yellow 99%,blue);
animation: name 3s ease infinite alternate;
/*所以可以在同一个背景图里,存在多个渐变.在背景图中,进行简单的绘画*/
/*background: radial-gradient(ellipse closest-side,blue,red,yellow,transparent);*/
/*background: radial-gradient(ellipse farthest-corner,blue,red,yellow,transparent);*/
/*background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);*/
/*background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white)*/
display: flex;
justify-content: center;
align-items: center;
}
@keyframes name{
from{filter:grayscale(20%)}
to{filter:grayscale(80%)}
} ```
|
html
html