有趣的HTML实例(十三) 咖啡选择(css+js)

一个人追求目标的路途是孤单的,一个人独品辛酸的时候是寂寥的,一个人马不停蹄的追赶着,狂奔着,相信前方是一片光明,我从不放弃希望,就像我对生活的信念,没有人可以动摇。

——《北京青年》


目录

一、前言

二、往期作品回顾

三、作品介绍

四、本期代码介绍

五、效果显示 

六、编码实现

index.html

style.css 

script.js

 七、获取源码

公众号获取源码 

获取源码?私信?关注?点赞?收藏?


一、前言

        在我们的 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 "

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Enovo_你当像鸟飞往你的山

好好读书!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值