南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

HTML+CSS+JS制作3D动态相册表白网站代码【程序员专属情人节表白网站】

发布时间:2024-09-04

来源:

一、📚网站介绍

基于html+css+js制作的表白网页代码,可以直接替换文字和图片即可使用

二、🔗作品效果

▶️视频演示

(title-HTML5七夕情人节表白源代码 樱花雨3D相册)]

🧩 截图演示

三、💒 作品代码

🧱HTML代码




  
    
    
    
    
    
  
  
    
    

🏠CSS代码


@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}
.box:hover ol li:nth-child(3) {
  -webkit-transform: rotateX(-90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(4) {
  -webkit-transform: rotateX(90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(5) {
  -webkit-transform: rotateY(-90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
.box:hover ol li:nth-child(6) {
  -webkit-transform: rotateY(90deg) translateZ(300px);
  width: 400px;
  height: 400px;
  opacity: 0.8;
  left: -100px;
  top: -100px;
}
@keyframes move {
  0% {
    -webkit-transform: rotateX(13deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateX(13deg) rotateY(360deg);
  }
}

四、🎁更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库(持续更新中...)

📕【web学习指南】从web基础、计算机基础到前端常用框架的教程,涵盖前端大部分必备知识(学习指南 + 技术文章 + 资源分享)

策略思维与细节的完美结合,有效帮您减少试错成本

策略思维与细节的完美结合,有效帮您减少试错成本

立即与安优联系,开启网站设计全新体验

立即与安优联系,开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

在线咨询

在线咨询

拨打电话

返回顶部

品质设计 用心服务

  • 12年+定制经验

  • 600+客户选择

  • 高效售后保障

7*24小时服务热线