25个 html5 和 css3 网页开发工具

Apr 02, 2015 / 优秀设计资源 / 3790 Views

收集了若干个在线工具,主要是网页设计师或开发师常用,涉及到最流行的html5和css3技术,各种动画、滑动、阴影效果等。

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.

Prism Effect Slider with Canvas

Website

Skewed Title Text by Paul Noble

Skewed Title Text by Paul Noble

Website

Inspiration For Dialog Effects by Codrops

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.

Inspiration For Dialog Effects by Codrops

Website

SweetAlert Modern Alert Box

SweetAlert Modern Alert Box

Website

3D Rotating Navigation by CodyHouse

A 3D rotating navigation, powered by CSS transformations.

3D Rotating Navigation by CodyHouse

Website

HTML5 Music Player

Music player that lives in your browser. It uses the powerful HTML5 File Reader and Audio APIs. As a result, you can just drag and drop mp3 files from your computer into the browser, and they are automatically added to your playlist.

HTML5 Music Player

Website

Pure CSS Scroll Icon Indicator by Shak Dizzle

Pure CSS Scroll Icon Indicator by Shak Dizzle

Website

NeatNait Social Share Buttons via CSSDeck

NeatNait Social Share Buttons via CSSDeck

Website

Product Preview Slider via CodyHouse

An easy way to show more product images and variations right in the product gallery.

Product Preview Slider via CodyHouse

Website

CSS Devices – Simple pure CSS iOS devices for mockups by Luke James Taylor

CSS Devices - Simple pure CSS iOS devices for mockups by Luke James Taylor

Website

Playful Trampoline Effect via Codrops

A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.

Playful Trampoline Effect via Codrops

Website

Material Design Menu by Arjan Jassal

Material Design Menu by Arjan Jassal

Website

Expandable Image Gallery by CodyHouse

An image that expands on click, going full-width and turning into a gallery.

Expandable Image Gallery by CodyHouse

Website

Happy Text via CodePen

Happy Text via CodePen

Website

Wobbly Slideshow Effect by Codrops

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect by Codrops

Website

CIRCULUS.SVG: An SVG Circular Menu Generator + animated examples by Sara Soueidan

CIRCULUS.SVG: An SVG Circular Menu Generator + animated examples by Sara Soueidan

Website

CSS-only Material Design Music App by Gregor Adams

CSS-only Material Design Music App by Gregor Adams

Website

Break Up With IE8 by humaan

Break Up With IE8 by humaan

Website

CSS Space Shooter

An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms.

CSS Space Shooter

Website

Pure CSS3 Face Animation & Web Visibility by Karsten Buckstegge

Pure CSS3 Face Animation & Web Visibility by Karsten Buckstegge

Website

Animation Principles for the Web via CSS Animation

Animation Principles for the Web via CSS Animation

Website

Animation with CSS & JS by Norman Dubois

Animation with CSS & JS by Norman Dubois

Website

HTML5 CSS3D Experiment by Gerard Ferrandez

HTML5 CSS3D Experiment by Gerard Ferrandez

Website

CSS Puns & CSS Jokes by Saijo George

CSS Puns & CSS Jokes by Saijo George

Website

Creative Text Input Effects

A couple of more inspirational styles for text input effects including some new techniques and ideas.

Creative Text Input Effects

Website

About the QianDuanMei

前端美 是一个非盈利性博客站点,主要发布一些国内外常规的前端资讯信息,包括css3/html5等。还有二个平台:一是微博,点击 @前端美 关注我们;二是微信,您可以查找公众帐号,输入 前端美 或 QianDuanMei 来关注我们,也可以通过微信的扫一扫,扫描侧边栏的二维码。

添加新评论