html CodePen快捷方式

Posted 2021-05-11

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/DrawSVGPlugin.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/SplitText.min.js
//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=10

<input type='range' id='x1' value='7' min='1' max='13' />
<input type='range' id='x2' value='25' step='25' />


input#toggle-heart(type='checkbox')
label(for='toggle-heart' aria-label='like') ❤


<!-- BABEL

const _HUE = document.getElementById('hue');

function update() {
  document.documentElement.style.setProperty('--hue', +_HUE.value);
};

_HUE.addEventListener('input', update, false);
_HUE.addEventListener('change', update, false);


PUG

- var initial_hue = 35;

form
	input(type='range' id='hue' value=`${initial_hue}` max='360')
	label(for='hue') hue
	
	-->