最后
针对最近很多人都在面试,我这边也整理了相当多的面试专题资料,也有其他大厂的面经。希望可以帮助到大家。
下面的面试题答案都整理成文档笔记。也还整理了一些面试资料&最新2021收集的一些大厂的面试真题(都整理成文档,小部分截图)
最新整理电子书
}
.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;
读者福利
更多笔记分享
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)]