11111

<html lang="en"><head><meta charset="UTF-8"><link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png"><meta name="apple-mobile-web-app-title" content="CodePen"><link rel="icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico"><link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111"><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script><title>Christmas gift Card-CSS Art</title><link rel="canonical" href="https://codepen.io/basamraz/pen/WNyWKxq">
<style>@import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");
body {background: #0f3631;overflow: hidden;}
.contentWrap {
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
perspective: 800px;
}
.contentWrap .front {
position: relative;
width: 400px;
height: 250px;
background: linear-gradient(180deg, #ac2121, #7c0f0f);
transform: rotateX(-10deg);
transform-origin: bottom center;
transform-style: preserve-3d;
perspective: 800px;
border-bottom: none;
border-radius: 10px 10px 0 0;
}
.contentWrap .front h1 {
font-size: 30px;
text-align: center;
transform: translate3d(0, 60px, 70px);
letter-spacing: 2px;
line-height: 27px;
color: #fff;
font-family: "Handlee", cursive, "Apple SD Gothic Neo", arial;
}
.contentWrap .front .tree {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background: url("https://ucarecdn.com/537038c2-628a-438c-8471-04f6632885e7/tree.png") center bottom/90% no-repeat;
transform: translate3d(0, 0, 70px);
}
.contentWrap .front .snow {
position: absolute;
bottom: 0;
width: 100%;
height: 230px;
background: url("https://ucarecdn.com/6192c77f-54b7-4e68-bfc0-11e0bb8ca24c/snow.png") center bottom/94% no-repeat;
transform: translate3d(0, 0, 45px);
opacity: 0.8;
}
.contentWrap .front .tree2 {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background: url("https://ucarecdn.com/8f99d8a1-1c69-43b4-b013-3c706cfae890/tree2.png") center bottom/95% no-repeat;
transform: translate3d(0, 0, 40px);
}
.contentWrap .front .moon {
position: absolute;
width: 80px;
height: 80px;
bottom: 0;
left: 50%;
background-color: #f7c02c;
border-radius: 100%;
z-index: 10;
transform: translate3d(-50%, -40px, 20px);
}
.contentWrap .back {
position: relative;
width: 400px;
height: 200px;
background: linear-gradient(180deg, #d8d8d8, #c7c7c7);
transform: rotateX(70deg);
transform-origin: top center;
border-top: none;
transform-style: preserve-3d;
perspective: 800px;
border-radius: 0 0 10px 10px;
}
.contentWrap .back h3 {
position: absolute;
font-size: 12px;
text-align: right;
font-weight: 100;
right: 0px;
bottom: 0;
transform-origin: bottom;
transform: translate3d(-20px, 0px, 2px);
color: #000;
font-family: "Handlee", cursive, "Apple SD Gothic Neo", arial;
}
.contentWrap .back .msg {
position: absolute;
display: block;
width: 100%;
font-size: 12px;
text-align: center;
font-weight: 100;
top: 100px;
left: 0px;
transform-origin: bottom;
transform: translate3d(0px, 0px, 2px);
color: #000;
}
.slideshow-container {
position: relative;
width: 100%;
height: 500px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.slides {
width: 100%;
height: 100%;
position: relative;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease;
background-size: cover;
background-position: center;
}
.slide.active {
opacity: 1;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 25px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
transform: translateY(30px);
opacity: 0;
transition: all 0.5s ease 0.3s;
}
.slide.active .slide-content {
transform: translateY(0);
opacity: 1;
}
</style><script>window.console = window.console || function(t) {};</script>
</head>
<body translate="no">
<div class="contentWrap" style="transform: translate(-50%, -50%) rotateX(-5.75deg) rotateY(-32.1deg);">
<div class="front">
<h1>Merry Christmas</h1>
<div class="tree2"></div>
<div class="snow"></div>
<div class="tree"></div>
<div class="moon"></div>
</div>
<div class="back">
<div style="width:100%;height:40%;"></div>
<div style="width:100%;height:60%;">
<div class="slideshow-container" style="width:100%;height:100%;">

<div class="slides" style="width:100%;height:100%;">

<div class="slide active" style="background-image: url('https://photogzmaz.photo.store.qq.com/psc?/V52oif0O2o3aqC1GHf6w2G2bAb2rvg18/LiySpxowE0yeWXwBdXN*Sb1sX3Q19eXcPsZ9dgyrrU.ffBthmHzCJCs4*Q4hQ0HyiDK3xiIQkslw8PeqU3snP3UiI.Uy6ON8dR4sZAMcogo!/b&bo=mghABpoIQAYBByA!&rf=viewer_4');width:100%;height:100%;">
</div>
<div class="slide" style="background-image: url('http://photogzmaz.photo.store.qq.com/psc?/V52oif0O2o3aqC1GHf6w2G2bAb2rvg18/LiySpxowE0yeWXwBdXN*SWE*.Cnt.tF*uqp*SJchUOnfNgIelUDUazFQYOImIeLwx1y.6ur8f0vovd4Y1v32vqByEC7dIRLAz.Tsf82y8rc!/b&bo=wQKfAcECnwEDNxI!&rf=viewer_4&t=5');width:100%;height:100%;">
</div>
<div class="slide" style="background-image: url('http://photogzmaz.photo.store.qq.com/psc?/V52oif0O2o3aqC1GHf6w2G2bAb2rvg18/LiySpxowE0yeWXwBdXN*SatZqt*R2Eoz.HpQAXKnYMavBXHbTLXQZIO91IkfWhx2DKCJVIoGKeQJWT5YUsnaurV73x8xSWjWs6HBWO5KROQ!/b&bo=rAMCAqwDAgIDR2I!&rf=viewer_4&t=5');width:100%;height:100%;">
</div>
<div class="slide" style="background-image: url('http://photogzmaz.photo.store.qq.com/psc?/V52oif0O2o3aqC1GHf6w2G2bAb2rvg18/LiySpxowE0yeWXwBdXN*SbUiHGgHHMbLE5u3xAY24v.8htB0UeJS63.54M.M9lOsbL05c.cGnZW8PP6G87YgXNZmFIg8pkttw*XXE1.75dc!/b&bo=SgWCA0oFggMDd1I!&rf=viewer_4&t=5');width:100%;height:100%;">
</div>
<div class="slide" style="background-image: url('http://photogzmaz.photo.store.qq.com/psc?/V52oif0O2o3aqC1GHf6w2G2bAb2rvg18/LiySpxowE0yeWXwBdXN*SaMQlMKWOS7HS61NQpzRrlPNZscnv*LFTA.tti0CTzov.pFeTLFryI7uI0WU3v.dJOKXUzYmXnPvKmSoDoFsHHw!/b&bo=TgWOA04FjgMDd1I!&rf=viewer_4&t=5');width:100%;height:100%;">
</div>
<div class="slide" style="background-image: url('http://photogzmaz.photo.store.qq.com/psc?/V52oif0O2o3aqC1GHf6w2G2bAb2rvg18/LiySpxowE0yeWXwBdXN*SRPMN5zrGd0d8HtSBLbEqhbIya7qjIwbmCWgyln0sg9HiOHu6ydf4BiKgYyZWEs2wFyQXzal2qWYXuGtVDalu*Y!/b&bo=MQSEAjEEhAIDV3I!&rf=viewer_4&t=5');width:100%;height:100%;">
</div>
</div>

<div class="indicators">
<span class="indicator active"></span>
<span class="indicator"></span>
<span class="indicator"></span>
<span class="indicator"></span>
<span class="indicator"></span>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.1.18/jquery.backstretch.min.js"></script>
<script id="rendered-js">
var wrap;
let x = 0,y = 0,mx = 0,my = 0,orientNumX = 0,orientNumY = 0,isMobile = false,perNum = 10;
window.onload = function () {
wrap = document.querySelector(".contentWrap");
isMobile = mobileChk();
if (isMobile) {
perNum = .8;
if (window.DeviceOrientationEvent) {
window.addEventListener("deviceorientation", function (event) {
x = event.gamma;
y = event.beta - 50;
}, false);
}
} else {
window.addEventListener("mousemove", function (e) {
x = e.clientX - window.innerWidth / 2;
y = e.clientY - window.innerHeight / 2;
});
}
loop();
};
function loop() {
mx += (x - mx) * .1;
my += (y - my) * .1;

wrap.style.transform = "translate(-50%, -50%) rotateX(" + my / perNum + "deg) rotateY(" + -mx / perNum + "deg)";
window.requestAnimationFrame(loop);
}
function mobileChk() {
var mobileKeyWords = new Array('Android', 'iPhone', 'iPod', 'BlackBerry', 'Windows CE', 'SAMSUNG', 'LG', 'MOT', 'SonyEricsson');
for (var info in mobileKeyWords) {
if (navigator.userAgent.match(mobileKeyWords[info]) != null) {
return true;
}
}
return false;
}
//# sourceURL=pen.js
const slides = document.querySelectorAll('.slide');
const indicators = document.querySelectorAll('.indicator');
const currentSlideSpan = 1
// 初始变量
let currentSlideIndex = 0;
let slideInterval;
let isPlaying = true;
let intervalTime = parseInt(10) * 1000;

// 更新幻灯片计数器
function updateSlideCounter() {
currentSlideSpan.textContent = currentSlideIndex + 1;
}
// 初始化轮播
function initSlider() {
updateSlideCounter();
startSlideInterval();
}

// 开始自动轮播
function startSlideInterval() {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, intervalTime);
}

// 更新幻灯片
function updateSlide() {
// 移除所有幻灯片的active类
slides.forEach(slide => {
slide.classList.remove('active');
});

indicators.forEach(indicator => {
indicator.classList.remove('active');
});

// 添加active类到当前幻灯片和指示器
slides[currentSlideIndex].classList.add('active');
indicators[currentSlideIndex].classList.add('active');

// 更新计数器
updateSlideCounter();
}
// 下一张幻灯片
function nextSlide() {
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
updateSlide();
}

// 上一张幻灯片
function prevSlide() {
currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
updateSlide();
}
// 初始化轮播
initSlider();
</script>

</body></html>

posted @ 2025-12-24 18:43 上地之客阅读(5) 评论(0) 收藏举报

刷新页面返回顶部

上地之客

11111

公告