Gunakan peralihan CSS3 dengan latar belakang kecerunan
P粉217629009
P粉217629009 2023-08-23 21:25:42
0
2
533

Saya cuba menggunakan css untuk membuat peralihan pada lakaran kenit pada tetikus supaya latar belakang pudar dalam tuding. Penukaran tidak berfungsi, tetapi jika saya menukarnya kepada rgba()value, ia berfungsi dengan baik. Tidakkah ia menyokong kecerunan? Saya juga telah mencuba menggunakan imej dan ia tidak menukar imej sama ada.

Saya tahu ini mungkin kerana seseorang melakukannya dalam siaran lain, tetapi saya tidak tahu caranya. Sebarang bantuan> Berikut ialah beberapa CSS yang boleh digunakan:

#container div a { -webkit-transition: latar belakang 0.2s linear; -moz-transition: latar belakang 0.2s linear; -o-peralihan: latar belakang 0.2s linear; peralihan: latar belakang 0.2s linear; jawatan: mutlak; lebar: 200px; ketinggian: 150px; sempadan: 1px #000 pepejal; jidar: 30px; indeks z: 2 } #container div a:hover { latar belakang: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4))) }  


P粉217629009
P粉217629009

membalas semua (2)
P粉226642568

Satu penyelesaian ialah mengubah kedudukan latar belakang untuk mencipta kesan perubahan kecerunan:http://sapphion.com/2011/10/css3-Peralihan kecerunan dan kedudukan latar belakang/

#DemoGradient{ background: -webkit-linear-gradient(#C7D3DC,#5B798E); background: -moz-linear-gradient(#C7D3DC,#5B798E); background: -o-linear-gradient(#C7D3DC,#5B798E); background: linear-gradient(#C7D3DC,#5B798E); -webkit-transition: background 1s ease-out; -moz-transition: background 1s ease-out; -o-transition: background 1s ease-out; transition: background 1s ease-out; background-size:1px 200px; border-radius: 10px; border: 1px solid #839DB0; cursor:pointer; width: 150px; height: 100px; } #DemoGradient:Hover{ background-position:100px; }
    P粉787934476

    Kecerunan belum lagi menyokong peralihan (walaupun spesifikasi semasa mengatakan ia harus menyokong peralihan seperti kecerunan kepada seperti kecerunan melalui interpolasi.).

    Jika anda mahukan kesan pudar dengan kecerunan latar belakang, anda perlu menetapkanopacitypada elemen bekas dan "mengalihkan" kelegapan.

    (Sudah ada beberapa versi penyemak imbas yang menyokong peralihan kecerunan (cth. IE10. Saya telah menguji peralihan kecerunan dalam IE pada tahun 2016 dan ia nampaknya berfungsi pada masa itu, tetapi kod ujian saya tidak lagi berfungsi.)

    Kemas kini: Oktober 2018Peralihan kecerunan dengan sintaks baharu tanpa awalan [cth. Radial-gradient(...)] kini disahkan berfungsi (sekali lagi?) pada Microsoft Edge 17.17134. Saya tidak tahu bila ini ditambah. Masih tidak berfungsi pada Firefox dan Chrome / Windows 10 terkini.

    Dikemas kini: Disember 2021Penyelesaian @property kini tersedia dalam penyemak imbas berasaskan Chromium terkini (tetapi tidak berfungsi dalam Firefox). Lihat (dan undi)jawapan @mahozaddi bawah (atau YMMV di atas).

      Muat turun terkini
      Lagi>
      kesan web
      Kod sumber laman web
      Bahan laman web
      Templat hujung hadapan
      Tentang kita Penafian Sitemap
      Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!