Özet - Özel arka plan deseni
Houdini ile özel arka plan deseni kurarsın.
Özel arka plan deseni nasıl kurulur?
Özel bir arka plan deseni üç Houdini parçasını birleştirir. Önce @property --cell-size ile tipli bir değişken kaydedersin; bu, geçişlere izin verir. Sonra bir paint worklet registerPaint('grid', sınıf) ile çizimi tanımlar.
En son CSS'te background: paint(grid) yazıp --cell-size ile hücre boyutunu verirsin. Üçü birleşince desen, değişkenle birlikte canlandırılabilir.
Üç parça birlikte
Üç parça bir araya gelince desen canlandırılabilir. @property --cell-size, syntax: '<length>' ile kaydedildiğinde, --cell-size değişirse tarayıcı paint worklet'i yeniden çağırır.
Buna transition: --cell-size 0.3s ease eklersen hücre boyutu pürüzsüz büyür. CSS'ten tek satır değişiklik, worklette pürüzsüz bir canlandırma olur.
Uygulama --cell-size için @property yaz
Aşağıdaki CSS'i tamamla. @property --cell-size bildiriminde syntax: '<length>', inherits: true ve initial-value: 16px olsun.
Örnek çözümü göster
/* hücre boyutu için tipli değişken */
@property --cell-size {
syntax: '<length>';
inherits: true;
initial-value: 16px;
}Uygulama Izgara desenini CSS'te kullan
Aşağıdaki CSS'i tamamla. .grid-bg bildiriminde --cell-size: 24px, background: paint(grid) ve transition: --cell-size 0.3s ease olsun.
Örnek çözümü göster
/* ızgara arka plan deseni */
.grid-bg {
--cell-size: 24px;
background: paint(grid);
transition: --cell-size 0.3s ease;
}Kendini test et
-
Bileşenleri rollerine eşle
- @property --cell-size
- Tipli değişken kaydı
- registerPaint('grid')
- Worklet çizimi
- background: paint(grid)
- CSS'te kullanım
- --cell-size: 16px
- Worklete veri
-
Özel desende paint worklet neyi okur?
/* worklet neyi okur? */- inputProperties ile tanımlanan CSS değişkenlerini
- Yalnızca tarayıcı adını
- DOM ağacının tamamını
- Sayfanın URL adresini
Cevabı göster
inputProperties ile tanımlanan CSS değişkenlerini — Doğru. Worklet yalnızca inputProperties ile bildirdiği değişkenleri okur.