CSS3를 사용하여 원형 동적 시계를 그리는 방법(자세한 설명)
시간이 돈이 되는 시대에 사람들은 일상생활뿐만 아니라 특히 인터넷 서핑을 할 때 시간에 대한 인식이 점점 더 높아지고 있습니다. 따라서 프론트엔드를 개발할 때 CSS3를 활용하여 시계 정말 필요한 것 같습니다. 이 기사가 제공하는 내용은 이에 관한 것이며 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
CSS3를 사용하여 원형 동적 시계를 그리는 원리
- #🎜🎜 #
- 우리 모두 알고 있듯이 div 모양은 정사각형이므로 먼저 border-radius 속성을 사용하여 원형으로 변환해야 합니다.
- 포인터를 회전시키려면 -webkit-transform-origin:center 100px;을 사용하여 회전 기준점을 설정해야 합니다. 그런 다음 -webkit-transform:rotate(0);을 사용하여 li가 해당 각도를 회전시켜 해당 축척을 형성하도록 합니다.
- 척도를 디자인한 후 nth-of-type() 선택기를 포함하여 상위 요소에 속하는 하위 요소를 지정해야 합니다.
- 원형 시계의 중앙에 포인터 연결 지점에 대한 div 아이콘을 설정해야 합니다.
- 그런 다음 js를 사용하여 div를 얻고 다이얼의 크기를 렌더링합니다.
- 마지막으로 타이머를 시작하고 1초마다 함수를 실행합니다.
css3을 사용하여 원형 동적 시계를 그리는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>钟表</title>
<style id="css">
#wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}
#wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;}
#wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);}
#wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);}
#wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);}
#wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);}
#wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);}
#wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);}
#wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);}
#wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
#min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
#sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
.icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}
</style>
</head>
<body>
<div id="wrap">
<ul id="list">
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div></div>
</div>
<script>
var oList=document.getElementById("list");//获取到刻度
var oCss=document.getElementById("css");
var oHour=document.getElementById("hour");//获取时针
var oMin=document.getElementById("min");//获取分针
var oSec=document.getElementById("sec");//获取秒针
var oLi="";
var sCss="";
for (var i=0;i<60;i++) { //一个表盘总共是60个刻度
sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
oLi+="<li></li>";
};
oList.innerHTML=oLi;
oCss.innerHTML+=sCss;//表盘刻度渲染完成
toTime();
setInterval(toTime,1000);
function toTime(){
var oDate=new Date();//获取当前时间
var iSec=oDate.getSeconds();//获取当前秒
var iMin=oDate.getMinutes()+iSec/60;//获取当前分
var iHour=oDate.getHours()+iMin/60;//获取当前时
oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
};
</script>
</body>
</html>효과 예시는 사진에 나와 있습니다
위 내용은 CSS3를 사용하여 원형 동적 시계를 그리는 방법(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7866
15
1649
14
1407
52
1301
25
1243
29
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
iPhone에 시계 앱이 없습니다. 해결 방법
May 03, 2024 pm 09:19 PM
휴대폰에 시계 앱이 없나요? 날짜와 시간은 iPhone의 상태 표시줄에 계속 표시됩니다. 그러나 시계 앱이 없으면 세계 시계, 스톱워치, 알람 시계 및 기타 여러 기능을 사용할 수 없습니다. 따라서 누락된 시계 앱을 수정하는 것이 해야 할 일 목록의 맨 위에 있어야 합니다. 이러한 솔루션은 이 문제를 해결하는 데 도움이 될 수 있습니다. 수정 1 - 시계 앱 배치 실수로 홈 화면에서 시계 앱을 제거한 경우 시계 앱을 다시 제자리에 배치할 수 있습니다. 1단계 – iPhone을 잠금 해제하고 앱 라이브러리 페이지에 도달할 때까지 왼쪽으로 스와이프합니다. 2단계 – 다음으로 검색창에 “시계”를 검색하세요. 3단계 – 검색 결과 아래에 “시계”가 표시되면 길게 누르고
iOS 17이 설치된 iPhone에서 여러 타이머를 사용하는 방법
Jun 21, 2023 am 08:18 AM
iOS17의 멀티 타이머란 무엇입니까? iOS17에서 Apple은 이제 사용자에게 iPhone에서 한 번에 여러 타이머를 설정할 수 있는 기능을 제공합니다. 이는 많은 사람들이 수년 동안 기다려온 환영할 만한 변화입니다. iOS 16 이전에는 사용자가 한 번에 하나의 타이머만 설정할 수 있었던 시계 앱을 이제 원하는 수의 타이머를 활성화하는 데 사용할 수 있으므로 한 번에 여러 작업을 완료하는 데 이상적입니다. 타이머 화면에서 타이머를 원하는 만큼 설정할 수 있습니다. 타이머가 시작되면 모든 활성 타이머가 잠금 화면 및 알림 센터에 "실시간 활동" 알림으로 표시됩니다. 여기에서 시계 앱을 열지 않고도 타이머가 꺼질 때까지 남은 시간을 확인하거나 타이머를 일시 중지하거나 중지할 수 있습니다. 당신이 시계에있을 때
iOS 17: 대기 모드에서 iPhone 시계 스타일을 변경하는 방법
Sep 10, 2023 pm 09:21 PM
대기는 iPhone이 충전기에 연결되어 있고 가로(또는 가로) 방향일 때 활성화되는 잠금 화면 모드입니다. 세 가지 화면으로 구성되어 있으며 그 중 하나는 전체 화면 시간으로 표시됩니다. 시계 스타일을 변경하는 방법을 알아보려면 계속 읽어보세요. StandBy의 세 번째 화면에는 수직으로 스와이프할 수 있는 다양한 테마의 시간과 날짜가 표시됩니다. 일부 테마에는 온도나 다음 알람과 같은 추가 정보도 표시됩니다. 시계를 길게 누르면 디지털, 아날로그, 세계, 태양광, 플로팅 등 다양한 테마 간에 전환할 수 있습니다. Float는 사용자 정의 가능한 색상의 큰 거품 숫자로 시간을 표시하고, Solar는 다양한 색상의 태양 플레어 디자인을 갖춘 보다 표준적인 글꼴을 가지며, World는 강조 표시하여 세계를 표시합니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
![iPhone에서 알람을 끄는 방법 [2023]](https://img.php.cn/upload/article/000/465/014/169259550735100.png?x-oss-process=image/resize,m_fill,h_207,w_330)
iPhone에서 알람을 끄는 방법 [2023]
Aug 21, 2023 pm 01:25 PM
스마트폰이 등장한 이후 스마트폰은 의심할 여지없이 알람시계를 대체해 왔습니다. iPhone을 소유하고 있다면 시계 앱을 사용하여 하루 종일 여러 상황에 대해 원하는 만큼의 알람을 쉽게 설정할 수 있습니다. 이 앱을 사용하면 알람 시간, 신호음, 반복 빈도, 스누즈 옵션을 사용하여 알람을 지연할지 여부를 구성할 수 있습니다. 설정한 알람을 끄고 싶다면 다음 게시물을 참조하여 iPhone에서 일반 알람과 모닝콜 알람을 비활성화하고 삭제하는 데 도움이 될 것입니다. iPhone에서 일반 알람을 끄는 방법 기본적으로 시계 앱에 알람을 추가하거나 Siri에게 알람 추가를 요청하면 실제로 일반 알람이 생성됩니다. iPhone에서 원하는 만큼의 알람 시계를 만들고 추가할 수 있습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
