百度做商务网站多少钱,淘宝躺平设计家官网,网站注册域名后怎么做,上海企业管理咨询#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 … 作者主页Java李杨勇 简介Java领域优质创作者、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 效果演示 文末获取源码 代码目录 主要代码实现 CSS样式
* {margin: 0;padding: 0;list-style-type: none;
}a,
img {border: 0;
}:root {--v1: #be91c6;--v2: #8a65cc;--v3: #5e30d9;--transparentv3: #5e30d900;--v4: #3b1895;--s1: #fea798;--s2: #ff846e;--cloud: #fea798;
}.landscape:after,
.landscape:before,
.landscape *,
.landscape *:after,
.landscape *:before {position: absolute;
}.front {z-index: 1;bottom: 0;left: 0;right: 0;
}.landscape {height: 100vh;background-image: linear-gradient(var(--v1), var(--s1), var(--v1));position: relative;z-index: 1;overflow: hidden;
}.mountain {border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%;width: 40vmin;height: 30vmin;bottom: 50%;left: -10vmin;background: var(--s1);background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3));box-shadow: inset -10px 0 10px -10px var(--s1);
}
HTML代码 :
!DOCTYPE html
html langenheadmeta charsetUTF-8titleSunrise over still lake/titlelink relstylesheet hrefcss/style.css/headbodydiv classlandscapediv classmountain/divdiv classmountain mountain-2/divdiv classmountain mountain-3/divdiv classsun-container sun-container-1/divdiv classsun-containerdiv classsun/div/divdiv classcloud/divdiv classcloud cloud-1/divdiv classsun-container sun-container-reflectiondiv classsun/div/divdiv classlight/divdiv classlight light-1/divdiv classlight light-2/divdiv classlight light-3/divdiv classlight light-4/divdiv classlight light-5/divdiv classlight light-6/divdiv classlight light-7/divdiv classwater/divdiv classsplash/divdiv classsplash delay-1/divdiv classsplash delay-2/divdiv classsplash splash-4 delay-2/divdiv classsplash splash-4 delay-3/divdiv classsplash splash-4 delay-4/divdiv classsplash splash-stone delay-3/divdiv classsplash splash-stone splash-4/divdiv classsplash splash-stone splash-5/divdiv classlotus lotus-1/divdiv classlotus lotus-2/divdiv classlotus lotus-3/divdiv classfrontdiv classstone/divdiv classgrass/divdiv classgrass grass-1/divdiv classgrass grass-2/divdiv classreed/divdiv classreed reed-1/div/div/div/body/html 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~ 打卡 文章 更新 47 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
