HTML动态房屋装饰特效

下面是代码：
 

<!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>

下面是css代码：

 

@import url("https://fonts.googleapis.com/css?family=Raleway");
* {box-sizing: border-box;
}html, body {width: 100%;height: 100%;margin: 0;padding: 0;
}body {perspective: 1600px;position: relative;font-family: "Raleway", sans-serif;background-color: #dcedc8;
}h1 {position: fixed;transform: rotate(-90deg);top: 400px;left: -130px;font-size: 1.3em;
}.block {width: 200px;height: 200px;border: 1px solid #f2e8c9;background-repeat: repeat;transform-origin: 50% 50%;position: absolute;top: 5%;left: 35%;font-size: 3em;transform-style: preserve-3d;
}
.block .side {position: absolute;top: 0;left: 0;width: 100%;height: 100%;backface-visibility: hidden;
}
.block .block__front {text-align: center;line-height: 200px;background-color: #DFB46F;z-index: 1;background-size: 100%;background-image: url(http://fdsea.ru/img/roof_7.jpg);
}
.block .block__back {transform: rotateY(-180deg);background-color: #C1C1C1;z-index: 4;text-align: center;line-height: 200px;
}.block-1 {transform: rotateY(45deg) rotateX(45deg);
}.block-2 {transform: rotateY(-135deg) rotateX(45deg) translateZ(100px) translateY(100px);
}.block-3 {border-left: 140px solid transparent;border-top: 140px solid transparent;border-right: 140px solid transparent;border-bottom: 140px solid #2d5b45;transform: rotateY(-45deg) translateZ(115px) translateX(-99px) translateY(-110px);
}.block-4 {width: 200px;height: 160px;transform: rotateY(-45deg) translateZ(86px) translateX(-70px) translateY(160px);background: #f2e8c9;
}.block-5 {width: 200px;height: 160px;transform: rotateY(45deg) translateZ(30px) translateX(13px) translateY(160px);background: #e6ddbf;
}.block-6 {width: 200px;height: 160px;transform: rotateY(-135deg) translateZ(170px) translateX(-13px) translateY(160px);background: #e6ddbf;
}.block-7 {width: 200px;height: 160px;transform: rotateY(315deg) translateZ(-113px) translateX(-70px) translateY(160px);background: #f2e8c9;
}.block-8 {width: 50px;height: 50px;transform: rotateY(-45deg) translateZ(40px) translateX(-20px) translateY(200px);background: #fff;border: 5px solid #aaa;animation: windowLight 1s ease infinite;background-color: #fff176;
}
.block-8:before, .block-8:after {content: '';position: absolute;border: 3px solid #aaa;box-sizing: border-box;
}
.block-8:before {width: 100%;height: 0%;top: calc(50% - 3px);left: 0;
}
.block-8:after {width: 0%;height: 100%;top: 0;left: calc(50% - 3px);
}.wall {background-size: 100%;background-image: url(http://fdsea.ru//img/log_4.jpg);
}.home-wrapper {width: 450px;height: 450px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-style: preserve-3d;
}.home {transition: .4s linear;width: 400px;height: 400px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transform-style: preserve-3d;transform-origin: 0% 100%;
}.thamb-wrapper {display: flex;flex-direction: row;margin: 1em;
}
.thamb-wrapper h2 {font-size: 1em;
}
.thamb-wrapper .controll {width: 120px;height: 120px;z-index: 2;margin-right: 1em;display: flex;flex-direction: row;flex-wrap: wrap;
}
.thamb-wrapper .thamb {border: 1px solid #ccc;width: 40px;height: 40px;background-repeat: repeat;margin-right: 1em;cursor: pointer;transition: .3s ease;margin: 0;background-size: 100%;
}
.thamb-wrapper .thamb:hover {border: 1px solid #555;
}@keyframes windowLight {0% {background: #fff176;}90% {background: #ffee58;}100% {background: #ffeb3b;}
}
@media screen and (max-width: 400px) {h1 {position: absolute;transform: rotate(0deg);left: 0.5em;bottom: 0;font-size: 1.2em;}
}

和js代码：


var wrapper = document.querySelector('.thamb-wrapper'),roof = document.querySelectorAll('.block__front'),wall = document.querySelectorAll('.wall'),home = document.querySelector('.home'),houseWrapper = document.querySelector('.home-wrapper'),fronton = document.querySelector('.fronton'),coord = void 0;function setPattern(plates, targetBackground) {Array.from(plates).forEach(function (v) {return v.style.backgroundImage = targetBackground.style.backgroundImage;});
}wrapper.addEventListener('click', function (e) {var targSt = e.target;if (targSt.classList.contains('t-roof')) {setPattern(roof, targSt);} else if (targSt.classList.contains('t-wall')) {setPattern(wall, targSt);} else if (targSt.classList.contains('t-fronton')) {fronton.style.borderBottomColor = targSt.style.backgroundColor;}
}, false);houseWrapper.addEventListener('mousemove', function (e) {coord = { x: e.offsetX, y: e.offsetY };home.style.transform = 'rotateY(' + coord.x / 5 + 'deg) rotateX(' + -coord.y / 20 + 'deg) translate(-50%, -50%)';
});

 

运行效果：

代码可以直接复制

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Adobe XD 55.2.12.2软件安装教程(附软件下载地址)

Adobe XD 55.2.12.2软件安装教程(附软件下载地址)

软件简介&#xff1a; 软件【下载地址】获取方式见文末。注&#xff1a;推荐使用&#xff0c;更贴合此安装方法&#xff01; Adobe XD 55.2.12.2是一款专业级的图形界面UI/UX设计工具&#xff0c;拥有丰富的功能和强大的性能。它集成了原型设计、界面设计和交互设计等多种功能…
阅读更多...
02-编程猜谜游戏

02-编程猜谜游戏

本章通过演示如何在实际程序中使用 Rust&#xff0c;你将了解 let 、 match 、方法、关联函数、外部crate等基础知识。 本章将实现一个经典的初学者编程问题&#xff1a;猜谜游戏。 工作原理如下&#xff1a;程序将随机生成一个介于 1 和 100 之间的整数。然后&#xff0c;程序…
阅读更多...
MyBatisPlus学习笔记五-插件功能

MyBatisPlus学习笔记五-插件功能

0、插件功能 MyBatisPlus提供的内置拦截器有下面这些 1、分页插件 2、通用分页实体 3、通用分页实体-强化 需求&#xff1a; 在PageQuery中定义方法&#xff0c;将PageQuery对象转为MyBatisPlus中的Page对象在PageDTO中定义方法&#xff0c;将MyBatisPlus中的Page结果转为Page…
阅读更多...
Qt文件和目录相关操作

Qt文件和目录相关操作

1.相关说明 QCoreApplication类、QFile类、QDir、QTemporaryDir类、QTemporaryFile类、QFileSystemWatcher类的相关函数 2.相关界面 3.相关代码 #include "dialog.h" #include "ui_dialog.h" #include <QFileDialog> #include <QTemporaryDir>…
阅读更多...
TypeScript语法总结

TypeScript语法总结

JavaScript 与 TypeScript 的区别 TypeScript 是 JavaScript 的超集&#xff0c;扩展了 JavaScript 的语法&#xff0c;因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改&#xff0c;TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScript 可处理已…
阅读更多...
什么是DOM？(JavaScript DOM是什么？)

什么是DOM？(JavaScript DOM是什么？)

1、DOM简洁 DOM是js中最重要的一部分&#xff0c;没有DOM就不会通过js实现和用户之间的交互。 window是最大的浏览器对象&#xff0c;在它的下面还有很多子对象&#xff0c;我们要学习的DOM就是window对象下面的document对象 DOM&#xff08;Document Object Model&#xff09…
阅读更多...
Unity导出Android项目踩坑记录

Unity导出Android项目踩坑记录

1、buildSetting-> 设置ExportProject 2、buildsetting ->playerSetting ->设置IL2CPP 3、设置ndk edit->preferences->external tools->ndk 如果unity的ndk版本和android项目里的ndk版本不一致会报错&#xff0c;让人很崩溃的 4、支持64位配置 buildsetti…
阅读更多...
【Java】JDBC的使用

【Java】JDBC的使用

JDBC package jdbc_demo;import java.sql.Connection; import java.sql.DriverManager; import java.sql.Statement;public class jdbc {public static void main(String[] args)throws Exception {//1.注册驱动Class.forName("com.mysql.cj.jdbc.Driver");//2.获取…
阅读更多...
c JPEG 1D DCT 优化二（AAN）

c JPEG 1D DCT 优化二（AAN）

这两个图可能就是AAN 的数学模型 优化DCT就是用代码实现矩阵9,10 9和10已经把64个系数缩小到一半32个了。光从这两图可看出&#xff0c;优化后乘法少了64-32436个&#xff0c;加法少了64-32-824。估计优化时间可少百分之40左右。 实际编码640480 的图片&#xff0c;程序执行时…
阅读更多...
FlinkSQL【分组聚合-多维分析-性能调优】应用实例分析

FlinkSQL【分组聚合-多维分析-性能调优】应用实例分析

FlinkSQL处理如下实时数据需求&#xff1a; 实时聚合不同 类型/账号/发布时间 的各个指标数据&#xff0c;比如&#xff1a;初始化/初始化后删除/初始化后取消/推送/成功/失败 的指标数据。要求实时产出指标数据&#xff0c;数据源是mysql cdc binlog数据。 代码实例 --SET t…
阅读更多...
解决系统开发中的跨域问题：CORS、JSONP、Nginx

解决系统开发中的跨域问题：CORS、JSONP、Nginx

文章目录 一、概述1.问题场景2.浏览器的同源策略3.解决思路 二、一点准备工作1.创建前端工程12.创建后端工程3.创建前端工程24.跨域问题 三、方法1&#xff1a;使用CORS四、方法2&#xff1a;JSONP五、方法3&#xff1a;Nginx1.安装和启动&#xff08;windows&#xff09;2.使用…
阅读更多...
TestNG注释

TestNG注释

目录 TestNG注释列表 BeforeXXX和AfterXXX注释放在超类上时如何工作&#xff1f; 使用BeforeXXX和AfterXXX TestNG注释 TestNG是一个测试框架&#xff0c;旨在简化广泛的测试需求&#xff0c;从单元测试&#xff08;隔离测试一个类&#xff09;到集成测试&#xff08;测试由…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023