Gradyanlar, bir süredir CSS spektrumunun bir parçası olmuştur. Birçok projede çok sayıda radyal ve doğrusal gradyan görüyoruz, ancak biraz yalnız görünen bir gradyan türü var: konik gradyan. Bu tür bir gradyan kullanarak bir saat kadranı yapacağız.
Konik gradyanlarla çalışma
Yaptığımız şey, bir merkez noktası etrafında döndürülen renk geçişlerine sahip bir degradeden oluşuyor ve birden çok renk değerine sahip olabilir. Bu saatin çalışması için, dönüşü veya başlangıç noktasını tanımlayan konik bir eğimin açı değerini de kullanacağız. Açı, bir kullanılarak tanımlanır from
değeri.
background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);
Bununla ilgili ilginç olan şey, CSS'de bir başlangıç açısının daha sonra kullanışlı olacak şekilde negatif bir değere sahip olabilmesidir.
Konik bir degradenin basit ve zarif bir örneği:
Temel saatimizi oluşturmak
Saat ve eller için biraz HTML ekleyerek başlayalım:
Saatimiz için bazı varsayılan stiller oluşturalım. Bunun düzgün çalışması için daha sonra CSS değişkenlerini JavaScript ile güncelleyeceğiz, bu yüzden bu değişkenleri .clock
seçici. Kolay ince ayar için ellerin renklerini de ekleyelim.
.clock {
/* general clock vars */
--hour-hand-color: #000;
--hour-hand-degrees: 0deg;
--minute-hand-color: #000;
--minute-hand-degrees: 0deg;
--second-hand-color: hotpink;
--second-hand-degrees: 0deg;
position: relative;
min-width: 320px;
width: 25vw;
height: 25vw;
min-height: 320px;
border-radius: 50%;
margin: 0 auto;
border: 7px solid #000;
}
/* clock hands */
.hand {
position: absolute;
left: 50%;
bottom: 50%;
height: 45%;
width: 4px;
margin-left: -2px;
background: var(--second-hand-color);
border-radius: 6px;
transform-origin: bottom center;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
height: 35%;
border-radius: 40px;
background-color: var(--hour-hand-color);
transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
height: 50%;
background: var(--minute-hand-color);
transform: rotate(var(--minute-hand-degrees));
}
Bu bizi saat için ihtiyacımız olan genel stili belirler. ayarladık transform-origin
ellerde, saatin yüzü etrafında düzgün bir şekilde dönmeleri için. Ayrıca, ellerde açıları ayarlamak için birkaç özel özellik de vardır; bu, zamanlamayı tam olarak doğru yapmak için JavaScript ile güncelleyeceğiz, böylece her bir elin buna göre saniye, dakika ve saatle eşlenmesi.
İşte şimdiye kadar sahip olduklarımız:
Pekala, bu özel özellikleri güncellemeye geçelim!
Temel saatimiz için JavaScript ekleme
İlk olarak, saatimizi hedefleyeceğiz ve bir fonksiyon oluşturacağız:
const clock = document.getElementById("clock");
function setDate() {
// Code to set the current time and hand angles.
}
setDate();
Fonksiyonumuzun içinde, şu anki zamanı kullanarak Date()
işlev ellerin doğru açısını hesaplamak için:
const now = new Date();
const secondsAngle = now.getSeconds() * 6;
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;
Bu hesaplama şu şekilde çalışır:
- saniye: 60 saniye sürüyor ve onu çarpıyoruz
6
, olan360
, tam bir dairedeki mükemmel açı sayısı. - dakika: Saniye ile aynı, ancak şimdi saniye açısını ekliyoruz ve onu bölüyoruz.
60
Daha doğru bir sonuç için açıyı dakika içinde biraz artırmak için. - Saatleri: İlk olarak, saatin geri kalanını hesaplıyoruz ve onu bölüyoruz.
12
. Sonra kalanı şuna böleriz12
tekrar çarpabileceğimiz bir ondalık değer elde etmek için360
. Örneğin, 23. saatte olduğumuzda,23 / 12 =
remain
11
. Bunu 12'ye bölersek şunu elde ederiz.0.916
hangi daha sonra ile çarpılır360
genel bir toplam için330
. Burada dakikalarla yaptığımızın aynısını yapacağız ve dakika açısını bölerek toplayacağız.12
, daha doğru bir sonuç için.
Artık açılarımızı aldığımıza göre geriye sadece fonksiyonumuzun sonuna aşağıdakileri ekleyerek saatimizin değişkenlerini güncellemek kalıyor:
clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");
Son olarak, ancak en az değil, çalışan bir saat elde etmek için işlevi bir saniye aralıklarla tetikleyeceğiz:
const clock = document.getElementById("clock");
function setDate() {
// etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();
Temel saatimizin çalışan demosuna bakın:
Bunu konik bir degradeye uygulamak
Tamam, yani saatimizin kolları çalışıyor. Gerçekten istediğimiz şey, onları zaman değiştikçe güncellenen konik bir gradyanla eşleştirmek. "Gradient" yüzü etkin olan bir Apple Watch'unuz varsa aynı etkiyi görmüş olabilirsiniz:
Bunu yapmak için, sayfamızı güncelleyerek başlayalım. .clock
konik gradyan ve başlangıç ve bitiş açılarını kontrol eden iki özel özelliğe sahip eleman:
.clock {
/* same as before */
/* conic gradient vars */
--start: 0deg;
--end: 0deg;
/* same as before */
background:
conic-gradient(
from var(--start),
rgb(255 255 255) 2deg,
rgb(0 0 0 / 0.5) var(--end),
rgb(255 255 255) 2deg,
rgb(0 0 0 / 0.7)
);
}
Tam istediğiniz gibi şekillendirmek için bununla biraz oynayabilirsiniz. Degradeye bazı ekstra renkler ekledim, ancak bir başlangıç ve bitiş noktanız olduğu sürece, gitmekte fayda var.
Sırada, güncelleyeceğiz setDate()
fonksiyonu, konik gradyan üzerindeki başlangıç ve bitiş noktalarımız için değişkenleri günceller. Başlangıç noktası saniye ibremiz olacak, bu da dakikalarımızın açısıyla aynı olacağı için bulunması kolay. Bunu saat yönünde bitirmek için bitiş noktamızı saatle aynı yapmalıyız. hourAngle
komut dosyasında değişken, ancak başlangıç noktamızı ondan çıkarın.
let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;
Artık değişkenlerimizi tekrar JavaScript ile güncelleyebiliriz:
clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");
Bu noktada işimiz bitmiş gibi görünüyor ama bir püf noktası var! Bu hesaplama, akrep yelkovanından daha küçük bir açıya sahip olduğu sürece işe yarar. Dakika ibresi onu geçtiği anda konik eğimimiz dağınık olacaktır. Bunu düzeltmek için başlangıç noktası olarak negatif bir değer kullanacağız. Neyse ki, bu olduğunda fark etmek kolaydır. Değişkenlerimizi güncellemeden önce aşağıdakileri ekleyeceğiz:
if (minsAngle > hourAngle) {
startPosition = minsAngle - 360;
endPosition = hourAngle - startPosition;
}
çıkararak 360
dakika açımızdan, bizim için negatif bir değer belirleyebiliriz. startposition
değişken. Bu negatif başlangıç noktası nedeniyle, bitiş konumumuz, başlangıç konumundan çıkarılan saat açısıyla güncellenmelidir.
İşte başlıyoruz - şimdi akrep ve yelkovan eğim açılarına ayarlandı:
Bu kadar! Ancak bunun sizi daha da ileriye götürmekten alıkoymasına izin vermeyin. Kendi stillerinizi yaratın ve yorumlarda benimle paylaşın, böylece onları kontrol edebilirim. İşte size ilham verecek küçük bir ilham kaynağı: