cari
Rumahhujung hadapan webTutorial H5HTML5 有哪些让你惊艳的 demo?

印象中看过一个用HTML5做的3D立体书(不是Google那个),当时觉得很惊艳,可是后来再也找不到了。
知乎上的你们看到过哪些让你觉得惊艳的Demo呢?

回复内容:

找不到之前所见过的网页,深有同感!
Animated Books with CSS 3D Transforms 这是一个3D书本,CSS3完成

=========HTML5特效聚集网站========
christmasexperiments.com 的页面
chromeexperiments.com 的页面
Mr.doob
litewerx.showcase
Form Follows Function
AlteredQualia
html5rocks.com 的页面

===========视觉特效与交互式视频============
thewildernessdowntown.com
Interactive Film "itsumo kawaii"
beonlineb.com/
Arcade Fire / Just a Reflektor
Aaronetrope 3D科幻视频投影对话
Aleksandar Rodic 3D立体博客
Beanstalk
ro.me/
three.js webgl 动态地图
Ô Green by SPECIAL.T 水中植物广告
Kimatica - Creative Connections 树脉
Earth to Echo 电影科幻宣传网站
middle-earth.thehobbit.com 霍比特人
HelloRun™ 线稿房间,第一人称动
LETTERS, INC. 集成电路
Dataveyes | Human Data Interactions 视觉粒子

=========音乐与可视化==========
do.adive.in/
Rocking dendrites 摇滚与触手
Arabesque - Music Colour Particles 优美的纯音乐与彩色烟雾
compo.filler 蓝电之音
Lights 波点
ÜberViz 电子
A [ Radiohead 音乐画画

=========物理特性元素============
Blob 大水球
Andrew Hoyer 布-骨架
HTML5 Fish Bowl IE-鱼缸
googlecode.com 的页面 chrome-水族馆
three.js webgl 动物
Liquid Particles 3D 3D粒子流

==========画绘与生成===========
10 Jaw Dropping HTML5 and Javascript Effects 10个画绘特效
wormz . html5 canvas experiment 图片生成毛毛虫~~
Silk – Interactive Generative Art 光效
Sketch Toy: Draw sketches and share replays with friends! 记录线稿步骤
ASCIIFlow Infinity ASCII字符生成图表

========一些融入了HTML5的网站=======
Andrew McCarthy 滚动动物奔跑
tokyomildfoundation.com 东京温柔基金
fifty-five | the data agency 垂直分割
A P R I L Z E R O 数据分析
Gaming Media 创意横向滚动
Luxaqua | Aquarium Design 深邃海底纵向滚动
KILFISH 鬼畜纵向滚动
有顆梅,在台灣 食品纵向滚动
Vespillo le film Vespillo纵向滚动
Exploring Moon Bears IE-月熊志
Metal Junk: The Game HTML5游戏:金属废墟,游戏就不展开了~~ Internet Explorer 11 Test Drive Codrops | Useful resources and inspiration for creative minds
Tutorialzine
上面有很多的Demo,质量都很高,开源免费可商用

还有CodePen - Front End Developer Playground & Code Editor in the Browser,像是前端界的github

3D立体书Codrops上有几个,不知道是不是你找的:
Animated Books with CSS 3D Transforms
3D Shading with Box-Shadows
3D Book Showcase codepen.io fireball-x.com 整个 ide 都是 html5 写的。 最近写的 基于 HTML5 的指南针和水平仪:H5Compass iPhone 5s/5c 测试可用。 这是我在另一个问题:有哪些较好的壁纸网站? - 桌面壁纸里面的答案:
------------------------------------------------------------------------------------------------------
谢邀,看到这个问题我第一反应就是国外一个黑科技壁纸网站:WallpaperPCMobile
相对于楼上那些千篇一律的壁纸站来说,WallpaperPCMobile可以说完全碾压任何一个壁纸站。就壁纸数量来说,就1080P以上分辨率的壁纸就将近14万张,随便挑几张吧:
1.Sea, dawn, nature, sky, sunset, vacation, weather, ocean, sun, boat, vietnam wallpaper,sea HD wallpaper,dawn HD wallpaper,nature HD wallpaper,sky HD wallpaper,sunset HD wallpaper,vacation HD wallpaper,weather HD wallpaper,ocean HD wallpaper,sun HD wallpaper,boat HD wallpaper
HTML5 有哪些让你惊艳的 demo?Milky Way, Stars, Sky, Nature wallpaper,milky way HD wallpaper,stars HD wallpaper,sky HD wallpaper,nature HD wallpaper,4416x2944 HD wallpaper
HTML5 有哪些让你惊艳的 demo?Nature, Pier, Lake, Mountain, Calm, Stars, Night wallpaper,nature HD wallpaper,pier HD wallpaper,lake HD wallpaper,mountain HD wallpaper,calm HD wallpaper,stars HD wallpaper,night HD wallpaper
HTML5 有哪些让你惊艳的 demo?Nature, Landscape, Mountain, Rock, Sky, Night, Stars, Milky Way, Rock Formation wallpaper,nature HD wallpaper,landscape HD wallpaper,mountain HD wallpaper,rock HD wallpaper,sky HD wallpaper,night HD wallpaper,stars HD wallpaper,milky way HD wallpaper,rock formation HD wallpaper
HTML5 有哪些让你惊艳的 demo?当然,精彩的来了,WallpaperPCMobile黑科技在于它的智能裁剪技术,基于它的HTML5 SmartCrop技术,WallpaperPCMobile能智能分析一张图片的主次部分,并根据你的分辨率裁剪出一张图片的主体部分,因此,你想要手机、平板电脑还是PC的分辨率,WallpaperPCMobile都能把它裁剪成最完美的壁纸,不得不感叹国内外web前端差距啊,现在举个例子验证它的智能裁剪技术:
1.来张美女壁纸:Women, Face, Jeans, Standing, Look, Asian wallpaper,women HD wallpaper,face HD wallpaper,jeans HD wallpaper,standing HD wallpaper,look HD wallpaper,asian HD wallpaper
HTML5 有哪些让你惊艳的 demo?OK,裁剪成常见手机分辨率480x800分辨率:
Women, Face, Jeans, Standing, Look, Asian wallpaper for 480x800 resolution download
HTML5 有哪些让你惊艳的 demo?不要急着被震撼,再来换一张其它的:
2.Cute girl with blue eyes wallpaper,girls HD wallpaper,1920x1080 HD wallpaper,woman HD wallpaper
HTML5 有哪些让你惊艳的 demo?为了验证裁剪效果,我们不用横屏分辨率,还是选择竖屏手机分辨率:480x800:
Cute girl with blue eyes wallpaper for 480x800 resolution download
HTML5 有哪些让你惊艳的 demo?wallpaperPCMobile甚至能判别人脸的存在!!!(第一次碾压地球上各壁纸网站)
基于HTML5 canvas rendering技术,你也可以拖动滑块在线调整壁纸的图片质量,从0%到100%都是在线调整(第二次碾压地球上各壁纸网站)
当然,如果上述尺寸不是你想要的裁剪结果,别担心,wallpaperPCMobile基于HTML5 canvas rendering技术,它甚至可以让你在线裁剪一张壁纸!!!(第三次碾压地球上各壁纸网站)
Custom resize Cute girl with blue eyes wallpaper
HTML5 有哪些让你惊艳的 demo?如果图片没有你想要的效果怎么办,别担心,wallpaperPCMobile早就给你准备好了各种特效了,还是基于HTML5 canvas rendering技术(不得不说HTML5为啥这么火爆,真的很强大),你可以添加各种特效,(第四次碾压地球上各壁纸网站)还是上面这张美女图片,我们添加一点柔和特效:
Edit Cute girl with blue eyes wallpaper with resolution 480x800
HTML5 有哪些让你惊艳的 demo?这特效柔不柔和??
WallpaperPCMobile 一直安安静静躺在我的书签里,其他壁纸网站从来视而不见 ro.me/
这个这个!

chromeexperiments.com/w

这里貌似要翻墙 某次的Google Doodle ,那个魔方。。。 3D立体书通过JS+CSS3做吧,不是HTML5。
Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Apa yang dirujuk oleh H5? Meneroka konteksApa yang dirujuk oleh H5? Meneroka konteksApr 12, 2025 am 12:03 AM

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

H5: Alat, Rangka Kerja, dan Amalan TerbaikH5: Alat, Rangka Kerja, dan Amalan TerbaikApr 11, 2025 am 12:11 AM

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.

Warisan HTML5: Memahami H5 pada masa kiniWarisan HTML5: Memahami H5 pada masa kiniApr 10, 2025 am 09:28 AM

Html5hassignificlylylectransformedwebdevelopmentbyintroducingsemanticelements, enhancingmultimediasupport, andimprovingperformance.1) itmadewebebsitesmoreaccessibleandseo-friendlywithSemhyViVeShive, dan

Kod H5: Kebolehcapaian dan HTML SemantikKod H5: Kebolehcapaian dan HTML SemantikApr 09, 2025 am 12:05 AM

H5 meningkatkan kebolehaksesan laman web dan kesan SEO melalui unsur -unsur semantik dan atribut ARIA. 1. Gunakan, dan lain -lain untuk mengatur struktur kandungan dan meningkatkan SEO. 2. Atribut Aria seperti ARIA-Label meningkatkan kebolehcapaian, dan pengguna teknologi bantuan boleh menggunakan laman web dengan lancar.

Adakah H5 sama dengan HTML5?Adakah H5 sama dengan HTML5?Apr 08, 2025 am 12:16 AM

"H5" dan "HTML5" adalah sama dalam kebanyakan kes, tetapi mereka mungkin mempunyai makna yang berbeza dalam senario tertentu tertentu. 1. "HTML5" adalah standard yang ditentukan oleh W3C yang mengandungi tag dan API baru. 2. "H5" biasanya merupakan singkatan HTML5, tetapi dalam pembangunan mudah alih, ia boleh merujuk kepada rangka kerja berdasarkan HTML5. Memahami perbezaan ini membantu menggunakan istilah ini dengan tepat dalam projek anda.

Apakah fungsi H5?Apakah fungsi H5?Apr 07, 2025 am 12:10 AM

H5, atau HTML5, adalah versi kelima HTML. Ia menyediakan pemaju dengan set alat yang lebih kuat, menjadikannya lebih mudah untuk membuat aplikasi web yang kompleks. Fungsi teras H5 termasuk: 1) unsur -unsur yang membolehkan lukisan grafik dan animasi di laman web; 2) tag semantik seperti, dan lain -lain untuk menjadikan struktur laman web jelas dan kondusif untuk pengoptimuman SEO; 3) API baru seperti perkhidmatan berasaskan lokasi GeolocationPi; 4) Keserasian silang penyemak imbas perlu dipastikan melalui ujian keserasian dan perpustakaan polyfill.

Cara melakukan pautan h5Cara melakukan pautan h5Apr 06, 2025 pm 12:39 PM

Bagaimana untuk membuat pautan H5? Tentukan sasaran pautan: Dapatkan URL halaman atau aplikasi H5. Buat HTML Anchors: Gunakan & lt; a & gt; Tag untuk membuat sauh dan tentukan URL sasaran pautan. Tetapkan sifat pautan (pilihan): Tetapkan sasaran, tajuk, dan sifat onClick seperti yang diperlukan. Tambah ke laman web: Tambah kod utama HTML ke laman web di mana anda mahu pautan muncul.

Cara menyelesaikan masalah keserasian H5Cara menyelesaikan masalah keserasian H5Apr 06, 2025 pm 12:36 PM

Penyelesaian kepada isu keserasian H5 termasuk: menggunakan reka bentuk responsif yang membolehkan laman web menyesuaikan susun atur mengikut saiz skrin. Gunakan alat ujian silang penyemak imbas untuk menguji keserasian sebelum dilepaskan. Gunakan Polyfill untuk memberi sokongan untuk API baru untuk pelayar yang lebih tua. Ikuti piawaian web dan gunakan kod yang berkesan dan amalan terbaik. Gunakan preprocessors CSS untuk memudahkan kod CSS dan meningkatkan kebolehbacaan. Mengoptimumkan imej, mengurangkan saiz laman web dan mempercepatkan pemuatan. Dayakan HTTPS untuk memastikan keselamatan laman web.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod