- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

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

Java李杨勇发表于 2022/02/28 20:47:21 2022/02/28

2k+ 0 0

【摘要】 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

点赞
收藏
关注作者

作者其他文章

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

全部回复

上滑加载中

设置昵称

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

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

确认取消

开发者空间

了解空间

工作台

开发工具

实战案例

空间活动

空间论坛

开发平台

软件开发生产线 CodeArts

AI平台ModelArts

数据治理中心 DataArts Studio

数字内容生产线 MetaStudio

精选服务

云数据库 GaussDB

云数据库 RDS for MySQL

MapReduce服务 MRS

数据仓库服务 DWS

分布式缓存服务Redis版

分布式消息服务 DMS

华为云实时音视频 SparkRTC

媒体处理 MPC

主机迁移服务 SMS

对象存储迁移服务 OMS

云消息服务 KooMessage

云手机服务 KooPhone

企业搜索服务 KooSearch

云地图服务 KooMap

更多开放能力

开发工具

API生态

CodeArts API

API Explorer

Terraform Explorer

KooCLI

API 中心

SDK 中心

开发服务

Codelabs

DevStar

低代码平台Astro

CodeArts IDE

Huawei Cloud Toolkit

Classroom

开发资源

开源镜像站

开源资源

开发语言

开发实践

入门精选

分发资源

企业应用中心

企业通用专区

教育专区

华为应用专区

政务云专区

硬件云服务商城

医疗健康专区

跳蚤市场

华为云开发者日

直播专区

开发者精品活动

DTSE Tech Talk

加入HCDE

加入HCDG

加入HCSD

加入HCWD

鲁班会

沃土云创计划·企业

沃土云创计划·高校

沃土云创计划·个人

沃土云创计划·开源共创

博客

论坛

专题

开发者榜单

学习路径

在线课程

动手实验

考试认证

培训服务