HTML5 Prism Effect Slider with Canvas

此代码仅供参考

---

代码说明

A tutorial on how to create a slider with a "prism" effect using HTML5 canvas globalCompositeOperation and a layering technique....

---

html代码

<style type="text/css"> body { background: black; } a { color: whitesmoke; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; display: inline-block; padding: 15px 20px; font-size: 28px; position: relative; } a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #65a835; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } a:hover:after { width: 100%; left: 0; } </style> <a href="#">Prism Effect Slider with Canvas</a>

---

代码演示

---

---