feat: 添加默认布局
This commit is contained in:
landaiqing
18
src/components/BlurCard/fonts.less
Normal file
18
src/components/BlurCard/fonts.less
Normal file
@@ -0,0 +1,18 @@
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Bebas Neue';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wdhyzbi.woff2) format('woff2');
|
||||
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Bebas Neue';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/bebasneue/v14/JTUSjIg69CK48gW7PXoo9Wlhyw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
179
src/components/BlurCard/index.less
Normal file
179
src/components/BlurCard/index.less
Normal file
@@ -0,0 +1,179 @@
|
||||
//@import url('./fonts.less');
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light only;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
touch-action: none;
|
||||
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
|
||||
padding: 1rem;
|
||||
background-image: url("@/assets/images/background.png");
|
||||
}
|
||||
|
||||
body::before {
|
||||
--line: color-mix(in lch, canvasText 25%, transparent);
|
||||
--size: 60px;
|
||||
content: "";
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
position: fixed;
|
||||
background:
|
||||
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
|
||||
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
|
||||
//-webkit-mask: linear-gradient(-15deg, transparent 60%, white);
|
||||
mask: linear-gradient(-15deg, transparent 60%, white);
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 600px;
|
||||
aspect-ratio: 2 / 1.1;
|
||||
min-height: 330px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4em;
|
||||
max-width: calc(100% - 2rem);
|
||||
background: hsl(0 0% 50%);
|
||||
}
|
||||
|
||||
article > img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
height: 100%;
|
||||
width: 660px;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: center 43%;
|
||||
object-position: center 43%;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--x: 0;
|
||||
--y: 0;
|
||||
}
|
||||
|
||||
article > img:first-of-type {
|
||||
filter: saturate(1.5) brightness(0.9);
|
||||
-o-object-position: calc(-50% + (var(--x) * 30px)) calc(43% + (var(--y) * -20px));
|
||||
object-position: calc(-50% + (var(--x) * 30px)) calc(43% + (var(--y) * -20px));
|
||||
}
|
||||
|
||||
article > img:last-of-type {
|
||||
-o-object-position: calc(-50% + (var(--x) * 40px)) calc(43% + (var(--y) * -40px));
|
||||
object-position: calc(-50% + (var(--x) * 40px)) calc(43% + (var(--y) * -40px));
|
||||
}
|
||||
|
||||
article h3 {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 6%;
|
||||
margin: 0;
|
||||
font-size: 8rem;
|
||||
translate: -50% 0;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Bebas Neue', sans-serif;
|
||||
color: white;
|
||||
translate: calc(-50% + (var(--x) * -30px)) calc(var(--y) * -20px);
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 32%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.content svg {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.content p:first-of-type::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 50%;
|
||||
width: 6ch;
|
||||
background: white;
|
||||
height: 1px;
|
||||
translate: -50% 0;
|
||||
}
|
||||
|
||||
.content p:last-of-type {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Blurring */
|
||||
.blur {
|
||||
position: absolute;
|
||||
inset: 60% 0 -26% 0;
|
||||
filter: blur(20px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blur img {
|
||||
-o-object-position: calc(-50% + (var(--x) * 40px)) calc(47.5% + (var(--y) * -40px));
|
||||
object-position: calc(-50% + (var(--x) * 40px)) calc(47.5% + (var(--y) * -40px));
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
left: 50%;
|
||||
translate: -50% 0;
|
||||
height: 330px;
|
||||
position: absolute;
|
||||
bottom: 25%;
|
||||
width: 660px;
|
||||
//-webkit-mask: radial-gradient(50% 100% at 50% 90%, white 50%, transparent);
|
||||
mask: radial-gradient(50% 100% at 50% 90%, white 50%, transparent);
|
||||
filter: saturate(1.5) brightness(0.8);
|
||||
}
|
||||
//
|
||||
//.bear-link {
|
||||
// color: canvasText;
|
||||
// position: fixed;
|
||||
// top: 1rem;
|
||||
// left: 1rem;
|
||||
// width: 48px;
|
||||
// aspect-ratio: 1;
|
||||
// display: grid;
|
||||
// place-items: center;
|
||||
// opacity: 0.8;
|
||||
//}
|
||||
|
||||
:where(.x-link, .bear-link):is(:hover, :focus-visible) {
|
||||
opacity: 1;
|
||||
}
|
||||
.bear-link svg {
|
||||
width: 75%;
|
||||
}
|
||||
47
src/components/BlurCard/index.tsx
Normal file
47
src/components/BlurCard/index.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import './index.less'
|
||||
import { gsap } from 'gsap'
|
||||
const BlurCard: React.FC = () => {
|
||||
useEffect(() => {
|
||||
const UPDATE = ({ x, y}) => {
|
||||
gsap.set(document.documentElement, {
|
||||
'--x': gsap.utils.mapRange(0, window.innerWidth, -1, 1, x),
|
||||
'--y': gsap.utils.mapRange(0, window.innerHeight, -1, 1, y),
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('pointermove', UPDATE)
|
||||
}, [])
|
||||
return (
|
||||
<>
|
||||
<article>
|
||||
<img src='https://assets.codepen.io/605876/osaka-sky.jpeg' alt='' />
|
||||
<h3>Osaka</h3>
|
||||
<img src='https://assets.codepen.io/605876/osaka-tower.png' alt='' />
|
||||
<div className='blur'>
|
||||
<img src='https://assets.codepen.io/605876/osaka.jpeg' alt='' />
|
||||
<div></div>
|
||||
-->
|
||||
</div>
|
||||
<div className='content'>
|
||||
<p>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
viewBox='0 0 24 24'
|
||||
fill='currentColor'
|
||||
className='w-6 h-6'>
|
||||
<path d='M15.75 8.25a.75.75 0 0 1 .75.75c0 1.12-.492 2.126-1.27 2.812a.75.75 0 1 1-.992-1.124A2.243 2.243 0 0 0 15 9a.75.75 0 0 1 .75-.75Z'></path>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM4.575 15.6a8.25 8.25 0 0 0 9.348 4.425 1.966 1.966 0 0 0-1.84-1.275.983.983 0 0 1-.97-.822l-.073-.437c-.094-.565.25-1.11.8-1.267l.99-.282c.427-.123.783-.418.982-.816l.036-.073a1.453 1.453 0 0 1 2.328-.377L16.5 15h.628a2.25 2.25 0 0 1 1.983 1.186 8.25 8.25 0 0 0-6.345-12.4c.044.262.18.503.389.676l1.068.89c.442.369.535 1.01.216 1.49l-.51.766a2.25 2.25 0 0 1-1.161.886l-.143.048a1.107 1.107 0 0 0-.57 1.664c.369.555.169 1.307-.427 1.605L9 13.125l.423 1.059a.956.956 0 0 1-1.652.928l-.679-.906a1.125 1.125 0 0 0-1.906.172L4.575 15.6Z'
|
||||
clipRule='evenodd'></path>
|
||||
</svg>
|
||||
<span>Osaka Castle</span>
|
||||
</p>
|
||||
<p>Osaka, China</p>
|
||||
</div>
|
||||
</article>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default BlurCard
|
||||
Reference in New Issue
Block a user