锯齿形渐变实验

下载代码

html

css

分享到微信朋友圈

html

<h3>CSS output</h3>
		<div class="css" data-output></div>
	</div>
</div>

css

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}
@media (min-width: 40em) {
  body {
    display: flex;
  }
}

.bg {
  --h1: 0deg;
  --h2: calc(var(--h1) + 120deg);
  --h3: calc(var(--h2) + 45deg);
  --l1: 50%;
  --c1: hsl(var(--h1, 0), 90%, var(--l1));
  --c2: hsl(var(--h2), 90%, var(--l, 70%));
  --c3: hsl(var(--h3), 60%, var(--d, 40%));
  --t: 2rem;
  --w: 3rem;
  --angle: 45deg;
  --grad: var(--c1) var(--t), var(--c1) calc(var(--t) * 2), var(--c2) calc(var(--t) * 2), var(--c2) calc(var(--t) * 3), var(--c3) calc(var(--t) * 3), var(--c3) calc(var(--t) * 4);
  --mask: repeating-linear-gradient(to right, black var(--w), black calc(var(--w) * 2), transparent calc(var(--w) * 2), transparent calc(var(--w) * 3));
  background: repeating-linear-gradient(var(--angle), var(--grad)), var(--c1);
  background-size: var(--w) 100%;
  height: 100vh;
  position: relative;
  flex: 1 0 auto;
  transition: --angle 200ms, --t 200ms, --w 200ms;
}

.bg::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: repeating-linear-gradient(calc(var(--angle) * -1), var(--grad)), var(--c1);
  background-size: var(--w) 100%;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
}

.controls {
  padding: 1rem;
  background-color: white;
  max-width: 30rem;
  z-index: 1;
  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);
}
@media (min-width: 40em) {
  .controls {
    display: inline-block;
    position: fixed;
    overflow: scroll;
    top: 0;
    left: 0;
    height: 100%;
  }
}

pre {
  max-width: 100%;
  overflow: scroll;
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 0.2rem;
}

.controls__group {
  display: flex;
  align-items: center;
  max-width: 20rem;
}
.controls__group label {
  margin-right: 1rem;
}
.controls__group input {
  margin-left: auto;
}

JavaScript

const angleInput = document.querySelector('[data-input="range"]')
const thicknessInput = document.querySelector('[data-input="thickness"]')
const widthInput = document.querySelector('[data-input="width"]')
const colorInput = document.querySelector('[data-input="color1"]')
const contrastInput = document.querySelector('[data-input="contrast"]')
const outputContainer = document.querySelector('[data-output]')
const bg = document.querySelector('[data-bg]')
const inputs = [...document.querySelectorAll('[data-input]')]

const angleChange = (e) => {
	const newAngle = `${e.target.value}deg`
	setItem('--angle', newAngle, 'angle', e.target.value)
}

const thicknessChange = (e) => {
	const newThickness = `${e.target.value}rem`
	setItem('--t', newThickness, 'thickness', e.target.value)
}

const setItem = (cssVar, newValue, property, unitlessValue) => {
	bg.style.setProperty(cssVar, newValue)
	getCSSOutput()
	localStorage.setItem(property, unitlessValue)
}

const widthChange = (e) => {
	const newWidth = `${e.target.value}rem`
	setItem('--w', newWidth, 'width', e.target.value)
}

const colorChange = (e) => {
	const newColor = `${e.target.value}deg`
	setItem('--h1', newColor, 'color', e.target.value)
}

const setContrast = (contrast) => {
	const newL = `${contrast}%`
	const newD = `${100 - contrast}%`
	bg.style.setProperty('--l', newL)
	bg.style.setProperty('--d', newD)
}

const contrastChange = (e) => {
	setContrast(e.target.value)
	getCSSOutput()
	localStorage.setItem('contrast', e.target.value)
}

const getCSSOutput = () => {
	const { backgroundImage, backgroundSize } = getComputedStyle(bg)
	const backgroundImageAfter = getComputedStyle(bg, '::after').backgroundImage
	const mask = getComputedStyle(bg, '::after').maskImage
	const cssOutput = `
<pre>
.bg {
	background-image: ${backgroundImage};
	background-size: ${backgroundSize};
}

.bg::after {
	background-image: ${backgroundImageAfter};
	background-size: ${backgroundSize};
	-webkit-mask-image: ${mask};
	mask-image: ${mask};
}
</pre>`
	
	outputContainer.innerHTML = cssOutput
}

const setStyle = (input, property, unitlessValue, value) => {
	if (unitlessValue) {
		input.value = unitlessValue
		bg.style.setProperty(property, value)
	}
}

const getInitialStateFromLocalStorage = () => {
	const angle = localStorage.getItem('angle')
	const thickness = localStorage.getItem('thickness')
	const width = localStorage.getItem('width')
	const color = localStorage.getItem('color')
	const contrast = localStorage.getItem('contrast')
	
	setStyle(angleInput, '--angle', angle, `${angle}deg`)
	setStyle(thicknessInput, '--t', thickness,  `${thickness}rem`)
	setStyle(widthInput, '--w', width, `${width}rem`)
	setStyle(colorInput, '--h1', color, `${color}deg`)
	
	if (contrast) {
		setContrast(contrast)
		contrastInput.value = contrast
	}
}

getInitialStateFromLocalStorage()
getCSSOutput()

angleInput.addEventListener('change', angleChange)
thicknessInput.addEventListener('change', thicknessChange)
widthInput.addEventListener('change', widthChange)
colorInput.addEventListener('change', colorChange)
contrastInput.addEventListener('change', contrastChange)

let activeInput

const handleMouseDown = (e) => {
	console.log(e)
	activeInput = e.target
}

const updateValues = (e) => {
	const { id } = e.target
	
	if (id === 'angle') {
		angleChange(e)
	}
	
	if (id === 'thickness') {
		thicknessChange(e)
	}
	
	if (id === 'color1') {
		colorChange(e)
	}
	
	if (id === 'width') {
		widthChange(e)
	}
	
	if (id === 'contrast') {
		contrastChange(e)
	}
}

const handleMouseMove = (e) => {
	if (activeInput === e.target) {
		updateValues(e)
	}
}

inputs.forEach(el => {
	el.addEventListener('mousedown', handleMouseDown)
	el.addEventListener('mousemove', _.throttle(handleMouseMove, 100))
})

CSS.registerProperty({
  name: '--angle',
  syntax: '<angle>',
  inherits: true,
  initialValue: '45deg',
})

CSS.registerProperty({
  name: '--t',
  syntax: '<length>',
  inherits: true,
  initialValue: '30px',
})

CSS.registerProperty({
  name: '--w',
  syntax: '<length>',
  inherits: true,
  initialValue: '30px',
})

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg