问题描述
我不知道该怎么做，也不知道它有什么可能，也欢迎任何其他解决方案。很难用文字解释，但我会尽我最大的努力使您理解期望。在这里，我附加了我在网页上所做的屏幕记录的链接。我有一个白色徽标，看起来很不错，并且彩色渐变效果也很好。
Video of the webpage - play
当我滚动页面时，全彩色渐变上升，徽标背面出现白色背景。
* {
margin: 0;
Box-sizing: border-Box;
font-family: Century Gothic;
}
/** body **/
body {
overflow-x: hidden
}
.front1 {
padding: 50px 100px;
height: 100vh;
align-content: center;
background-image: linear-gradient(111.37738709038058deg,rgba(43,45,78,1) 1.557291666666667%,rgba(225,20,139,1) 101.34895833333333%);
/*linear-gradient(114.50890543382422deg,rgba(28,66,1) 1.6731770833333333%,rgba(0,235,215,1) 97.94270833333331%);*/
background-repeat: no-repeat;
display: inherit;
align-items: center;
}
/** header **/
.logo{
position: fixed;
top: 41px;
}
.main {
align-items: center;
position: fixed;
float: right;
right: 50px;
top: 50px;
}
/** Header menu **/
ul {
margin-top: 0;
list-style-type: none;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
text-shadow: #000;
border: 1px solid transparent;
color: #b61e83;
padding: 5px 20px;
transition: 0.6s ease;
}
ul li a:hover {
background-color: #b61e83;
color: #fff;
}
ul li.active a {
background-color: #b61e83;
color: #fff;
}
/** SVG shadow **/
#top {
position: fixed;
top: 0px;
-webkit-filter: drop-shadow(20px 20px 10px rgba(0,.4));
filter: drop-shadow(20px 20px 10px rgba(0,.4));
}
#bottom {
position: absolute;
bottom: 0px;
-webkit-filter: drop-shadow(-8px -8px 10px rgba(0,.4));
filter: drop-shadow (-8px 10px rgba(0,.4));
}
/** home text **/
.hometext {
position: absolute;
right: 25%;
top: 40%;
color: #fff;
width: 500px;
}
.quote {
position: relative;
justify-content: center;
}
/** clock css **/
.clock {
position: absolute;
top: 25%;
left: 18vw;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background: url(../images/_clock.png);
background-size: cover;
border-radius: 50%;
Box-shadow: 0 -25px +25px rgba(255,255,0.05),inset 0 -25px +25px rgba(255,0 25px 25px rgba(0,inset 0 25px 25px rgba(0,0.05);
}
.clock:before {
content: '';
position: absolute;
width: 25px;
height: 25px;
background: #fff;
border-radius: 50%;
z-index: 1000;
}
.clock .hour,.clock .min,.clock .sec {
position: absolute;
}
.clock .hour,.hr {
width: 260px;
height: 200px;
}
.clock .min,.mn {
width: 250px;
height: 300px;
}
.clock .sec,.sc {
width: 330px;
height: 330px;
}
.hr,.mn,.sc {
display: flex;
justify-content: center;
/*align-items: center;*/
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 12px;
height: 90px;
background: #ff105e;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 150px;
background: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 200px;
background: #fff;
z-index: 12;
border-radius: 6px 6px 0 0;
}
/** animated background **/
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255,0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 100%;
}
}
/** footer **/
footer {
position: absolute;
height: 100vh;
width: 100%;
text-align: center;
background-image: linear-gradient(111.37738709038058deg,1) 101.34895833333333%);
color: #fff;
padding: 20px;
z-index: -1;
}
footer p {
padding: 10px;
width: 100%;
position: absolute;
bottom: 0;
}
footer a {
color: inherit;
text-decoration: none;
}
footer a:hover {
color: yellow;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Javascript Clack UI Dark</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="front1">
<!-- HTML for clock -->
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<!-- java scrtipt for clock -->
<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
<!-- Header paragraph -->
<div class="hometext">
<h3>neram | classes</h3><br>
<p>Meeting right person at right time will change everything in life. It happended for us.</p><br>
<p class="quote">“We are one of that kind” </p><br>
<p>Hence we name our initiative as neram ( Time ). neram is not a typical NATA coaching center,we are architects & Designers from varIoUs parts of the world working for the betterment of next generation of architects. We belive our NATA coaching is the starting point for that.</p>
</div>
<!-- Animates shapes -->
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- Head elements -->
<header>
<img class="logo" src="images/web-yellow.png">
<!-- SVG cuts -->
<svg id="bottom" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 752 287">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="M1366,481s-45,75-124,138S1040,726,941,746s-327,22-327,22h752Z" transform="translate(-614 -481)" />
</svg>
<svg id="top" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1144 107.17">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="M221.5-.5s2.26,6.49.19C261.54.77,419,7.31,557.5,37.5c156,34,299,65,474,69s334-66,334-66V-.5Z" transform="translate(-221.5 0.5)" />
</svg>
<div class="main">
<ul>
<li class="active"><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Team</b></a></li>
<li><a href="#"><b>Exams</b></a></li>
<li><a href="#"><b>Books</b></a></li>
<li><a href="#"><b>Demo</b></a></li>
<li><a href="#"><b>Alumnus</b></a></li>
<li><a href="#"><b>Contact</b></a></li>
</ul>
</div>
</header>
</section>
<section class="front2">
<p>
Hence we name our initiative as neram ( Time ). neram is not a typical NATA coaching center,we are architects & Designers from varIoUs parts of the world working for the betterment of next generation of architects. We belive our NATA coaching is the starting point for that.Hence we name our initiative as neram ( Time ). neram is not a typical NATA coaching center,we are architects & Designers from varIoUs parts of the world working for the betterment of next generation of architects. We belive our NATA coaching is the starting point for that.
Hence we name our initiative as neram ( Time ). neram is not a typical NATA coaching center,we are architects & Designers from varIoUs parts of the world working for the betterment of next generation of architects. We belive our NATA coaching is the starting point for that.
</p>
</section>
</body>
<footer>
<!-- copyright -->
<p>copyright © <script>
document.write(new Date().getFullYear())
</script><b><a id="copyfooter" href="#" target="_blank" neramclasses</a></b>
</p>
</footer></html>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）