순수한 HTML5_html5 튜토리얼 기술을 사용하여 그린 매우 아름다운 시계

오늘 저는 순수 HTML5로 구현된 매우 아름다운 시계를 여러분과 공유하고 싶습니다. 전체 인터페이스는 html5로 그려졌습니다. 렌더링을 살펴보겠습니다.

구현 코드.

　htm 코드:

XML/HTML 코드클립보드에 콘텐츠 복사

1. <div class="컨테이너" >  
2.         <svg 너비="600"  높이="600" 클래스='svg-element'>  
3.        
4.     <필터 id="f4"  x="-50%" y ="-20%" 너비="200%" 높이="140%">  
5.       <feOffset 결과="offOut"  in="SourceAlpha" dx="0" dy="25" / >  
6.       <feGaussianBlur 결과="blurOut"  in="offOut" 표준편차="10" />  
7.       <feBlend in="SourceGraphic"  in2="blurOut" 모드="정상" />  
8.     필터>  
9.        
10.   <필터 id="blurred- 출처" x="-50%" y="-20%" 너비="200%" 높이="140%">  
11.     <feGaussianBlur in="color"  표준편차="5" 결과="blurOut"/>  
12.   필터>  
13.         
14.     <필터 id="inset- 그림자">  
15.         <feOffset dx="0"  디="10"/>                                                        
16.         <feGaussianBlur 표준편차="15"   결과="오프셋-흐림"/>                           
17.         <feComposite 연산자="아웃"  in="SourceGraphic" in2="오프셋-블러" 결과="역"/>   
18.         <feFlood flood-color=" 검정색" 홍수 불투명도="1" 결과="색상"/>                     
19.         <feComposite 연산자="in"  in="color" in2="역" 결과="그림자"/>                
20.         <feComponentTransfer in="shadow"  결과="그림자">                                         < ;!-- 그림자 불투명도 -->  
21.            <feFuncA type="선형"  경사="1"/>  
22.         feComponentTransfer>  
23.         <feComposite 연산자="이상"  in="그림자" in2="SourceGraphic"/>                   
24.     필터>  
25.        
26.     <필터 id="inset- 섀도우-빅">  
27.         <feOffset dx="0"  디="4"/>                                                        
28.         <feGaussianBlur 표준편차="2"   결과="오프셋-흐림"/>                           
29.         <feComposite 연산자="아웃"  in="SourceGraphic" in2="오프셋-블러" 결과="역"/>   
30.         <feFlood flood-color=" 흰색" 홍수 불투명도="1" 결과="색상"/>                     
31.         <feComposite 연산자="in"  in="color" in2="역" 결과="그림자"/>                
32.         <feComponentTransfer in="shadow"  결과="그림자">                                         < ;!-- 그림자 불투명도 -->  
33.            <feFuncA type="선형"  경사="0.5"/>  
34.         feComponentTransfer>  
35.         <feComposite 연산자="이상"  in="그림자" in2="SourceGraphic"/>                   
36.     필터>  
37.        
38.     <필터 id="inset- 그림자 큰 바닥">  
39.         <feOffset dx="0"  디="10"/>                                                        
40.         <feGaussianBlur 표준편차="2"   결과="오프셋-흐림"/>                           
41.         <feComposite 연산자="아웃"  in="SourceGraphic" in2="오프셋-블러" 결과="역"/>   
42.         <feFlood flood-color=" #FFF" 홍수 불투명도="1" 결과 ="색상"/>                     
43.         <feComposite 연산자="in"  in="color" in2="역" 결과="그림자"/>                
44.         <feComponentTransfer in="shadow"  결과="그림자">                                         < ;!-- 그림자 불투명도 -->  
45.            <feFuncA type="선형"  경사="0.5"/>  
46.         feComponentTransfer>  
47.         <feComposite 연산자="이상"  in="그림자" in2="SourceGraphic" 결과='final-shadow-1'/>                      
48.          
49.         <feOffset dx="0"  dy="-12"/>                                                        
50.         <feGaussianBlur 표준편차="2"   결과="오프셋-흐림"/>                           
51.         <feComposite 연산자="아웃"  in="final-shadow-1" in2="오프셋-흐림" 결과="역"/ >   
52.         <feFlood flood-color=" #69c39b" 홍수 불투명도="1" 결과 ="색상"/>                     
53.         <feComposite 연산자="in"  in="color" in2="역" 결과="그림자"/>                
54.         <feComponentTransfer in="shadow"  결과="그림자">                                         < ;!-- 그림자 불투명도 -->  
55.            <feFuncA type="선형"  경사="0.5"/>  
56.         feComponentTransfer>  
57.         <feComposite 연산자="이상"  in="그림자" in2="final-shadow-1" 결과='final-shadow-2'/>                     
58.          
59.     필터>  
60.        
61.     <linearGradient id="LG"   
62.                    gradientTransform="회전(90 .5 .5)">
63.       <중지 id="s0"  오프셋="0" 스톱 컬러 ="#d6f8e9"/>  
64.       <중지 id="s2"  오프셋="1" 스톱 컬러 ="#9ee1c4"/>  
65.     linearGradient>  
66.        
67.     <linearGradient id="LG2"   
68.                    gradientTransform="회전(-90 .5 .5)">         
69.       <중지 id="s0"  오프셋="0.07" 스톱 컬러 ="#fdfefe"/>  
70.       <중지 id="s1"  오프셋="0.5" 스톱 컬러 ="#98e2c2"/>  
71.       <중지 id="s2"  오프셋="0.8" 스톱 컬러 ="#79c9a7"/>  
72.       <중지 id="s3"  오프셋="1" 스톱 컬러 ="#5fbc95"/>  
73.     linearGradient>  
74.        
75.     <linearGradient id="arrow1"   
76.                    gradientTransform="회전(-90 .5 .5)">         
77.       <중지 id="s0"  오프셋="0" 스톱 컬러 ="#07594f"/>  
78.       <중지 id="s2"  오프셋="1" 스톱 컬러 ="#01443c"/>  
79.     linearGradient>  
80.        
81.     <linearGradient id="arrowRed"   
82.                    gradientTransform="회전(-90 .5 .5)">         
83.       <중지 id="s0"  오프셋="0" 스톱 컬러 ="#fd5959"/>  
84.       <중지 id="s2"  오프셋="1" 스톱 컬러 ="#fe7c7c"/>  
85.     linearGradient>  
86.        
87.     <linearGradient id="center- 손잡이 바깥쪽"  
88.                    gradientTransform="회전(90 .5 .5)">
89.       <중지 id="s0"  오프셋="0" 스톱 컬러 ="#fffefe"/>  
90.       <중지 id="s2"  오프셋="1" 스톱 컬러 ="#86ecdb"/>  
91.     linearGradient>  
92.        
93.         <linearGradient id="center- 손잡이 내부"  
94.                    gradientTransform="회전(90 .5 .5)">
95.       <중지 id="s0"  오프셋="0" 스톱 컬러 ="#a0dcd2"/>  
96.       <중지 id="s2"  오프셋="1" 스톱 컬러 ="#dff9ef"/>  
97.     linearGradient>  
98.        
99.     <g 변형="번역( 50, 20)">  
100.          
101.       <직선 x="0"  y="0"  
102.           너비="382" 높이="382"    
103.           채우기="url(#LG)"  
104.           필터="url(#inset-shadow-big-bottom)"  
105.           rx="75" ry="105" />  
106.        
107.     <원 cx="191"  cy="191" r="155" 채우기="url(#LG2)"/>   
108.     <원 cx="191"  cy="191" r="130" 채우기="#53d2c5"/>   
109.     <원 cx="191"  cy="191" r="130" 채우기="#53d2c5"  필터="url(#inset-shadow)" />  
110.        
111.       <g 너비="200"  높이="200"  
112.        변형="번역(100, 100)">  
113.        <animateTransform attributeName="변형"  유형="번역" 기간="4s"    
114.        값="191,191;191,191" 반복 횟수 ="무기한"/>  
115.        <animateTransform attributeName="변형"  가산="합계" 유형="회전"    
116.        기간="86400s" 값="200, 0 0;550 0 0" 반복 횟수="무한" />  
117.          
118.           <직선 x="0"  y="0"  
119.                너비="22" 높이="70"    
120.                채우기="url(#arrow1)"  
121.                채우기 불투명도="0.5"  
122.                필터="url(#blurred-source)"  
123.                rx="10" ry="10"  
124.                변환="번역(-11, -15)" /> ;  
125.     g>     
126.          
127.     <g 너비="200"  높이="200"  
128.        변형="번역(100, 100)">  
129.        <animateTransform attributeName="변형"  유형="번역" 기간="4s"    
130.        값="191,191;191,191" 반복 횟수 ="무기한"/>  
131.        <animateTransform attributeName="변형"  가산="합계" 유형="회전"    
132.        기간="86400s" 값="200, 0 0;550 0 0" 반복 횟수="무한" />  
133.          
134.           <직선 x="0"  y="0"  
135.                너비="20" 높이="70"    
136.                채우기="url(#arrow1)"  
137.                rx="10" ry="10"  
138.                변형="번역(-10, -10)" /> ;  
139.     g>  
140.        
141.       <g 너비="200"  높이="200"  
142.        변형="번역(100, 100)">  
143.        <animateTransform attributeName="변형"  유형="번역" 기간="4s"    
144.        값="191,191;191,191" 반복 횟수 ="무기한"/>  
145.        <animateTransform attributeName="변형"  가산="합계" 유형="회전"    
146.        기간="3600s" 값="90,0 0;450 0 0" 반복 횟수="무한" />  
147.          
148.       <직선 x="0"  y="0"  
149.             너비="18" 높이="104"    
150.             채우기="url(#arrow1)"  
151.             채우기 불투명도="0.8"  
152.            필터="url(#blurred-source)"