一个人追求目标的路途是孤单的,一个人独品辛酸的时候是寂寥的,一个人马不停蹄的追赶着,狂奔着,相信前方是一片光明,我从不放弃希望,就像我对生活的信念,没有人可以动摇。
——《北京青年》
目录
一、前言
在我们的 html 学习过程中,会用到并见识到各种各样的实例,以及各种插件,并且有些 web 网页中的小插件又非常的吸引眼球,提升 web 网页的层次,显得非常好看并且非常使用。在本系列中,我将持续为大家更新有趣且使用的 html 实例,放在 web 网页中,凸显效果。
特点一:都是符合学校或者学生考试期末作业的水平,都是最基础的简单的 html 样例,提升web网页整理效果,都是 div+css 框架原创代码写的,内容包括 js / css,也包含 视频+音乐+flash 等元素的插入…
特点二:内容包括多种丰富类型,例如: 倒计时,404页面,Blog顶置卡片设计 (css+js),To-Do-List设计 (css+js),火柴盒动画 (css),日历便签设计 (css+js),搜索框设计 (css+js),卡片式图片展示 (css+js),咖啡选择 (css+js)……
可满足多种需求,欢迎大家下载!
二、往期作品回顾
有趣的HTML实例(一) 倒计时_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(二) 404页面_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(三) 加载页面动画_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(四) 旋转菜单_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(五) 加载页面动画Ⅱ(css)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(六) 卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(七) 注册登录界面Ⅱ(css+js)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(八) 一个很有趣的动态背景(css+js)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(九) 文本变形动画(css+js)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(十) 悬停时有旋转效果的图标_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(十一) 烟花特效(css+js)_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例(十二) 早安、晚安动画(css+js)_Enovo_飞鱼的博客-CSDN博客
三、作品介绍
1.作品简介 :HTML响应式布局网站源码!兼容 pc 以及移动端,内涵 js 交互,ui 交互。直接点击即可查看效果!
2.作品编辑:个人主页网页设计题材,代码为 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用)。
3.作品技术:使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。
四、本期代码介绍
一款简单的 HTML+ CSS+JS 咖啡选择(css+js) 实例
1、HTML
2、CSS
3、JS
4、舒适的画面感
5、咖啡
6、各种不同类型咖啡点击效果
可通用多种不同情景,放置在web网页上,可以作为跳转页面之后使用
五、效果显示
可使用在多种情景下,提升层次轮廓效果、美化界面、自定义文字修改——>
根据需求修改
六、编码实现
显示完整代码
注意路径(⊙o⊙)?
o(* ̄▽ ̄*)ブ
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>咖啡</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- <a href="https://twitter.com/rominamartinlib" target="_blank">
<svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
<path d="
M 630, 425
A 195, 195 0 0 1 331, 600
A 142, 142 0 0 0 428, 570
A 70, 70 0 0 1 370, 523
A 70, 70 0 0 0 401, 521
A 70, 70 0 0 1 344, 455
A 70, 70 0 0 0 372, 460
A 70, 70 0 0 1 354, 370
A 195, 195 0 0 0 495, 442
A 67, 67 0 0 1 611, 380
A 117, 117 0 0 0 654, 363
A 65, 65 0 0 1 623, 401
A 117, 117 0 0 0 662, 390
A 65, 65 0 0 1 630, 425
Z" style="fill:#3BA9EE;" />
</svg>
</a> -->
<div class="options">
<button id="americano">Americano</button>
<button id="au_lait">Au lait</button>
<button id="capuccino">Capuccino</button>
<button id="corretto">Corretto</button>
<button id="espresso">Espresso</button>
<button id="latte">Latte</button>
<button id="lungo">Lungo</button>
<button id="macchiato">Macchiato</button>
<button id="mocha">Mocha</button>
<button id="ristretto">Ristretto</button>
</div>
<div class="container">
<h1 class="coffee_name">Choose your coffee</h1>
<div class="cup">
<div class="filling reset">
<div class="coffee">Coffee</div>
<div class="water">Water</div>
<div class="liquor">Liquor</div>
<div class="milk">Milk</div>
<div class="whipped_cream">Whipped cream</div>
<div class="milk_foam">Milk foam</div>
<div class="steamed_milk">Steamed milk</div>
<div class="chocolate">Chocolate</div>
</div>
<div class="plate"></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 "