-
-
圣诞节快乐!
from haiyong
CSS主要代码
CSS比较多，我截取了部分主要代码，需要完整代码可关注公众号【海拥】回复【圣诞树】或者通过文章底部小卡片加我，发给你。
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #000;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
h1 {
font-family: “Mountains of Christmas”, cursive;
font-size: 42px;
line-height: 60px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1::before, h1::after {
content: “❆”;
margin: 0 10px;
}
h2 {
font-family: “Source Sans Pro”, sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
}
h3 {
font-family: “Open Sans Condensed”, sans-serif;
font-weight: 300;
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 5px;
}
p {
font-family: “Dancing Script”, cursive;
font-size: 20px;
font-weight: 700;
}
span {
font-family: “Roboto”, sans-serif;
font-size: 14px;
font-weight: 400;
}
.card-container {
height: 675px;
width: 675px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 8px double #fff;
border-radius: 20px;
text-align: center;
border-radius: 50%;
-webkit-border-radius: 50%;
overflow: hidden;
position: relative;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
演示地址：http://haiyong.site/christmastree2（在手机端和PC端都可以完美响应）
HTML代码
完整CSS代码
复制粘贴即可,还有问题可以在底部评论区留言或者根据文末方式获取源码
- {
box-sizing: border-box;
}
body {
background: #233343;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
transform-style: preserve-3d;
}
.tree {
position: relative;
height: 50vmin;
width: 25vmin;
transform-style: preserve-3d;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
.tree__light {
transform-style: preserve-3d;
position: absolute;
height: 1vmin;
width: 1vmin;
border-radius: 50%;
-webkit-animation: flash calc(var(–speed) * 1s) calc(var(–delay) * 1s) infinite steps(4), appear 0.5s calc(var(–appear) * 0.05s) both;
animation: flash calc(var(–speed) * 1s) calc(var(–delay) * 1s) infinite steps(4), appear 0.5s calc(var(–appear) * 0.05s) both;
left: 50%;
transform: translate(-50%, 50%) rotateY(calc(var(–rotate, 0) * 1deg)) translate3d(0, 0, calc(var(–radius, 0) * 1vmin));
bottom: calc(var(–y, 0) * 1%);
}
.tree__star {
stroke-width: 5vmin;
stroke: #f5e0a3;
filter: drop-shadow(0 0 2vmin #fcf1cf);
height: 5vmin;
width: 5vmin;
overflow: visible !important;
bottom: 100%;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
stroke-dasharray: 1000 1000;
fill: none;
-webkit-animation: stroke 1s calc((var(–delay) * 0.95) * 0.05s) both;
animation: stroke 1s calc((var(–delay) * 0.95) * 0.05s) both;
}
@-webkit-keyframes stroke {
from {
stroke-dashoffset: -1000;
}
}
@keyframes stroke {
from {
stroke-dashoffset: -1000;
}
}
@-webkit-keyframes spin {
to {
transform: rotateY(360deg);
}
}
@keyframes spin {
to {
transform: rotateY(360deg);
}
}
@-webkit-keyframes appear {
from {
opacity: 0;
}
}
@keyframes appear {
from {
opacity: 0;
}
}
@-webkit-keyframes flash {
0%, 100% {
background: #f00;
}
20% {
background: #fff;
}
40% {
background: #f00;
}
60% {
background: #fff;
}
80% {
background: #f00;
}
}
@keyframes flash {
0%, 100% {
background: #f00;
}
20% {
background: #fff;
}
40% {
background: #f00;
}
60% {
background: #fff;
}
80% {
background: #f00;
}
}
演示地址：http://haiyong.site/christmastree3（最好在PC端预览）
HTML比较长，打包放在源码里，文末自行领取
完整CSS
body {
background-color:#151522;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
width:90%;
height:90%;
visibility:hidden;
}
部分JS
MorphSVGPlugin.convertToPath(‘polygon’);
var xmlns = “http://www.w3.org/2000/svg”,
xlinkns = “http://www.w3.org/1999/xlink”,
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
pContainer = select(‘.pContainer’),
mainSVG = select(‘.mainSVG’),
star = select(‘#star’),
sparkle = select(‘.sparkle’),
tree = select(‘#tree’),
showParticle = true,
particleColorArray = [‘#E8F6F8’, ‘#ACE8F8’, ‘#F6FBFE’,‘#A2CBDC’,‘#B74551’, ‘#5DBA72’, ‘#910B28’, ‘#910B28’, ‘#446D39’],
particleTypeArray = [‘#star’,‘#circ’,‘#cross’,‘#heart’],
particlePool = [],
particleCount = 0,
numParticles = 201
gsap.set(‘svg’, {
visibility: ‘visible’
})
gsap.set(sparkle, {
transformOrigin:‘50% 50%’,
y:-100
})
let getSVGPoints = (path) => {
let arr = []
var rawPath = MotionPathPlugin.getRawPath(path)[0];
rawPath.forEach((el, value) => {
let obj = {}
obj.x = rawPath[value * 2]
obj.y = rawPath[(value * 2) + 1]
if(value % 2) {
arr.push(obj)
}
})
return arr;
}
let treePath = getSVGPoints(‘.treePath’)
var treeBottomPath = getSVGPoints(‘.treeBottomPath’)
var mainTl = gsap.timeline({delay:0, repeat:0}), starTl;
function flicker§{
gsap.killTweensOf(p, {opacity:true});
gsap.fromTo(p, {
opacity:1
}, {
duration: 0.07,
opacity:Math.random(),
repeat:-1
})
}
function createParticles() {
var i = numParticles, p, particleTl, step = numParticles/treePath.length, pos;
while (–i > -1) {
p = select(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);
mainSVG.appendChild§;
p.setAttribute(‘fill’, particleColorArray[i % particleColorArray.length]);
p.setAttribute(‘class’, “particle”);
particlePool.push§;
gsap.set(p, {
x:-100,
y:-100,
transformOrigin:‘50% 50%’
})
}
}
var getScale = gsap.utils.random(0.5, 3, 0.001, true);
function playParticle§{
if(!showParticle){return};
var p = particlePool[particleCount]
gsap.set(p, {
x: gsap.getProperty(‘.pContainer’, ‘x’),
y: gsap.getProperty(‘.pContainer’, ‘y’),
scale:getScale()
}
);
var tl = gsap.timeline();
tl.to(p, {
duration: gsap.utils.random(0.61,6),
physics2D: {
velocity: gsap.utils.random(-23, 23),
angle:gsap.utils.random(-180, 180),
gravity:gsap.utils.random(-6, 50)
},
scale:0,
rotation:gsap.utils.random(-123,360),
ease: ‘power1’,
onStart:flicker,
onStartParams:[p],
//repeat:-1,
onRepeat: § => {
gsap.set(p, {
scale:getScale()
})
},
onRepeatParams: [p]
});
particleCount++;
particleCount = (particleCount >=numParticles) ? 0 : particleCount
}
function drawStar(){
starTl = gsap.timeline({onUpdate:playParticle})
starTl.to(‘.pContainer, .sparkle’, {
duration: 6,
motionPath :{
path: ‘.treePath’,
autoRotate: false
},
ease: ‘linear’
})
.to(‘.pContainer, .sparkle’, {
duration: 1,
onStart:function(){showParticle = false},
x:treeBottomPath[0].x,
y:treeBottomPath[0].y
})
.to(‘.pContainer, .sparkle’, {
duration: 2,
onStart:function(){showParticle = true},
motionPath :{
path: ‘.treeBottomPath’,
autoRotate: false
},
ease: ‘linear’
},‘-=0’)
.from(‘.treeBottomMask’, {
duration: 2,
drawSVG:‘0% 0%’,
stroke:‘#FFF’,
ease:‘linear’
},‘-=2’)
}
createParticles();
drawStar();
//ScrubGSAPTimeline(mainTl)
mainTl.from([‘.treePathMask’,‘.treePotMask’],{
duration: 6,
drawSVG:‘0% 0%’,
stroke:‘#FFF’,
stagger: {
each: 6
},
duration: gsap.utils.wrap([6, 1,2]),
ease:‘linear’
})
.from(‘.treeStar’, {
duration: 3,
//skewY:270,
scaleY:0,
scaleX:0.15,
transformOrigin:‘50% 50%’,
ease: ‘elastic(1,0.5)’
},‘-=4’)
.to(‘.sparkle’, {
duration: 3,
opacity:0,
ease:“rough({strength: 2, points: 100, template: linear, taper: both, randomize: true, clamp: false})”
},‘-=0’)
.to(‘.treeStarOutline’, {
duration: 1,
opacity:1,
ease:“rough({strength: 2, points: 16, template: linear, taper: none, randomize: true, clamp: false})”
},‘+=1’)
mainTl.add(starTl, 0)
gsap.globalTimeline.timeScale(1.5);
演示地址：http://haiyong.site/christmastree4（响应式的，手机和PC端都可预览）
HTML代码
CSS代码
:root {
–background:#3C3B3D;
}
body {
background: var(–background);
}
最后
不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~
给大家准备的学习资料包括但不限于：
Python 环境、pycharm编辑器/永久激活/翻译插件
python 零基础视频教程
Python 界面开发实战教程
Python 爬虫实战教程
Python 数据分析实战教程
python 游戏开发实战教程
Python 电子书100本
Python 学习路线规划
网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
2024年Python最全【程序员的浪漫】圣诞节到了，何不送给Ta一份程序员的浪漫
最新推荐文章于 2024-07-30 17:23:09 发布
2283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
