HTML动态房屋装饰特效

news2024/11/16 19:30:30

下面是代码：
 

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>HTML5房屋装饰工具DEMO演示</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Change patterns and rotate house</h1>
<div class="thamb-wrapper">
	<div class="fronton-controll controll">
		<h2>Fronton color</h2>
		<div style="background-color: #C86526" class="thamb t-fronton"></div>
		<div style="background-color: #4E6457" class="thamb t-fronton"></div>
		<div style="background-color: #DFB46F" class="thamb t-fronton"></div>
		<div style="background-color: #CCCCCC" class="thamb t-fronton"></div>
		<div style="background-color: #6F4431" class="thamb t-fronton"></div>
		<div style="background-color: #A26B70" class="thamb t-fronton"></div>
		<div style="background-color: #813515" class="thamb t-fronton"></div>
		<div style="background-color: #9e8f70" class="thamb t-fronton"></div>
		<div style="background-color: #2d5b45" class="thamb t-fronton"></div>
		
	</div>
	<div class="roof-controll controll">
		<h2 class="roof">Roof Options</h2>
		<div style="background-image: url(http://fdsea.ru/img/roof_1.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_2.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_3.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_4.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_5.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_6.jpg)" class="thamb t-roof"></div>
		<div style="background-image: url(http://fdsea.ru/img/roof_7.jpg)" class="thamb t-roof"></div>
	</div>
	<div class="wall-controll controll">
		<h2 class="roof">Wall Options</h2>
		<div style="background-image: url(http://fdsea.ru//img/brick.jpg);" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/brick_1.jpg);" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/brick_2.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/brick_3.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_1.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_2.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_3.jpg)" class="thamb t-wall"></div>
		<div style="background-image: url(http://fdsea.ru//img/log_4.jpg)" class="thamb t-wall"></div>
	</div>
</div>
<div class="home-wrapper">
	<div class="home">
		<div class="block block-1">
			<div class="side block__front"></div>
			<div class="side block__back">L-Back</div>
		</div>
		<div class="block block-2">
			<div class="side block__back">R-Back</div>
			<div class="side block__front"></div>
		</div>
		<div class="block block-3 fronton"></div>
		<div class="block block-8 win"></div>
		<div class="block block-4 wall"></div>
		<div class="block block-5 wall"></div>
		<div class="block block-6 wall"></div>
		<div class="block block-7 wall"></div>
	</div>
</div>

    <script  src="js/index.js"></script>




</body>

</html>

运行效果：

代码可以直接复制

如果有啥问题可以问我看到一定会回复大家，如果大家喜欢可以作者点赞和关注

大家的支持是我创作下去的最大动力！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1397022.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Intel Quartus II IP之DP1.4 工程的创建与使用

Intel Quartus II IP之DP1.4 工程的创建与使用

前述&#xff1a; Win10电脑安装了Quartus 21.4&#xff0c;这可以满足绝大多数工程&#xff0c;特别是对于简单调用fifo/ram等的工程&#xff0c;但是想要学习Quartus的HDMI/DP等高速接口类IP&#xff0c;首先需要创建HDMI/DP IP的设计demo工程&#xff0c;此时还需要安装Ecl…
阅读更多...
智能驾驶新浪潮：SSD与UFS存储技术如何破浪前行？- SSD篇

智能驾驶新浪潮：SSD与UFS存储技术如何破浪前行？- SSD篇

随着汽车行业的不断发展&#xff0c;对存储的需求也在不断的变化中。早期阶段的汽车对存储的需求主要是收音机、播放器、导航仪等&#xff0c;有些还可以支持光盘和U盘的外接播放。中期阶段&#xff0c;也是当前主流的燃油车行车记录、多媒体、车联网的需求&#xff0c;对存储性…
阅读更多...
RabbitMQ安装和使用

RabbitMQ安装和使用

简介 RabbitMQ是一套开源&#xff08;MPL&#xff09;的消息队列服务软件&#xff0c;是由LShift提供的一个Advanced Message Queuing Protocol (AMQP) 的开源实现&#xff0c;由以高性能、健壮以及可伸缩性出名的Erlang写成。所有主要的编程语言均有与代理接口通讯的客户端库…
阅读更多...
国考省考行测：语句排序2刷题

国考省考行测：语句排序2刷题

国考省考行测&#xff1a;语句排序2刷题 2022找工作是学历、能力和运气的超强结合体! 公务员特招重点就是专业技能&#xff0c;附带行测和申论&#xff0c;而常规国考省考最重要的还是申论和行测&#xff0c;所以大家认真准备吧&#xff0c;我讲一起屡屡申论和行测的重要知识点…
阅读更多...
前端学习路线图和一些经验

前端学习路线图和一些经验

关于前端目前个人建议的一个路线,也是自己之前前端学习时候的一个大致路线,给想要学习前端的小白一个参考,以前自己刚开始接触前端的时候就是不知道该按照什么路线学习 eg-前端是做什么的&#xff1f; 就是开发网站,移动端&#xff0c;小程序之类的页面 调调接口完成页面的渲…
阅读更多...
设计模式——建造者模式（Builder Pattern）

设计模式——建造者模式（Builder Pattern）

概述 建造者模式是较为复杂的创建型模式&#xff0c;它将客户端与包含多个组成部分&#xff08;或部件&#xff09;的复杂对象的创建过程分离&#xff0c;客户端无须知道复杂对象的内部组成部分与装配方式&#xff0c;只需要知道所需建造者的类型即可。它关注如何一步一步创建一…
阅读更多...
LLaVA-Plus：多模态大模型的新突破

LLaVA-Plus：多模态大模型的新突破

前言 随着AIGC技术的不断进步&#xff0c;各类多模态大模型&#xff08;MLM&#xff09;开始蓬勃发展。在这一领域中&#xff0c;LLaVA-Plus的推出无疑是一次重大突破。作为LLaVA团队的最新工作&#xff0c;LLaVA-Plus不仅继承了LLaVA的优秀特性&#xff0c;还在此基础上进行了…
阅读更多...
【方法】如何合并多个PDF文件？

【方法】如何合并多个PDF文件？

多个PDF文件&#xff0c;想合并成一个文件&#xff0c;要怎么操作呢&#xff1f; 如果PDF文件的数量少&#xff0c;并且页数也不多&#xff0c;可以试试将内容复制黏贴到Word文档&#xff0c;再转为PDF格式&#xff1b;如果文件数量多&#xff0c;页数也多&#xff0c;就不太合…
阅读更多...
机器人强化学习-双机械臂

机器人强化学习-双机械臂

概要 基于 robosuite 库&#xff0c;进行双臂机器人学习训练 环境测试 下面展示下分别控制两个机械手随机运动的画面&#xff1a; 双臂显示场景如下&#xff1a;双臂调用代码如下&#xff1a; import numpy as np import robosuite as suite import robomimic import rob…
阅读更多...
【音视频原理】图像相关概念 ③ ( RGB 色彩简介 | RGB 排列 | YUV 色彩简介 | YUV 编码好处 )

【音视频原理】图像相关概念 ③ ( RGB 色彩简介 | RGB 排列 | YUV 色彩简介 | YUV 编码好处 )

文章目录 一、RGB 色彩1、RGB 色彩简介2、RGB 排列 二、YUV 色彩1、YUV 色彩简介2、YUV 编码好处 一、RGB 色彩 1、RGB 色彩简介 RGB 是 计算机 中的 颜色编码方法 , 红 ( R ) / 绿 ( G ) / 蓝 ( B ) 三个颜色通道 可以设置不同的值 , 每个 通道 的 颜色值都可以取值 0 ~ 255 ,…
阅读更多...
深度学习模型之yolov8实例分割模型TesorRT部署-python版本

深度学习模型之yolov8实例分割模型TesorRT部署-python版本

1 模型转换 从github上下载官方yolov8版本&#xff0c;当前使用的版本是2023年9月份更新的版本&#xff0c;作者一直在更新。官网地址 2 加载模型 模型的训练和测试在官方文档上&#xff0c;有详细的说明&#xff0c;yolov8中文文档这里不做过多说明&#xff0c;v8现在训练是…
阅读更多...
Ubuntu系统Git的安装配置及使用笔记（更新中）

Ubuntu系统Git的安装配置及使用笔记（更新中）

Ubuntu下Git的下载及配置 (1)、下载git 打开终端命令窗口,输入&#xff1a;sudo apt-get install git 提示&#xff1a;sudo命令是用来以其他身份来执行命令&#xff0c;预设的身份为root,使用sudo时必须先输入密码 (2)、可以使用命令git --version查看git的版本号 (3)、设置…
阅读更多...
ChatGPT给出的前端面试考点（Vue.js）

ChatGPT给出的前端面试考点（Vue.js）

ChatGPT给出的前端面试考点&#xff08;Vue.js&#xff09; 答案 1. Vue.js是什么&#xff1f;它的主要特点是什么&#xff1f; Vue.js是一个渐进式JavaScript框架&#xff0c;用于构建用户界面。它的主要特点包括&#xff1a; 数据绑定&#xff1a;Vue.js使用双向数据绑定&…
阅读更多...
anaconda镜像源，查看镜像，删除镜像，添加镜像

anaconda镜像源，查看镜像，删除镜像，添加镜像

查看镜像配置&#xff1a; conda config --show channel 对应的就是我们的镜像配置 删除旧镜像源 conda config --remove channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ 添加新镜像源&#xff1a; conda config --add channels https://mirrors.tu…
阅读更多...
Next.js 开发指​南（GitHub 115k star​）

Next.js 开发指​南（GitHub 115k star​）

Next.js 是一个构建于 Node.js 之上的开源 Web 开发框架&#xff0c;它扩展了最新的 React 特性&#xff0c;集成了基于 Rust 的 JavaScript 工具&#xff0c;可以帮助你快速创建全栈 Web 应用 &#xff08;full-stack Web applications&#xff09; 。 对于有一定 React 基础…
阅读更多...
TQ8WS-acid，Tide Quencher 8WS-酸，可用来研究荧光物质的激发态

TQ8WS-acid，Tide Quencher 8WS-酸，可用来研究荧光物质的激发态

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Tide Quencher8WS acid&#xff0c;TQ8WS acid&#xff0c;Tide Quencher 8WS 酸 &#xff0c;TQ8WS 酸&#xff0c;Tide Quencher 8WS-酸&#xff0c;TQ8WS-酸 一、基本信息 产品简介&#xff1a;The fluorescence…
阅读更多...
【算法与数据结构】Java实现查找与排序

【算法与数据结构】Java实现查找与排序

文章目录 第一部分&#xff1a;查找算法二分查找插值查找分块查找哈希查找树表查找 第二部分&#xff1a;排序算法冒泡排序选择排序插入排序快速排序 总结 第一部分&#xff1a;查找算法 二分查找 也叫做折半查找&#xff0c;属于有序查找算法。 前提条件&#xff1a;数组数据…
阅读更多...
Yearning存在任意文件读取漏洞

Yearning存在任意文件读取漏洞

文章目录 前言声明一、Yearning简介二、漏洞描述三、影响版本四、漏洞复现五、修复建议 前言 Yearning MYSQL SQL语句审核平台。提供查询审计&#xff0c;SQL审核&#xff0c;SQL回滚&#xff0c;自定义工作流等多种功能。该平台存在任意文件读取漏洞。 声明 请勿利用文章内的…
阅读更多...
OpenCV-Python(44):对极几何

OpenCV-Python(44):对极几何

目标 学习多视角几何基础学习什么是极点、极线、对极约束等 基本概念 在我们使用针孔相机时&#xff0c;我们会丢失大量重要的信息。比如说图像的深度&#xff0c;或者说图像上的点和摄像机的距离&#xff0c;因为这是一个从3D 到2D 的转换。因此一个重要的问题就产生了&…
阅读更多...
[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;佬佬会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023