Neil coding之路

Have a nice day

0%

Css linear-gradient

發表於 更新於 分類於 Disqus：

漸層 background linear-gradient

css background:linear-gradient(direction, color-stop1, color-stop2, …);

direction角度 可設為 to top,to left,to right,to left 或是 (-∞~∞deg) 預設是由0deg 由下而上

範例一

 

1
background:linear-gradient(to top,red,yellow);

linear-gradient 有一個特性為 repeat-linear-gradient 重複貼上直到填滿為止

範例二

 

 

1
2
3
4
5
6
7
8
9
10
11
12
.exmaple2_1  /*first style */
{
width:100%;
height:100px;
  background:repeating-linear-gradient(90deg,black 0%,black 5%,transparent 5%,transparent 10%);
}
.exmaple2_2 /*second style */
{
width:100%;
height:100px;
  background:repeating-linear-gradient(135deg,red 0%,red 5%,transparent 5%,transparent 10%);
}

結合上面方法做出特殊圖案

範例三

 

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
#exmaple3 {  
    height: 300px;
    width:300px;
   background:linear-gradient(45deg,#ff8000 50%,transparent 50%),linear-gradient(135deg,#f9ff21 100%,transparent 100%),linear-gradient(135deg, #12e6c8 50%, transparent 50%) 100% 0%,linear-gradient(45deg, #0000ff 100%, transparent 100%) 100% 0%,linear-gradient(135deg,#dcb5ff 50%,transparent 50%) 0% 100%,linear-gradient(135deg,#ff5da2 100%,transparent 100%) 0% 100%,linear-gradient(45deg, #8b104e 50%, transparent 50%) 100% 100%,linear-gradient(135deg, #77529e 100%, transparent 100%) 100% 100%;
   background-size:50% 50%;
   background-repeat:no-repeat;
   border-radius:50%;
   border:10px solid #ff1f5a;
   box-sizing:border-box;
   transition:0.5s all;
   box-shadow:0px 0px 10px gray;
   position:relative;
}
#exmaple3::after
{
  content:'';
  position:absolute;
  display:block;
  border:1px solid #ff1f5a;
  width:10%;
  height:10%;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:inset 0px 0px 5px white;
}
#exmaple3:hover
{
  transform:rotate(360deg);
}