【程序员的浪漫】圣诞节到了，何不送给Ta一份程序员的浪漫_morphsvgplugin

于 2024-05-12 12:11:18 发布
阅读量629 收藏 13
点赞数 27
分类专栏： 程序员 文章标签： java 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84689346/article/details/138751401
版权

最后

针对最近很多人都在面试，我这边也整理了相当多的面试专题资料，也有其他大厂的面经。希望可以帮助到大家。

下面的面试题答案都整理成文档笔记。也还整理了一些面试资料&最新2021收集的一些大厂的面试真题（都整理成文档，小部分截图）

在这里插入图片描述

最新整理电子书

在这里插入图片描述

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

}

.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);
}


### 二、只使用 CSS 制作的螺旋圣诞树


演示地址：<https://haiyong.site/demo/christmastree2.html>（在手机端和PC端都可以完美响应）  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/abaf4ee27c9b4e6389729c282d89b30e.gif#pic_center)


**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;
}
}


### 三、使用HTML+CSS+JS制作的圣诞树


演示地址：<https://haiyong.site/demo/christmastree3.html>（最好在PC端预览）


![](https://img-blog.csdnimg.cn/51aacb2525f3475b93760a97e98da711.gif#pic_center)  
 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(p){
  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);
    p.setAttribute('fill', particleColorArray[i % particleColorArray.length]);
    p.setAttribute('class', "particle");   
    particlePool.push(p);
    gsap.set(p, {
                 x:-100, 
                 y:-100,
   transformOrigin:'50% 50%'
                 })
  }

}

var getScale = gsap.utils.random(0.5, 3, 0.001, true);

function playParticle(p){
  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: (p) => {
        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);


### 四、只使用 CSS 的流星圣诞树


演示地址：<https://haiyong.site/demo/christmastree4.html>（响应式的，手机和PC端都可预览）  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/18bb2ce4ca8e4a0690d8372a5fc7bce6.gif#pic_center)  
 **HTML代码**




    
CSS代码

    :root {
    –background:#3C3B3D;
    }

    body {
    background: var(–background);
    }
    body ul {
    padding: 0;
    }
    body ul li {
    list-style: none;
    }
    body ul:nth-child(1) {
    position: absolute;
    top: 20vh;
    left: 50%;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    }
    body ul:nth-child(1) li {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 0.5rem 1rem 0.5rem;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #FFCE54;
    transform-origin: 0.5rem 1rem;
    }
    body ul:nth-child(1) li:nth-child(0) {
    transform: rotate(0deg);
    }
    body ul:nth-child(1) li:nth-child(1) {
    transform: rotate(72deg);
    }
    body ul:nth-child(1) li:nth-child(2) {
    transform: rotate(144deg);
    }
    body ul:nth-child(1) li:nth-child(3) {
    transform: rotate(216deg);
    }
    body ul:nth-child(1) li:nth-child(4) {
    transform: rotate(288deg);
    }
    body ul:nth-child(2) li {
    position: absolute;
    top: 20vh;
    left: 50%;
    width: 0.0625rem;
    height: 60vh;
    transform-origin: 50% 0%;
    }
    body ul:nth-child(2) li:nth-child(1) {
    transform: rotate(4.9322004015deg);
    }
    body ul:nth-child(2) li:nth-child(1):before, body ul:nth-child(2) li:nth-child(1):after {
    -webkit-animation-delay: -0.015625s;
    animation-delay: -0.015625s;
    }
    body ul:nth-child(2) li:nth-child(2) {
    transform: rotate(7.7960629984deg);
    }
    body ul:nth-child(2) li:nth-child(2):before, body ul:nth-child(2) li:nth-child(2):after {
    -webkit-animation-delay: -0.03125s;
    animation-delay: -0.03125s;
    }
    body ul:nth-child(2) li:nth-child(3) {
    transform: rotate(10.5294548885deg);
    }
    body ul:nth-child(2) li:nth-child(3):before, body ul:nth-child(2) li:nth-child(3):after {
    -webkit-animation-delay: -0.046875s;
    animation-delay: -0.046875s;
    }
    /* … */
    /* 一样的规律，一直到第256 */
    body ul:nth-child(2) li:nth-child(256) {
    transform: rotate(2deg);
    }
    body ul:nth-child(2) li:nth-child(256):before, body ul:nth-child(2) li:nth-child(256):after {
    -webkit-animation-delay: -4s;
    animation-delay: -4s;
    }
    body ul:nth-child(2) li:before, body ul:nth-child(2) li:after {
    content: “”;
    position: absolute;
    top: 0%;
    -webkit-animation: fall 4s linear infinite;
    animation: fall 4s linear infinite;
    }
    body ul:nth-child(2) li:before {
    width: 0.0625rem;
    height: 3rem;
    background: linear-gradient(rgba(46, 204, 113, 0), rgba(46, 204, 113, 0.5));
    }
    body ul:nth-child(2) li:after {
    bottom: 0;
    transform: translate(-50%, 3rem);
    width: 0.1875rem;
    height: 0.1875rem;
    border-radius: 100%;
    background: #ffce54;
    }
    body ul:nth-child(2) li:nth-child(4n):after {
    background: #D8334A;
    }
    body ul:nth-child(2) li:nth-child(4n+1):after {
    background: #FFCE54;
    }
    body ul:nth-child(2) li:nth-child(4n+2):after {
    background: #2ECC71;
    }
    body ul:nth-child(2) li:nth-child(4n+3):after {
    background: #5D9CEC;
    }

    @-webkit-keyframes fall {
    0% {
    opacity: 0;
    top: 0%;
    }
    5% {
    opacity: 0;
    }
    15%, 90% {
    opacity: 1;
    }
    100% {
    opacity: 0;
    top: 100%;
    }
    }

    @keyframes fall {
    0% {
    opacity: 0;

    读者福利

    秋招我借这份PDF的复习思路，收获美团，小米，京东等Java岗offer

    更多笔记分享

    秋招我借这份PDF的复习思路，收获美团，小米，京东等Java岗offer

    本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

    需要这份系统化的资料的朋友，可以点击这里获取

    background: #5D9CEC;
    }

    @-webkit-keyframes fall {
    0% {
    opacity: 0;
    top: 0%;
    }
    5% {
    opacity: 0;
    }
    15%, 90% {
    opacity: 1;
    }
    100% {
    opacity: 0;
    top: 100%;
    }
    }

    @keyframes fall {
    0% {
    opacity: 0;

    读者福利

    [外链图片转存中…(img-tnL6aZk1-1715487055219)]

    更多笔记分享

    [外链图片转存中…(img-fhzwJzHz-1715487055219)]

    本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

    需要这份系统化的资料的朋友，可以点击这里获取

    2401_84689346
    关注
    • 27
      点赞
    • 踩
    • 13
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    专栏目录
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值