? 精彩专栏推荐????????????
?? 作者主页: 【进入主页—??获取更多源码】
?? web前端期末大作业: 【??HTML5网页期末作业 (1000套) 】
?? 程序员有趣的告白方式:【??HTML七夕情人节表白网页制作 (125套) 】
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意花礼物码表白是创意DIY者…无论那种形式,快来秀我们一脸吧!
??文章目录
- 二、??网站介绍
- 三、??网站效果
-
- ??1.视频演示
- ?? 2.图片演示
- 四、?? 网站代码
-
- ??HTML结构代码
- ??CSS样式代码
- 五、??更多源码
二、??网站介绍
??网站文件方面:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
??网页编辑方面:可使用任意HTML编辑软件(如: 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)??html文件包含:其中index.html是首页、其他html为二级页面;
(2)?? css文件包含:css全部页面样式,3D动态效果,雪花飘落等等
(3)?? js文件包含:页面炫酷效果实现
三、??网站效果
??1.视频演示
29-绘制冬季下雪3D相册
?? 2.图片演示
四、?? 网站代码
??HTML结构代码
??CSS样式代码
@charset "utf-8";* { margin: 0; padding: 0;}body { max-width: 100%; min-width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; position: absolute; margin-left: auto; margin-right: auto;}li { list-style: none;}.box { width: 200px; height: 200px; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; margin-left: 45%; margin-top: 30%; position: absolute; z-index: 999999 !important; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(13deg); -webkit-animation: move 5s linear infinite;}.minbox { width: 100px; height: 100px; position: absolute; left: 50px; top: 30px; -webkit-transform-style: preserve-3d;}.minbox li { width: 100px; height: 100px; position: absolute; left: 0; top: 0;}.minbox li:nth-child(1) { background: url来源:@蜡笔小新星
声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!