新网站如何做流量,网站建设微信营销公司,湖南中小企业建站价格,电商网站网络服务#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f4dd; … 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、【关注我都给你】 欢迎点赞 收藏 ⭐留言 效果演示 文末获取源码 代码目录 主要代码实现 部分CSS样式
body {display: grid;grid-template: 1fr 1fr 1fr/1fr 1fr 1fr;background: black;width: 100vw;height: 100vh;margin: 0;padding: 0;
}.fire {position: relative;grid-column: 2/3;grid-row: 2/3;align-self: end;justify-self: center;width: 300px;height: 300px;background: #880e4f;border-radius: 50%;box-shadow: 0 0 50px 50px #880e4f;animation: background 5s ease infinite;
}.flame {position: absolute;bottom: 70px;width: 100px;height: 100px;background-color: red;border-radius: 0 70%;box-shadow: -10px -10px 0 10px orange, -20px -20px 0 20px yellow;animation: flicker 5s ease infinite;
}.f1 {left: 50px;
}.f3 {transform: rotateZ(45deg);left: 100px;bottom: 100px;
}.f2 {transform: rotateZ(90deg);left: 150px;
}.log {position: absolute;bottom: 15px;left: 50px;width: 200px;height: 50px;background-color: brown;border-radius: 10px;
}.l1 {transform: rotateZ(20deg);box-shadow: 0 0 10px #3e2723;
}.l2 {transform: rotateZ(-20deg);box-shadow: 0 0 10px #3e2723;
}.l3 {transform: rotate3d(1, 1, 1, 40deg);
}.l4 {transform: rotate3d(1, 1, 1, -40deg);
}.spark {width: 5px;height: 5px;background-color: orangered;border-radius: 50%;box-shadow: 0 0 5px 3px orange;position: absolute;top: 150px;left: 150px;opacity: 0;
}
HTML代码 :
!DOCTYPE html
html langenheadmeta charsetUTF-8titleSparks Float Up From A Blazing Fire /titlelink relstylesheet hrefcss/style.css/headbodydiv classfirediv classlogsdiv classlog l1/divdiv classlog l2/div/divdiv classflamesdiv classflame f1/divdiv classflame f2/divdiv classflame f3/div/divdiv classsparksdiv classspark s1/divdiv classspark s2/divdiv classspark s3/divdiv classspark s4/divdiv classspark s5/divdiv classspark s6/divdiv classspark s7/divdiv classspark s8/div/div/div/body/html 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看下方微信公众号获取~ 打卡 文章 更新 65 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》 web前端期末大作业网页实战《100套》
