最近阿锋在超市排队买菜（辣条）
一个大叔一边给孩子买吃的一边说：
这些都是增加记忆力的，对孩子好！
蓝莓，深海鱼，全麦面包，坚果儿，十六个核桃······
不禁感叹现在的孩子们还真是幸福啊！
我记得我小时候要记住一件事情
只需：我爸的一巴掌！
高端的记忆方法，往往只需要最朴素的操作手段
果然啊~~大道至简
那在整个计算机行业里
什么语言最简单？CSS！
如果它能算作语言的话（手动狗头保命）
最神奇的语言是什么？CSS！
最玄学，最神奇的也莫过于CSS！
学习两个半月前端信心满满在简历上写着：精通CSS
学习两年半前端轻车熟路的写上：熟练CSS
学习五年前端小心翼翼写上：了解CSS
你不信，你来看这几个动效怎么做？
我们来浅读一下大神们的实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
html {
overflow-x: hidden;
}
html,
body {
padding: 0;
margin: 0;
}
.totalcontainer {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container1 {
transform: scaleX(1.11);
}
.container2 {
transform: scaleX(1.25);
}
.layer-1 {
height: 100vh;
width: 100%;
background-color: #fed8c1;
}
.layer-2 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay2.svg")
no-repeat center center fixed;
animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.layer-3 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay3.svg")
no-repeat center center fixed;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}
.layer-4 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay4.svg")
no-repeat center center fixed;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}
.layer-5 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453880/codepen/lay5.svg")
no-repeat center center fixed;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s
both;
}
.layer-6 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453881/codepen/lay6.svg")
no-repeat center center fixed;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.75s
both;
}
.layer-7 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453881/codepen/lay7.svg")
no-repeat center center fixed;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.85s
both;
}
.layer-8 {
background: url("https://res.cloudinary.com/dkgrf00g1/image/upload/v1536453882/codepen/lay8.svg")
no-repeat center center fixed;
animation: slide-in-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
}
.laya-please {
position: absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
width: 100%;
top: 0;
left: 0px;
}
@-webkit-keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-bottom {
0% {
-webkit-transform: translateY(1000px);
transform: translateY(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
</style>
<body>
<div class="totalcontainer">
<div class="laya-please layer-1">
</div>
<div class="laya-please layer-2">
</div>
<div class="container1">
<div class="laya-please layer-3">
</div>
<div class="laya-please layer-4">
</div>
<div class="laya-please layer-5">
</div>
<div class="laya-please layer-6">
</div>
</div>
<div class="container2">
<div class="laya-please layer-7">
</div>
<div class="laya-please layer-8">
</div>
</div>
</div>
<script>
const elems = document.querySelectorAll('.laya-please');
const layer2 = document.querySelector('.layer-2');
const layer3 = document.querySelector('.layer-3');
const layer4 = document.querySelector('.layer-4');
const layer5 = document.querySelector('.layer-5');
const layer6 = document.querySelector('.layer-6');
const layer7 = document.querySelector('.layer-7');
const layer8 = document.querySelector('.layer-8');
setTimeout(function () {
elems.forEach(function (elem, index) {
elem.style.animation = "none";
});
}, 1500);
document.body.addEventListener('mousemove', function (e) {
if (!e.currentTarget.dataset.triggered) {
elems.forEach(function (elem, index) {
if (elem.getAttribute('style')) {
elem.style.transition = "all .5s";
elem.style.transform = "none";
}
});
}
e.currentTarget.dataset.triggered = true;
let width = window.innerWidth / 2;
let mouseMoved2 = ((width - e.pageX) / 50);
let mouseMoved3 = ((width - e.pageX) / 40);
let mouseMoved4 = ((width - e.pageX) / 30);
let mouseMoved5 = ((width - e.pageX) / 20);
let mouseMoved6 = ((width - e.pageX) / 10);
let mouseMoved7 = ((width - e.pageX) / 5);
layer3.style.transform = "translateX(" + mouseMoved2 + "px)";
layer4.style.transform = "translateX(" + mouseMoved3 + "px)";
layer5.style.transform = "translateX(" + mouseMoved4 + "px)";
layer6.style.transform = "translateX(" + mouseMoved5 + "px)";
layer7.style.transform = "translateX(" + mouseMoved6 + "px)";
layer8.style.transform = "translateX(" + mouseMoved7 + "px)";
});
document.body.addEventListener('mouseleave', function (e) {
elems.forEach(function (elem, index) {
elem.style.transition = "all .5s";
elem.style.transform = "none";
});
});
document.body.addEventListener('mouseenter', function (e) {
elems.forEach(function (elem, index) {
setTimeout(function () {
elem.style.transition = "none";
}, 500);
});
});
</script>
</body>
</html>最后一个动效的源码奉上啦！
（篇幅关系，就不把所有的源码都放上啦！有需要的来找阿锋要哦！）
看完这些动效是不是有些感触？
感触一：卷这些东西意义何在？
感触二：这些动效能够带来一个客户吗？
感触三：我花一周做出来了，其他的需求怎么办？
充满了没用的苹果味儿
但是能写出这些效果来的人对于CSS的掌握程度是毋庸置疑的！
而对于一件事物的了如指掌
总是能让你尝试不同的新方法新姿势！
总是能给人带来不一样的快乐！
想要其他动效源码的！可以直接私信我！