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

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

WBOY

풀어 주다： 2016-05-16 15:46:58

원래의

1742명이 탐색했습니다.

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

구현 코드.

　htm 코드:

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

<div class="컨테이너" >
<svg 너비="600" 높이="600" 클래스='svg-element'>
<필터 id="f4" x="-50%" y ="-20%" 너비="200%" 높이="140%">
<feOffset 결과="offOut" in="SourceAlpha" dx="0" dy="25" / >
<feGaussianBlur 결과="blurOut" in="offOut" 표준편차="10" />
<feBlend in="SourceGraphic" in2="blurOut" 모드="정상" />
필터>
<필터 id="blurred- 출처" x="-50%" y="-20%" 너비="200%" 높이="140%">
<feGaussianBlur in="color" 표준편차="5" 결과="blurOut"/>
필터>
<필터 id="inset- 그림자">
<feOffset dx="0" 디="10"/>
<feGaussianBlur 표준편차="15" 결과="오프셋-흐림"/>
<feComposite 연산자="아웃" in="SourceGraphic" in2="오프셋-블러" 결과="역"/>
<feFlood flood-color=" 검정색" 홍수 불투명도="1" 결과="색상"/>
<feComposite 연산자="in" in="color" in2="역" 결과="그림자"/>
<feComponentTransfer in="shadow" 결과="그림자"> < ;!-- 그림자 불투명도 -->
<feFuncA type="선형" 경사="1"/>
feComponentTransfer>
<feComposite 연산자="이상" in="그림자" in2="SourceGraphic"/>
필터>
<필터 id="inset- 섀도우-빅">
<feOffset dx="0" 디="4"/>
<feGaussianBlur 표준편차="2" 결과="오프셋-흐림"/>
<feComposite 연산자="아웃" in="SourceGraphic" in2="오프셋-블러" 결과="역"/>
<feFlood flood-color=" 흰색" 홍수 불투명도="1" 결과="색상"/>
<feComposite 연산자="in" in="color" in2="역" 결과="그림자"/>
<feComponentTransfer in="shadow" 결과="그림자"> < ;!-- 그림자 불투명도 -->
<feFuncA type="선형" 경사="0.5"/>
feComponentTransfer>
<feComposite 연산자="이상" in="그림자" in2="SourceGraphic"/>
필터>
<필터 id="inset- 그림자 큰 바닥">
<feOffset dx="0" 디="10"/>
<feGaussianBlur 표준편차="2" 결과="오프셋-흐림"/>
<feComposite 연산자="아웃" in="SourceGraphic" in2="오프셋-블러" 결과="역"/>
<feFlood flood-color=" #FFF" 홍수 불투명도="1" 결과 ="색상"/>
<feComposite 연산자="in" in="color" in2="역" 결과="그림자"/>
<feComponentTransfer in="shadow" 결과="그림자"> < ;!-- 그림자 불투명도 -->
<feFuncA type="선형" 경사="0.5"/>
feComponentTransfer>
<feComposite 연산자="이상" in="그림자" in2="SourceGraphic" 결과='final-shadow-1'/>
<feOffset dx="0" dy="-12"/>
<feGaussianBlur 표준편차="2" 결과="오프셋-흐림"/>
<feComposite 연산자="아웃" in="final-shadow-1" in2="오프셋-흐림" 결과="역"/ >
<feFlood flood-color=" #69c39b" 홍수 불투명도="1" 결과 ="색상"/>
<feComposite 연산자="in" in="color" in2="역" 결과="그림자"/>
<feComponentTransfer in="shadow" 결과="그림자"> < ;!-- 그림자 불투명도 -->
<feFuncA type="선형" 경사="0.5"/>
feComponentTransfer>
<feComposite 연산자="이상" in="그림자" in2="final-shadow-1" 결과='final-shadow-2'/>
필터>
<linearGradient id="LG"
gradientTransform="회전(90 .5 .5)">
<중지 id="s0" 오프셋="0" 스톱 컬러 ="#d6f8e9"/>
<중지 id="s2" 오프셋="1" 스톱 컬러 ="#9ee1c4"/>
linearGradient>
<linearGradient id="LG2"
gradientTransform="회전(-90 .5 .5)">
<중지 id="s0" 오프셋="0.07" 스톱 컬러 ="#fdfefe"/>
<중지 id="s1" 오프셋="0.5" 스톱 컬러 ="#98e2c2"/>
<중지 id="s2" 오프셋="0.8" 스톱 컬러 ="#79c9a7"/>
<중지 id="s3" 오프셋="1" 스톱 컬러 ="#5fbc95"/>
linearGradient>
<linearGradient id="arrow1"
gradientTransform="회전(-90 .5 .5)">
<중지 id="s0" 오프셋="0" 스톱 컬러 ="#07594f"/>
<중지 id="s2" 오프셋="1" 스톱 컬러 ="#01443c"/>
linearGradient>
<linearGradient id="arrowRed"
gradientTransform="회전(-90 .5 .5)">
<중지 id="s0" 오프셋="0" 스톱 컬러 ="#fd5959"/>
<중지 id="s2" 오프셋="1" 스톱 컬러 ="#fe7c7c"/>
linearGradient>
<linearGradient id="center- 손잡이 바깥쪽"
gradientTransform="회전(90 .5 .5)">
<중지 id="s0" 오프셋="0" 스톱 컬러 ="#fffefe"/>
<중지 id="s2" 오프셋="1" 스톱 컬러 ="#86ecdb"/>
linearGradient>
<linearGradient id="center- 손잡이 내부"
gradientTransform="회전(90 .5 .5)">
<중지 id="s0" 오프셋="0" 스톱 컬러 ="#a0dcd2"/>
<중지 id="s2" 오프셋="1" 스톱 컬러 ="#dff9ef"/>
linearGradient>
<g 변형="번역( 50, 20)">
<직선 x="0" y="0"
너비="382" 높이="382"
채우기="url(#LG)"
필터="url(#inset-shadow-big-bottom)"
rx="75" ry="105" />
<원 cx="191" cy="191" r="155" 채우기="url(#LG2)"/>
<원 cx="191" cy="191" r="130" 채우기="#53d2c5"/>
<원 cx="191" cy="191" r="130" 채우기="#53d2c5" 필터="url(#inset-shadow)" />
<g 너비="200" 높이="200"
변형="번역(100, 100)">
<animateTransform attributeName="변형" 유형="번역" 기간="4s"
값="191,191;191,191" 반복 횟수 ="무기한"/>
<animateTransform attributeName="변형" 가산="합계" 유형="회전"
기간="86400s" 값="200, 0 0;550 0 0" 반복 횟수="무한" />
<직선 x="0" y="0"
너비="22" 높이="70"
채우기="url(#arrow1)"
채우기 불투명도="0.5"
필터="url(#blurred-source)"
rx="10" ry="10"
변환="번역(-11, -15)" /> ;
g>
<g 너비="200" 높이="200"
변형="번역(100, 100)">
<animateTransform attributeName="변형" 유형="번역" 기간="4s"
값="191,191;191,191" 반복 횟수 ="무기한"/>
<animateTransform attributeName="변형" 가산="합계" 유형="회전"
기간="86400s" 값="200, 0 0;550 0 0" 반복 횟수="무한" />
<직선 x="0" y="0"
너비="20" 높이="70"
채우기="url(#arrow1)"
rx="10" ry="10"
변형="번역(-10, -10)" /> ;
g>
<g 너비="200" 높이="200"
변형="번역(100, 100)">
<animateTransform attributeName="변형" 유형="번역" 기간="4s"
값="191,191;191,191" 반복 횟수 ="무기한"/>
<animateTransform attributeName="변형" 가산="합계" 유형="회전"
기간="3600s" 값="90,0 0;450 0 0" 반복 횟수="무한" />
<직선 x="0" y="0"
너비="18" 높이="104"
채우기="url(#arrow1)"
채우기 불투명도="0.8"
필터="url(#blurred-source)"