HTML+CSS+JS实现酷炫情人节爱心动画特效

举报
Java李杨勇 发表于 2022/02/28 20:47:21 2022/02/28
【摘要】 HTML+CSS+JS实现酷炫情人节爱心动画特效

​

🍅 作者主页：Java李杨勇 

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示： 文末获取源码

​ ​


代码目录：


​

主要代码实现：

CSS样式：

:root {
    --linear-deg: 90deg;
    --color_one_rgb: 255;
    --color_two_rgb: 255;
    --color_three_rgb: 255;
    --color_one_opacity: 0.2;
    --start: 0%;
    --color_four_rgb: 10;
    --color_five_rgb: 0;
    --color_six_rgb: 94;
    --color_two_opacity: 1;
    --end: 100%;
    /* Special Variables */
    --url: url("https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455_960_720.jpg");
    --font-color: #fff;
    --font-size: 6vw;
    --blend-mode: screen;
    --animation-speed: 5s;
    --transition: ease;
}

body {
    background: var(--url);
    background-size: cover;
    background-repeat: no-repeat;
    font-family: sans-serif;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.main {
    height: 100%;
    width: 100%;
    background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: Infite var(--animation-speed) var(--transition) infinite;
    -webkit-animation: Infite var(--animation-speed) var(--transition) infinite;
    -moz-animation: Infite var(--animation-speed) var(--transition) infinite;
    background-size: 125% 125%;
}

@-webkit-keyframes Infite {
    0% {
        background-position: 0% 97%
    }
    50% {
        background-position: 100% 4%
    }
    100% {
        background-position: 0% 97%
    }
}

@-moz-keyframes Infite {
    0% {
        background-position: 0% 97%
    }
    50% {
        background-position: 100% 4%
    }
    100% {
        background-position: 0% 97%
    }
}

@keyframes Infite {
    0% {
        background-position: 0% 97%
    }
    50% {
        background-position: 100% 4%
    }
    100% {
        background-position: 0% 97%
    }
}

h1 {
    color: var(--font-color);
    font-size: var(--font-size);
    border: .5vw solid black;
    padding: 0.5rem 1rem;
}

.blend {
    mix-blend-mode: var(--blend-mode);
}

.form_container {
    position: absolute;
    bottom: 0;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem 2rem;
    background: rgba( 255, 255, 255, 0.55);
    background: rgba( 255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
    backdrop-filter: blur( 20px);
    -webkit-backdrop-filter: blur( 20px);
    border-radius: 1rem 0 0 1rem;
    width: 250px;
    overflow: auto;
}

.formgroup {
    width: 100%;
}

.description {
    width: auto;
    padding: 0.2rem 0;
    font-weight: 600;
    font-size: 1rem;
}

h2 {
    position: relative;
    font-weight: 700;
    margin: 0.5rem 0;
    padding: 0;
    font-size: 1.3rem;
    flex: 100%;
}

h2::after {
    content: "";
    position: absolute;
    width: 25px;
    max-width: 200px;
    bottom: 0;
    left: 5rem;
    height: 25px;
    border-radius: 50%;
}

#titelColorOne::after {
    background: rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), 1) var(--start);
}

#titelColorTwo::after {
    background: rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), 1) var(--end);
}

.slider {
    -webkit-appearance: none;
    width: 50%;
    border-radius: 1rem;
    height: 10px;
    background: #e0e0e0;
    box-shadow: inset 7px 7px 14px #bebebe, inset -7px -7px 14px #ffffff;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 1rem;
    border: 1px solid white;
    background: linear-gradient( var(--linear-deg), rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start), rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    linear-gradient( var(--linear-deg),
    rgba(var(--color_one_rgb), var(--color_two_rgb), var(--color_three_rgb), var(--color_one_opacity)) var(--start),
    rgba(var(--color_four_rgb), var(--color_five_rgb), var(--color_six_rgb), var(--color_two_opacity)) var(--end));
    cursor: pointer;
}

#colorSelect {
    width: 50%;
    margin: 0;
    padding: 0;
    font-weight: 600;
    background: #fff;
    cursor: pointer;
}

.input {
    width: 100%;
    margin: 0;
    padding: .5rem 0;
    font-weight: 600;
    background: #fff;
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */

::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

summary {
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0.5rem 0 0 0;
}

@media only screen and (max-width: 1000px) {
    .form_container {
        bottom: 0;
        left: 0;
        right: 0;
        width: 0%;
        top: 70%;
        flex-direction: row;
        border-radius: 1rem 1rem 0 0;
        width: 90%;
    }
    .formgroup {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media only screen and (max-width: 600px) {
    body {
        height: 100%;
        overflow: auto;
        width: 100%;
    }
    .blend {
        height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .main {
        flex-direction: column;
        width: 100%;
    }
    .form_container {
        width: 80%;
        position: static;
        flex-direction: column;
        border-radius: 1rem 1rem 0 0;
        height: 100%;
        background: white;
        justify-content: center;
        align-items: center;
    }
    .formgroup {
        height: 100%;
        width: 90%;
        border: 4px solid black;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
    }
}

HTML和JavaScript代码 :

A<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Light to Dark | Play with Gradient &amp; Mix-Blend-Mode</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="main">
        <div class="blend">
            <h1>从亮到暗</h1>
        </div>
        <div class="form_container">
            <div class="formgroup">
                <h2 id="titelColorOne">Color 1</h2>
                <div class="description">R</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="one">
                <span id="one_value">255</span>
                <br>
                <div class="description">G</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="two">
                <span id="two_value">255</span>
                <br>
                <div class="description">B</div><input class="slider" type="range" min="0" max="255" step="1.0" value="255" id="three">
                <span id="three_value">255</span>
                <br>
                <div class="description">A</div><input class="slider" type="range" min="0" max="1" step="0.1" value="0.2" id="opacity_one">
                <span id="opacity_one_value">0.2</span>
                <br>
                <div class="description">Startpoint</div>
                <input class="slider" type="range" min="0" max="100" step="1.0" value="0" id="start">
                <span id="start_value">0</span>
            </div>
            <div class="formgroup">
                <h2 id="titelColorTwo">Color 2</h2>
                <div class="description">R</div><input class="slider" type="range" min="0" max="255" step="1.0" value="10" id="four">
                <span id="four_value">10</span>
                <br>
                <div class="description">G</div><input class="slider" type="range" min="0" max="255" step="1.0" value="0" id="five">
                <span id="five_value">0</span>
                <br>
                <div class="description">B</div><input class="slider" type="range" min="0" max="255" step="1.0" value="94" id="six">
                <span id="six_value">94</span>
                <br>
                <div class="description">A</div><input class="slider" type="range" min="0" max="1" step="0.1" value="1" id="opacity_two">
                <span id="opacity_two_value">1</span>
                <br>
                <div class="description">Endpoint</div><input class="slider" type="range" min="0" max="100" step="1.0" value="100" id="end">
                <span id="end_value">100%</span>
            </div>
            <div class="formgroup">
                <h2>DEG & Blend-Mode</h2>
                <div class="description">DEG</div><input class="slider" type="range" min="0" max="360" step="1.0" value="90" id="deg">
                <span id="deg_value">90deg</span>
                <div class="description">Mix-Blend-Mode</div>
                <select name="mix-blend" class="input" id="mixBlend">
				<option value="normal">normal</option>
				<option value="multiply">multiply</option>
				<option value="screen">screen</option>
				<option value="overlay">overlay</option>
				<option value="darken">darken</option>
				<option value="lighten">lighten</option>
				<option value="color-dodge">color-dodge</option>
				<option value="color-burn">color-burn</option>
				<option value="hard-light">hard-light</option>
				<option value="soft-light">soft-light</option>
				<option value="difference">difference</option>
				<option value="exclusion">exclusion</option>
				<option value="hue">hue</option>
				<option value="saturation">saturation</option>
				<option value="color">color</option>
				<option value="luminosity">luminosity</option>
				<option value="initial">initial</option>
				<option value="inherit">inherit</option>
				<option value="unset">unset</option>
			</select>

                <details>
                    <summary>More</summary>
                    <br>
                    <div class="description">Font Color</div><input type="color" value="" id="colorSelect">
                    <br>
                    <div class="description">FontSize</div><input class="slider" type="range" min="0" max="10" step="0.25" value="3" id="fontSize">
                    <span id="font_value">3vw</span>
                    <div class="description">Transition</div>
                    <select name="transition" class="input" id="transition">
					<option value="ease">ease</option>
					<option value="linear">linear</option>
					<option value="ease-in-out">ease-in-out</option>
					<option value="ease-in">ease-in</option>
					<option value="ease-out">ease-out</option>

				</select>

                    <div class="description">Animation Speed</div><input class="slider" type="range" min="0.5" max="20" step="0.25" value="5" id="speed">
                    <span id="speed_value">5s</span>
                    <br>
                    <div class="description">Backgorund Image Url</div><input type="url" value="img/fh.jpg" class="input" id="urlInput"></p>
                </details>

            </div>
        </div>
    </div>

    <script src="js/script.js"></script>

</body>

</html>

上面的script.js文件需要引入进来

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~！

打卡 文章 更新 51  /  100天

精彩推荐更新中：

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》 

​

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入