软件项目外包网seo应该怎么做
❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
36-流星动画3D相册
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css"></head>
<body><div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div> <div class="wrap"><img src="images/a.jpg" alt="" class="box"><img src="images/b.jpg" alt="" class="box"><img src="images/c.jpg" alt="" class="box"><img src="images/d.jpg" alt="" class="box"><img src="images/e.jpg" alt="" class="box"><img src="images/g.jpg" alt="" class="box"> <img src="images/h.jpg" alt="" class="square "><img src="images/i.jpg" alt="" class="square "><img src="images/j.jpg" alt="" class="square "><img src="images/k.jpg" alt="" class="square "> <img src="images/l.jpg" alt="" class="square "><img src="images/f.jpg" alt="" class="square "></div></body>
</html>🏠CSS样式代码
* {padding: 0;margin: 0;
}
html {background: linear-gradient(#032861 0%, #000000 80%);height: 100%;width: 100%;overflow: hidden;
}/*满天星*/
.wall {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow: hidden;
}
div#midground {background: url("../img/midground.png");/* z-index:1;*/overflow: hidden;animation: cc 60s linear infinite;
}
div#foreground {background: url("../img/foreground.png");overflow: hidden;/* z-index:2; */animation: cc 50s linear infinite;
}@keyframes cc {0% {background-position: 0 0;}100% {background-position: 1000% 0;}
}.wrap {height: 200px;width: 200px;margin: 250px auto;position: relative;perspective: 2000px;/*实现3d效果*/transform-style: preserve-3d; /* 表示所有åå…ƒç´ åœ¨3D空间ä¸å‘ˆçŽ°ã€‚*/transform: rotateX(20deg) rotateY(30deg); /*定义转æ¢ï¼Œåªæ˜¯ç”¨ X 轴的值。 定义转æ¢ï¼Œåªæ˜¯ç”¨ Y 轴的值。*/transform-origin: 50% 50% 0; /*å•ç‹¬100px也行*/animation: move 6s linear infinite;/* linear:æ¯ä¸€æ¥çš„è·ç¦»å’Œå‰ä¸€æ¥éƒ½æ˜¯ç›¸åŒçš„，也就是ç‰é€Ÿè‹¥ä¸åŠ linearï¼Œé‚£ä¼šé»˜è®¤é€Ÿåº¦ä¼šåŠ å¿«ç„¶åŽæœ€åŽä¸€ç‚¹è·ç¦»å†å‡é€Ÿ */
}
/*大æ£æ–¹å½¢æ ·å¼*/
.wrap .box {position: absolute;width: 200px;height: 200px;opacity: 0.8;transition: 2s;
}
/* translateZ(z) 定义 3D 转æ¢ï¼Œåªæ˜¯ç”¨ Z 轴的值。*/
/* scaleY(y) 通过设置 Y 轴的值æ¥å®šä¹‰ç¼©æ”¾è½¬æ¢ã€‚*/
.wrap > img:nth-child(1) {transform: rotateY(0deg) translateZ(100px);
}
.wrap > img:nth-child(2) {transform: translateZ(-100px) rotateY(180deg);
}
.wrap > img:nth-child(3) {transform: rotateY(90deg) translateZ(100px);
}
.wrap > img:nth-child(4) {transform: rotateY(-90deg) translateZ(100px);
}
.wrap > img:nth-child(5) {transform: rotateX(90deg) translateZ(100px);
}
.wrap > img:nth-child(6) {transform: rotateX(-90deg) translateZ(100px);
}
/*å°æ£æ–¹å½¢*/
.wrap .square {display: bloack;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px;
}
.wrap > img:nth-child(7) {transform: rotateY(0deg) translateZ(50px);
}
.wrap > img:nth-child(8) {transform: translateZ(-50px) rotateY(180deg);
}
.wrap > img:nth-child(9) {transform: rotateY(90deg) translateZ(50px);
}
.wrap > img:nth-child(10) {transform: rotateY(-90deg) translateZ(50px);
}
.wrap > img:nth-child(11) {transform: rotateX(90deg) translateZ(50px);
}
.wrap > img:nth-child(12) {transform: rotateX(-90deg) translateZ(50px);
}
@-webkit-keyframes move {/* from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);} *//* 上é¢å’Œä¸‹é¢æ˜¯ä¸€æ ·çš„ */0% {transform: rotateX(0deg) rotateY(0deg);}100% {transform: rotateX(360deg) rotateY(360deg);}
}
/* cursorå±žæ€§å®šä¹‰äº†é¼ æ ‡æŒ‡é’ˆæ”¾åœ¨ä¸€ä¸ªå…ƒç´ è¾¹ç•ŒèŒƒå›´å†…æ—¶æ‰€ç”¨çš„å…‰æ ‡å½¢çŠ¶ */
.wrap:hover {cursor: pointer;
}
.wrap:hover > img:nth-child(1) {transform: rotateY(0deg) translateZ(200px);
}
.wrap:hover > img:nth-child(2) {transform: translateZ(-200px) rotateY(180deg);
}
.wrap:hover > img:nth-child(3) {transform: rotateY(90deg) translateZ(200px);
}
.wrap:hover > img:nth-child(4) {transform: rotateY(-90deg) translateZ(200px);
}
.wrap:hover > img:nth-child(5) {transform: rotateX(90deg) translateZ(200px);
}
.wrap:hover > img:nth-child(6) {transform: rotateX(-90deg) translateZ(200px);
}五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻