虚拟主机如何建设多个网站,网站建设的书籍有哪些,贵阳网站建设钟鼎网络,上海帝程网站建设公司一个人追求目标的路途是孤单的#xff0c;一个人独品辛酸的时候是寂寥的#xff0c;一个人马不停蹄的追赶着#xff0c;狂奔着#xff0c;相信前方是一片光明#xff0c;我从不放弃希望#xff0c;就像我对生活的信念#xff0c;没有人可以动摇。 ——《北京青年》 目录… 一个人追求目标的路途是孤单的一个人独品辛酸的时候是寂寥的一个人马不停蹄的追赶着狂奔着相信前方是一片光明我从不放弃希望就像我对生活的信念没有人可以动摇。 ——《北京青年》 目录
一、前言
二、往期作品回顾
三、作品介绍
四、本期代码介绍
五、效果显示
六、编码实现
index.html
style.css
script.js 七、获取源码
公众号获取源码
获取源码私信关注点赞收藏 一、前言 在我们的 html 学习过程中会用到并见识到各种各样的实例以及各种插件并且有些 web 网页中的小插件又非常的吸引眼球提升 web 网页的层次显得非常好看并且非常使用。在本系列中我将持续为大家更新有趣且使用的 html 实例放在 web 网页中凸显效果。 特点一都是符合学校或者学生考试期末作业的水平都是最基础的简单的 html 样例提升web网页整理效果都是 divcss 框架原创代码写的内容包括 js / css也包含 视频音乐flash 等元素的插入… 特点二内容包括多种丰富类型例如 倒计时404页面Blog顶置卡片设计 (cssjs)To-Do-List设计 (cssjs)火柴盒动画 (css)日历便签设计 (cssjs)搜索框设计 (cssjs)卡片式图片展示 (cssjs)咖啡选择 (cssjs)…… 可满足多种需求欢迎大家下载 二、往期作品回顾 有趣的HTML实例一 倒计时_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例二 404页面_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例三 加载页面动画_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例四 旋转菜单_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例五 加载页面动画Ⅱcss_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例六 卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例七 注册登录界面Ⅱcssjs_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例八 一个很有趣的动态背景cssjs_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例九 文本变形动画cssjs_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例十 悬停时有旋转效果的图标_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例十一 烟花特效cssjs_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例十二 早安、晚安动画cssjs_Enovo_飞鱼的博客-CSDN博客 三、作品介绍 1.作品简介 HTML响应式布局网站源码兼容 pc 以及移动端内涵 js 交互ui 交互。直接点击即可查看效果 2.作品编辑个人主页网页设计题材代码为 htmlcss 布局制作作品下载后可使用任意HTML编辑软件例如DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用。 3.作品技术使用DIVCSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 四、本期代码介绍 一款简单的 HTML CSSJS 咖啡选择cssjs 实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、咖啡 6、各种不同类型咖啡点击效果 可通用多种不同情景放置在web网页上可以作为跳转页面之后使用 五、效果显示 可使用在多种情景下提升层次轮廓效果、美化界面、自定义文字修改——
根据需求修改 六、编码实现 显示完整代码
注意路径(⊙o⊙)
o(*▽*)ブ index.html !DOCTYPE html
html langen
headmeta charsetUTF-8title咖啡/titlelink relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
link relstylesheet href./style.css/head
body
!-- partial:index.partial.html --
!-- a hrefhttps://twitter.com/rominamartinlib target_blanksvg viewBox328 355 335 276 xmlnshttp://www.w3.org/2000/svgpath dM 630, 425A 195, 195 0 0 1 331, 600A 142, 142 0 0 0 428, 570A 70, 70 0 0 1 370, 523A 70, 70 0 0 0 401, 521A 70, 70 0 0 1 344, 455A 70, 70 0 0 0 372, 460A 70, 70 0 0 1 354, 370A 195, 195 0 0 0 495, 442A 67, 67 0 0 1 611, 380A 117, 117 0 0 0 654, 363A 65, 65 0 0 1 623, 401A 117, 117 0 0 0 662, 390A 65, 65 0 0 1 630, 425Z stylefill:#3BA9EE; //svg
/a --
div classoptionsbutton idamericanoAmericano/buttonbutton idau_laitAu lait/buttonbutton idcapuccinoCapuccino/buttonbutton idcorrettoCorretto/buttonbutton idespressoEspresso/buttonbutton idlatteLatte/buttonbutton idlungoLungo/buttonbutton idmacchiatoMacchiato/buttonbutton idmochaMocha/buttonbutton idristrettoRistretto/button
/div
div classcontainerh1 classcoffee_nameChoose your coffee/h1div classcupdiv classfilling resetdiv classcoffeeCoffee/divdiv classwaterWater/divdiv classliquorLiquor/divdiv classmilkMilk/divdiv classwhipped_creamWhipped cream/divdiv classmilk_foamMilk foam/divdiv classsteamed_milkSteamed milk/divdiv classchocolateChocolate/div/divdiv classplate/div/div
/div
!-- partial --script src./script.js/script/body
/html style.css :root {--main-bg-color: #d6b9a4;--cup-color: #474747;--cup-width: 30vw;--cup-height: 24vw;--cup-handle-width: 5vw;--cup-handle-height: calc(2 * var(--cup-handle-width));--cup-border-width: 2vw;--cup-inside-width: calc(var(--cup-width) - var(--cup-border-width));--cup-inside-height: calc(var(--cup-height) - var(--cup-border-width));--border-width: 1vw;--main-border: var(--border-width) solid var(--cup-color);--plate-width: 25vw;--plate-height: 2vw;--coffee-bottom: 80%;--water-bottom: 0;--milk-bottom: 0;--liquor-bottom: 0;--whipped_cream-bottom: 0;--steamed_milk-bottom: 0;--milk_foam-bottom: 0;--chocolate-bottom: 0;--coffee-color: #3c302f;--water-color: #b1dce2;--milk-color: #f0ebe5;--liquor-color: #fc8626;--whipped_cream-color: #fceecb;--milk_foam-color: #fceecb;--steamed_milk-color: #ffd7b3;--chocolate-color: #391e09;}body {height: 100vh;width: 100vw;background: var(--main-bg-color);display: flex;justify-content: space-evenly;align-items: center;margin: auto;overflow: hidden;}a {position: absolute;top: 10px;left: 10px;}svg {height: 1.5rem;}.container {display: flex;flex-direction: column;align-items: center;justify-content: center;width: 70vw;}.coffee_name {color: #f1faee;text-align: center;/* width: 100%; */font-size: 4vw;}.options {display: grid;grid-gap: 1vh;grid-template-rows: repeat(10, 35px);grid-template-columns: 120px;justify-content: space-evenly;box-sizing: border-box;}.options button {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background: rgba(214, 217, 227, 0.6);outline: none;font-size: 1rem;border: 2px solid #a67a60;box-shadow: none;color: #363636;box-sizing: border-box;border-radius: 1vh;}.options button:hover {cursor: pointer;border-width: 4px;background: rgba(255, 255, 255, 0.6);}.options .selected {border-width: 4px;background: rgba(255, 255, 255, 0.8);box-sizing: border-box;}.cup {width: var(--cup-width);height: var(--cup-height);border-radius: 0 0 10vw 10vw;position: relative;background-color: var(--cup-color);z-index: 10;box-sizing: border-box;}.cup::after {content: ;position: absolute;top: 10%;left: calc(100% - 1vw);width: var(--cup-handle-width);height: var(--cup-handle-height);border: var(--main-border);border-radius: 50% 30%;}.plate {position: absolute;top: calc(100% 1vw);left: calc((var(--cup-width) - var(--plate-width)) / 2);width: var(--plate-width);background: var(--cup-color);height: var(--plate-height);border-radius: 1vw;}.filling {position: absolute;left: calc(var(--cup-border-width) / 2);bottom: calc(var(--cup-border-width) / 2);width: var(--cup-inside-width);height: var(--cup-inside-height);overflow: hidden;border-radius: 0 0 10vw 10vw;background-color: var(--main-bg-color);bottom: 1vw;}.filling div {position: absolute;width: 100%;transition: all 1s linear;color: #817f75;display: flex;align-items: flex-start;justify-content: center;height: 0;overflow: hidden;font-size: 3vw;height: 100%;bottom: -100%;box-sizing: border-box;}.filling.reset.americano {--water-bottom: 0;--coffee-bottom: -60%;}.filling.reset.au_lait {--coffee-bottom: -50%;--milk-bottom: 0%;}.filling.reset.capuccino {--coffee-bottom: -65%;--steamed_milk-bottom: -35%;--milk_foam-bottom: 0;}.filling.reset.espresso {--coffee-bottom: -60%;}.filling.reset.latte {--coffee-bottom: -60%;--steamed_milk-bottom: -20%;--milk_foam-bottom: 0%;}.filling.reset.corretto {--coffee-bottom: -45%;--liquor-bottom: -25%;}.filling.reset.lungo {--water-bottom: 0;--coffee-bottom: -50%;}.filling.reset.macchiato {--coffee-bottom: -70%;--milk_foam-bottom: 0;}.filling.reset.mocha {--coffee-bottom: -60%;--chocolate-bottom: -40%;--steamed_milk-bottom: -20%;--whipped_cream-bottom: 0%;}.filling.reset.ristretto {--coffee-bottom: -80%;}div.chocolate {background: var(--chocolate-color);bottom: var(--chocolate-bottom);z-index: 6;}div.coffee {background: var(--coffee-color);bottom: var(--coffee-bottom);line-height: 4vw;z-index: 7;}div.liquor {background: var(--liquor-color);bottom: var(--liquor-bottom);z-index: 4;}div.milk {background: var(--milk-color);bottom: var(--milk-bottom);z-index: 2;}div.milk_foam {background: var(--milk_foam-color);bottom: var(--milk_foam-bottom);z-index: 5;}div.steamed_milk {background: var(--steamed_milk-color);bottom: var(--steamed_milk-bottom);z-index: 6;}div.water {background: var(--water-color);bottom: var(--water-bottom);}div.whipped_cream {background: var(--whipped_cream-color);bottom: var(--whipped_cream-bottom);z-index: 4;}.filling.reset {--coffee-bottom: -100%;--water-bottom: -100%;--milk-bottom: -100%;--liquor-bottom: -100%;--whipped_cream-bottom: -100%;--steamed_milk-bottom: -100%;--milk_foam-bottom: -100%;--chocolate-bottom: -100%;} script.js const coffee_name document.querySelector(.coffee_name);
const coffee_filling document.querySelector(.filling);
const buttons document.querySelectorAll(button);
let current_element null;const changeCoffeeType (selected) {if (current_element) {current_element.classList.remove(selected);coffee_filling.classList.remove(current_element.id);}current_element selected;coffee_filling.classList.add(current_element.id);current_element.classList.add(selected);coffee_name.innerText selected.innerText;
};const setActiveType (element) {element.toggleClass(selected);
};[...buttons].forEach((button) {button.addEventListener(click, () {changeCoffeeType(button);});
}); 七、获取源码 老规矩先给朋友们看一下完整文件夹
正确的文件如下图 复制源码的朋友们请注意了 公众号获取源码 第一步通过微信公众号下载源码压缩包解压并打开文件夹即为上图样式复制源码请注意路径及文件名 第二步点击 html 文件 打开即可查看 2023年第二十三期希望得到大家的喜欢
也是新的系列将会持续更新
希望大家有好的意见或者建议欢迎私信 以上就是本篇文章的全部内容了 ~ 关注我点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞好评收藏] 三连 支持下吧你的「点赞好评收藏」是我创作的动力。
2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C、数据结构、Python程序设计、Java程序设计、爬虫等 「在这里有好多 开发者一起探讨 前端 开发 知识互相学习」
3.以上内容技术相关问题可以相互学习可 关 注 ↓公 Z 号 获取更多源码 !
获取源码私信关注点赞收藏 ✏️⭐️ 有需要源码的小伙伴可以 关注下方微信公众号 Enovo开发工厂 回复 关键词 a-coffee
