HTML+CSS+JS制作炫酷特效代码

原创

@码出未来④-web网页设计 2022-10-08 09:31:36 ©著作权

文章标签 web web课程与设计 web前端期末大作业前端网页设计与制作 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

📂文章目录

二、📚网站介绍
三、🔗网站效果

▶️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.视频演示

44-天空中白云飘动CSS3特效

🧩 2.图片演示

HTML+CSS+JS制作炫酷特效代码_web前端期末大作业

四、💒 网站代码

🧱HTML结构代码

🏠CSS样式代码

body, html { font-size: 100%;  padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

body{
  font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}