fix:大图底部波浪不动问题、新增颜色可选(#61)

This commit is contained in:
jiewenhuang 2023-09-06 17:38:12 +08:00
parent 859d38807f
commit 3d0707c5b1
3 changed files with 4 additions and 3 deletions

View File

@ -82,7 +82,7 @@
.waves-svg {
width: 100%;
height: 3rem;
fill: #fff;
fill: var(--wave-color);
.parallax > use {
-webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
@ -221,3 +221,4 @@
100% { transform: translateY(0); }
}
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.evan-big-banner_bottom{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}

View File

@ -1 +1 @@
.evan-big-banner{position:relative;width:100%;height:calc(50vh + 50px);display:flex;margin-top:-4rem;justify-content:center;align-items:center;flex-direction:column;background-color:transparent;background-position:center;background-size:cover;overflow:hidden;transition:height 1.6s ease-in-out;background-image:url("http://imgapi.xl0408.top/index.php")}.evan-big-banner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none;background:linear-gradient(90deg, rgba(247,149,51,0.1), rgba(243,112,85,0.1) 15%, rgba(239,78,123,0.1) 30%, rgba(161,102,171,0.1) 44%, rgba(80,115,184,0.1) 58%, rgba(16,152,173,0.1) 72%, rgba(7,179,155,0.1) 86%, rgba(109,186,130,0.1)) no-repeat center 0;background-size:cover}.evan-big-banner img{-o-object-fit:cover;object-fit:cover}.evan-big-banner .infomation{position:absolute;line-height:2}.evan-big-banner .infomation .title{font-size:2rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 .1875rem .3125rem #1c1f21;letter-spacing:.3rem}.evan-big-banner .infomation .desctitle{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f3f3f3;font-size:1rem;padding:0 1rem;text-shadow:0 .1875rem .3125rem #1c1f21}.evan-big-banner .infomation .hitokoto_text{text-shadow:none}.evan-big-banner .infomation .hitokoto_form{font-size:14px;text-shadow:none}.evan-big-banner .infomation .evan-tiktok-text{animation:uk-text-shadow-glitch .65s cubic-bezier(1, -1.91, 0, 2.79) 0s infinite normal both running}.evan-big-banner .evan-big-banner_bottom{width:100%;position:absolute;left:0;bottom:-5px}.evan-big-banner .evan-big-banner_bottom .waves-svg{width:100%;height:3rem;fill:#fff}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use{-webkit-animation:move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;animation:move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:first-child{-webkit-animation-delay:-2s;animation-delay:-2s;-webkit-animation-duration:7s;animation-duration:7s;opacity:.9}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:nth-child(2){-webkit-animation-delay:-3s;animation-delay:-3s;-webkit-animation-duration:10s;animation-duration:10s;opacity:.8}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:nth-child(3){-webkit-animation-delay:-4s;animation-delay:-4s;-webkit-animation-duration:13s;animation-duration:13s;opacity:.9}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:nth-child(4){-webkit-animation-delay:-5s;animation-delay:-5s;-webkit-animation-duration:20s;animation-duration:20s}.evan-big-banner:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=)}@media (max-width:768px){.evan-big-banner{margin-top:0;height:40vh}.evan-big-banner .infomation .title{font-size:1.5rem}.evan-big-banner .infomation .desctitle{font-size:.9rem}.evan-big-banner .evan-big-banner_bottom .waves-svg{height:3rem}}@keyframes uk-text-shadow-glitch{0%{text-shadow:none}25%{text-shadow:-2px -2px 0 #ff004f,2px 2px 0 #00f7ef}50%{text-shadow:2px -2px 0 #ff004f,-2px 2px 0 #00f7ef}75%{text-shadow:-2px 2px 0 #ff004f,2px -2px 0 #00f7ef}100%{text-shadow:2px 2px 0 #ff004f,-2px -2px 0 #00f7ef}}@keyframes uk-flicker{0%{opacity:0}10%{opacity:.6;transform:scale(.8)}20%{opacity:0}40%{opacity:1}50%{opacity:.2;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.evan-big-banner_goto{position:absolute;left:50%;transform:translateX(-50%);bottom:100px}.evan-big-banner_goto .index-goto-icon{font-size:24px;color:#fff;animation:aniIndexGotoIcon 2s ease-in-out infinite;display:inline-block}@keyframes aniIndexGotoIcon{0%{transform:translateY(0)}50%{transform:translateY(15px)}100%{transform:translateY(0)}}
.evan-big-banner{position:relative;width:100%;height:calc(50vh + 50px);display:flex;margin-top:-4rem;justify-content:center;align-items:center;flex-direction:column;background-color:transparent;background-position:center;background-size:cover;overflow:hidden;transition:height 1.6s ease-in-out;background-image:url("http://imgapi.xl0408.top/index.php")}.evan-big-banner::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:-520;pointer-events:none;background:linear-gradient(90deg, rgba(247,149,51,0.1), rgba(243,112,85,0.1) 15%, rgba(239,78,123,0.1) 30%, rgba(161,102,171,0.1) 44%, rgba(80,115,184,0.1) 58%, rgba(16,152,173,0.1) 72%, rgba(7,179,155,0.1) 86%, rgba(109,186,130,0.1)) no-repeat center 0;background-size:cover}.evan-big-banner img{-o-object-fit:cover;object-fit:cover}.evan-big-banner .infomation{position:absolute;line-height:2}.evan-big-banner .infomation .title{font-size:2rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 .1875rem .3125rem #1c1f21;letter-spacing:.3rem}.evan-big-banner .infomation .desctitle{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f3f3f3;font-size:1rem;padding:0 1rem;text-shadow:0 .1875rem .3125rem #1c1f21}.evan-big-banner .infomation .hitokoto_text{text-shadow:none}.evan-big-banner .infomation .hitokoto_form{font-size:14px;text-shadow:none}.evan-big-banner .infomation .evan-tiktok-text{animation:uk-text-shadow-glitch .65s cubic-bezier(1, -1.91, 0, 2.79) 0s infinite normal both running}.evan-big-banner .evan-big-banner_bottom{width:100%;position:absolute;left:0;bottom:-5px}.evan-big-banner .evan-big-banner_bottom .waves-svg{width:100%;height:3rem;fill:var(--wave-color)}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use{-webkit-animation:move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;animation:move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:first-child{-webkit-animation-delay:-2s;animation-delay:-2s;-webkit-animation-duration:7s;animation-duration:7s;opacity:.9}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:nth-child(2){-webkit-animation-delay:-3s;animation-delay:-3s;-webkit-animation-duration:10s;animation-duration:10s;opacity:.8}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:nth-child(3){-webkit-animation-delay:-4s;animation-delay:-4s;-webkit-animation-duration:13s;animation-duration:13s;opacity:.9}.evan-big-banner .evan-big-banner_bottom .waves-svg .parallax>use:nth-child(4){-webkit-animation-delay:-5s;animation-delay:-5s;-webkit-animation-duration:20s;animation-duration:20s}.evan-big-banner:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVQImU3IMREAIAgAwJfNkQCEsH8cijjpMf6vnXlQaIiJFx+omEBfmqIEZLe2jzcAAAAASUVORK5CYII=)}@media (max-width:768px){.evan-big-banner{margin-top:0;height:40vh}.evan-big-banner .infomation .title{font-size:1.5rem}.evan-big-banner .infomation .desctitle{font-size:.9rem}.evan-big-banner .evan-big-banner_bottom .waves-svg{height:3rem}}@keyframes uk-text-shadow-glitch{0%{text-shadow:none}25%{text-shadow:-2px -2px 0 #ff004f,2px 2px 0 #00f7ef}50%{text-shadow:2px -2px 0 #ff004f,-2px 2px 0 #00f7ef}75%{text-shadow:-2px 2px 0 #ff004f,2px -2px 0 #00f7ef}100%{text-shadow:2px 2px 0 #ff004f,-2px -2px 0 #00f7ef}}@keyframes uk-flicker{0%{opacity:0}10%{opacity:.6;transform:scale(.8)}20%{opacity:0}40%{opacity:1}50%{opacity:.2;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}.evan-big-banner_goto{position:absolute;left:50%;transform:translateX(-50%);bottom:100px}.evan-big-banner_goto .index-goto-icon{font-size:24px;color:#fff;animation:aniIndexGotoIcon 2s ease-in-out infinite;display:inline-block}@keyframes aniIndexGotoIcon{0%{transform:translateY(0)}50%{transform:translateY(15px)}100%{transform:translateY(0)}}.parallax>use{animation:move-forever 12s linear infinite}.parallax>use:nth-child(1){animation-delay:-2s}.parallax>use:nth-child(2){animation-delay:-2s;animation-duration:5s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:3s}@keyframes move-forever{0%{transform:translate(-90px, 0%)}100%{transform:translate(85px, 0%)}}.evan-big-banner_bottom{width:100%;height:40px;position:relative;overflow:hidden;z-index:1;background:var(--footer-bg)}.editorial{display:block;width:100%;height:40px;margin:0}

View File

@ -34,7 +34,7 @@
<th:block th:if="${htmlType == 'post'} or ${htmlType == 'journals'} or ${htmlType == 'sheet'}">
<script th:src="@{/assets/lib/clipboard/clipboard.min.js}"></script>
</th:block>
<th:block th:if="${theme.config.custom.favicon == true && theme.config.custom.favicon != null && theme.config.custom.favicon != ''}">
<th:block th:if="${theme.config.custom.favicon != null && theme.config.custom.favicon != ''}">
<script th:src="@{/assets/lib/favico/favico.min.js}"></script>
</th:block>
<th:block th:if="${htmlType == 'post'}">