漸變
-
漸變配合js可以實現動態
background-image: linear-gradient(90deg,rgb(0,0,225),rgb(225,0,0) 0%,rgb(0,0,225));我們可以通過js來控制 0% 的值來實現動態
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漸變</title> <script type="text/javascript"> window.onload = function(){ let box = document.getElementById("box"); let i = 0; let t =setInterval(function () { if (i >= 100) { i=0; }else { box.style.background = 'linear-gradient(90deg,rgb(0,0,225),rgb(225,0,0) '+i+'%,rgb(0,0,225))'; i++; } } ,1); } </script> <style type="text/css"> #box{ width: 300px; height: 300px; background: linear-gradient(90deg,rgb(0,0,225),rgb(225,0,0) 0%,rgb(0,0,225)); } </style> </head> <body> <div id="box"></div> </body> </html> -
漸變可以作用到視頻上或者 作用到body上來實習背景虛化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漸變</title> <style type="text/css"> body{ background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); } </style> <script type="text/javascript"> window.onload = function () { let body = document.body; let i= 0 ; let a = 100; setInterval(function () { if (i >= 100 || a<=0){ i = 0 ; a = 100; }else { body.style.background = 'linear-gradient(-90deg, #29bdd9 '+i+'%, #276ace '+a+'%)'; i++; a--; } },30); } </script> </head> <body> <div></div> </body> </html> -
字體 漸變
字體實現漸變需要知道幾個屬性
-webkit-background-clip-text- 規定背景的繪製區域：
- text - 背景被裁剪爲文字的前景色（只有chrome支持）
- transparent 透明顏色
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div{ width: 800px; line-height: 200px; font-size: 55px; font-weight: 900; color: green; /** *-webkit-background-clip 屬性 * 該樣式屬性只作用與內核爲webkit的瀏覽器 * text - 背景被裁剪爲文字的前景色（只有chrome支持） * transparent 透明顏色 */ -webkit-background-clip:text; -webkit-text-fill-color:transparent ; background-image: linear-gradient(90deg,rgb(0,0,225),rgb(225,0,0) 0%,rgb(0,0,225)); } </style> </head> <body> <div>再小的帆也能遠航！！！</div> </body> </html>