HTML+CSS+JS实现卡通湖面上日出动画特效

java奥斯卡
1,509 阅读2分钟

「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战

临近期末了, 你还在为HTML网页设计结课作业,网页要求的总数量太多？老师的作业要求感到头大？没有合适的模板？HTML网页作业无从下手？等等一系列问题。你想要解决的问题，在专栏这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 旅游、 电商、 宠物、 电器、 茶叶、物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 A+水平作业、其他等网页设计题目,, 可满足大学生网页大作业网页设计需求都能满足你的需求。web大学生网页设计作业源码，原始HTML+CSS+JS页面设计, 这是一个不错的# HTML+CSS+JS实现# 卡通湖面上日出动画特效网页设计制作，画面精明简单使用  

 效果演示： 

image.png

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 lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Sunrise over still lake</title>
 
 
    <link rel="stylesheet" href="css/style.css">
 
</head>
 
<body>
 
    <div class="landscape">
 
        <div class="mountain"></div>
        <div class="mountain mountain-2"></div>
        <div class="mountain mountain-3"></div>
        <div class="sun-container sun-container-1">
        </div>
        <div class="sun-container">
            <div class="sun"></div>
        </div>
        <div class="cloud"></div>
        <div class="cloud cloud-1"></div>
        <div class="sun-container sun-container-reflection">
            <div class="sun"></div>
        </div>
        <div class="light"></div>
        <div class="light light-1"></div>
        <div class="light light-2"></div>
        <div class="light light-3"></div>
        <div class="light light-4"></div>
        <div class="light light-5"></div>
        <div class="light light-6"></div>
        <div class="light light-7"></div>
        <div class="water"></div>
        <div class="splash"></div>
        <div class="splash delay-1"></div>
        <div class="splash delay-2"></div>
        <div class="splash splash-4 delay-2"></div>
        <div class="splash splash-4 delay-3"></div>
        <div class="splash splash-4 delay-4"></div>
        <div class="splash splash-stone delay-3"></div>
        <div class="splash splash-stone splash-4"></div>
        <div class="splash splash-stone splash-5"></div>
        <div class="lotus lotus-1"></div>
        <div class="lotus lotus-2"></div>
        <div class="lotus lotus-3"></div>
        <div class="front">
            <div class="stone"></div>
            <div class="grass"></div>
            <div class="grass grass-1"></div>
            <div class="grass grass-2"></div>
            <div class="reed"></div>
            <div class="reed reed-1"></div>
        </div>
    </div>
 
</body>
 
</html>

 打卡 文章 更新  198 /  100天

大家可以点赞、收藏、关注、评论我啦 ！

在这里插入图片描述

avatar
文章
阅读
粉丝