<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery+CSS3左侧边栏圣诞老人滑动面板特效</title>
<script src="js/jquery.min.js"></script>
<style>
#santa {
position: absolute;
width: 30%;
top: 7%;
right: 0%;
z-index: 1000;
}
#mouth {
animation: HoHoHoMouth 6s infinite 6s;
-webkit-animation: HoHoHoMouth 6s infinite 6s;
opacity: 0;
}
#hohoho1 {
animation: HoHoHoText1 6s infinite 6s;
-webkit-animation: HoHoHoText1 6s infinite 6s;
fill: #fff;
stroke: #000000;
font-size:30px;
font-weight:700;
font-family:Mountains of Christmas;
opacity: 0;
}
#hohoho2 {
animation: HoHoHoText2 6s infinite 6s;
-wbkit-animation: HoHoHotext2 6s infinite 6s;
font-size:35px;
font-weight:700;
opacity: 0;
font-family:Mountains of Christmas;
fill: red;
stroke: #000000;
stroke-opacity: 0.5;
}
#hohoho3 {
animation: HoHoHoText3 6s infinite 6s;
-webkit-animation: HoHoHoText3 6s infinite 6s;
font-size:45px;
font-weight:700;
opacity: 0;
font-family:Mountains of Christmas;
fill: #00ff00;
stroke: #000000;
stroke-opacity: 0.5;
}
@-webkit-keyframes HoHoHoText1 {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoText2 {
0% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoText3 {
0% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoMouth {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
@keyframes HoHoHoText1 {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
}
@keyframes HoHoHoText2 {
0% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
}
@keyframes HoHoHoText3 {
0% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
@keyframes HoHoHoMouth {
0% {
opacity:0;
}
30% {
opacity:1;
}
40% {
opacity:0;
}
50% {
opacity:1;
}
60% {
opacity:0;
}
70% {
opacity:1;
}
80% {
opacity:0;
}
}
#Santa_Container {
position: absolute;
margin-right: -35%
}
#Santa_Slide_Panel {
position: absolute;
width: 80%;
height: 100%;
overflow: hidden;
margin-left: -55%;
-webkit-transition: all 3s ease;
transition: all 1000ms ease;
cursor: pointer
}
#Santa_Slide_Panel:hover {
margin-left: 0%;
}
#Santa_Greeting {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 28.75%;
z-index: 100;
/* Brick Tiled Background */
background-color: silver;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
#Santa_Message {
position: absolute;
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* Accelerates Overflow Scrolling on IOS */
padding:15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 60%;
width: 60%;
box-shadow: 0 0 0 15px #587A55, 0 0 0 17px #587A55, 0 0 0 19px ghostwhite, 0 0 0 26px #1E340E, 0 0 0 40px #1E340E;
background: ghostwhite;
}
#Santa_Message p {
font-family: 'Linden Hill', serif;
font-size: 110%;
color: #587A55;
}
/* ANIMATIONS */
.UpDown_1 {
animation: bottom_animation 6s infinite;
-webkit-animation: bottom_animation 6s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.eyesandbrow {
animation: bottom_animation 6s infinite;
-webkit-animation: bottom_animation 6s infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.shizzle-animated {
visibility: visible !important;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
.Santa_Climbing_Chimney {
-webkit-animation-name: Santa_Climbing_Chimney;
animation-name: Santa_Climbing_Chimney;
animation-duration: 3s;
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@-webkit-keyframes Santa_Climbing_Chimney {
0% {
-webkit-transform: translateY(200%);
}
50% {
opacity: 0.7;
-webkit-transform: translateY(100%) rotate(-7deg);
}
75% {
-webkit-transform: translateY(50%) rotate(7deg);
}
100% {
opacity: 1;
-webkit-transform: translateY(0) rotate(0deg);
}
}
@keyframes Santa_Climbing_Chimney {
0% {
transform: translateY(200%);
}
50% {
opacity: 0.7;
transform: translateY(100%) rotate(-7deg);
}
75% {
transform: translateY(50%) rotate(7deg);
}
100% {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
}
.slideScaleUpIn {
-webkit-animation-delay: 1s;
animation-duration: 1s;
-webkit-animation-duration: 3s;
-webkit-animation-delay: 3s;
animation-duration: 3s;
-webkit-animation-name: slideScaleUpIn;
animation-name: slideScaleUpIn;
}
@-webkit-keyframes slideScaleUpIn {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px) scale(.1);
}
80% {
opacity: 1;
-webkit-transform: scale(.8);
}
}
@keyframes slideScaleUpIn {
0% {
opacity: 0;
transform: translateY(-2000px) scale(.1);
}
80% {
opacity: 1;
transform: scale(.8);
}
}
@keyframes bottom_animation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes bottom_animation {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
/* SVG DEFAULT STYLING FROM ILLUSTRATOR */
.santa-0 {
fill: #C10E0E;
}
.santa-1 {
fill: #F4C7B3;
}
.santa-2 {
opacity: 0.2;
}
.cheeks {
fill: #EAB5A0;
}
.santa-4 {
fill: #F2F2F2;
stroke: #E6E6E6;
stroke-width: 1.8489;
stroke-miterlimit: 10;
}
.santa-5 {
fill: none;
}
.santa-6 {
fill: #F2F2F2;
}
.santa-7 {
fill: #E6E6E6;
}
.santa-white {
fill: #FFFFFF;
}
.nose {
fill: #EAB5A0;
}
.santa-11 {
fill: #5E5958;
}
.eyeball {
fill: #F9F5F4;
}
.santa-13 {
fill: #D60B0B;
}
.santa-14 {
fill: #BC0202;
}
.santa-15 {
fill: #C6C6C6;
}
.santa-16 {
fill: none;
stroke: #F2F2F2;
stroke-width: 16.7815;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.santa-17 {
fill: #C40808;
}
.santa-18 {
opacity: 0.15;
}
.santa-19 {
fill: #B50808;
}
.santa-20 {
fill: none;
stroke: #F2F2F2;
stroke-width: 17.3975;
stroke-linecap: round;
stroke-miterlimit: 10;
}
/* WebKit Scrollbar Styling */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
border-radius: -10%;
background-color: rgba(0,62,9,1.00);
}
/* Page Stuff */
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body,
html {
background-color: #000;
color: #fff;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Santa_Slide_Panel" onClick="void(0)">
<svg version="1.1" id="santa"
viewBox="0 0 300 300" class="shizzle-animated Santa_Climbing_Chimney">
<g id="Santa_Claus">
<g id="head">
<path id="body" class="santa-0" d="M42.4,74.5c0,0,12.1,10.3,15,14.9c13.8,21.9,48.9,73,48.9,73s7,83.1-56.5,103.4l-47.3-5.6V70.5
L42.4,74.5z"/>
<path id="right_ear" class="santa-1" d="M132.2,130c-2.1,3.2-6.4,4-9.6,1.9l-0.4-0.2c-3.2-2.1-4-6.4-1.9-9.6l0,0
c2.1-3.2,6.4-4,9.6-1.9l0.4,0.2C133.5,122.6,134.3,126.9,132.2,
jQuery+CSS3左侧边栏圣诞老人滑动面板特效.zip
版权申诉
21 浏览量
2023-09-22
00:19:49
上传
评论
收藏 42KB ZIP 举报
jQuery+CSS3左侧边栏圣诞老人滑动面板特效.zip （2个子文件） 
js 
jquery.min.js 91KB
index.html 28KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
最新资源
- python开心麻花影视作品分析程序+源码.zip
- pythonExcel数据分析师程序+源码.zip
- PlatformUI.jar 支持RCP控件环境插件
- 基于BP神经网络的回归分析，基于优化动量因子的BP神经网络，基于优化学习率的BP神经网络，基于优化隐藏层神经元的bp神经网络
- python读取excel数据Python-file-reading-master.zip
- STC15单片机串口2使用程序例子
- 读取日志的excel生成周报 用python3开发weekplan-master.zip
- python 读取excel数据导入dbimport-data-master.zip
- K折交叉验证BP神经网络，多输入多输出BP神经网络（代码完整，数据齐全）
- B07训练原图.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
