??文章目录
- 二、?? 站介绍
- 三、?? 站效果
-
- ??1.视频演示
- ?? 2.图片演示
- 四、?? 站代码
-
- ??HTML结构代码
- ??CSS样式代码
- 五、??更多源码
二、?? 站介绍
?? 站文件方面：html 页结构文件、css 页样式文件、js 页特效文件、images 页图片文件；
三、?? 站效果
??1.视频演示
13-css求婚动画源码
?? 2.图片演示
四、?? 站代码
??HTML结构代码
??CSS样式代码
/*top 烟花字体 */.w-t{ margin: 100px auto; width: 500px;}.w-t img{ opacity: 0; animation: bloom 2s ease 1.2s infinite;}.w-t img.boom2{ float: right; animation: bloom 2s ease 1.5s infinite;}.w-t img.boom3{ position: absolute; margin-top: 40px; animation: bloom 2s ease 1.4s infinite;}@keyframes bloom{ 0% { transform: scale(0,0); } 100% { opacity: 1; transform: scale(1,1); }}.w-t-m{ position: absolute; left: 50%; z-index: 10; line-height: 80px; color: #ff720a; letter-spacing: 5px; opacity: 0; animation: titleBloom 1s linear 1s both; font-size: 26px; margin-left: -125px;}@keyframes titleBloom{ 0% { transform: translate(-50px); } 100% { opacity: 1; transform: translate(0); }}/*人物类 */.w-p{ margin: -50px auto; width: 1000px; overflow: hidden;}.w-m{ float: left; width: 50%;}.w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both;}@keyframes toWoman{ 0%{ opacity: 0; transform: translate(-200px); } 100%{ opacity: 1; transform: translate(0); }}.w-w{ float: right; width: 50%;}.w-w img{ margin-left: 0; float: left; animation: showW 0.8s ease 0s both;}@keyframes showW{ 声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！