HTML+CSS+JS实现酷炫情人节爱心动画特效
【摘要】 HTML+CSS+JS实现酷炫情人节爱心动画特效
🍅 作者主页：
🍅 简介：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 & 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天
精彩推荐更新中：
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）