核心属性: background-attachment
这个属性就牛逼了, 它可以定义背景图片是相对视口固定,还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上。
我们来看个例子:
html:
<div></div>
<div>I WANT FLY</div>
<div></div>
<div>I WANT FLY</div>
<div></div>
<div>I WANT FLY</div>
<div></div>
css:
body{
background-color: #cccccc;
margin: 0;
padding: 0;
}
.attach{
background-image: url("./img/1.jpg");
background-size: cover;
/*background-attachment: fixed;*/
background-position: center center;
}
.view{
height: 100vh;
}
.text{
font-size: 45px;
text-align: center;
line-height: 100vh;
color: #ffffff;
}
代码很简单,让视口出现滚动条,
然后它是这样的:
很普通的一个滚动效果, 然后我们把注释去掉,
就是加上这句话:
background-attachment: fixed;
华丽变身:
由于它相对视口固定, 看起来就好像只有一个背景一样。
我们就用这个属性来制作水波纹效果:
波纹效果其实就是动态生成几个div 叠加在一起, 并且背景图片一样。它们的宽高逐渐变大, 透明度逐渐变为0, 并且每个div有delay效果
结束后remove掉,并且多次点击产生的波纹的层级越来越高才不会被前面的波纹覆盖;
HTML:
<div>
</div>
CSS:
/*整体的背景*/
.water-wave {
/*占满整个屏幕*/
position: relative;
height: 100vh;
width: 100vw;
background-image: url("./img/1.jpg");
background-size: cover;
background-position: center center;
background-attachment: fixed;
overflow: hidden;
cursor: pointer;
}
/*存放波纹的一个自适应的正方形*/
.wave-container {
position: absolute;
/* vmin = 视口width > 视口height ? height : width*/
width: 80vmin;
height: 80vmin;
}
.center{
position: relative;
width: 100%;
height: 100%;
/*背景铺满*/
background-size: cover;
}
.wave {
/*每个波纹居中*/
position: absolute;
top: calc((100% - 10vmin) / 2);
left: calc((100% - 10vmin) / 2);
width: 10vmin;
height: 10vmin;
border-radius: 50%;
/*开启3d加速*/
transform: translate3d(0, 0, 0);
background-image: url("./img/1.jpg");
background-position: center center;
background-attachment: fixed;
/*所有属性变化过渡200ms*/
transition: all .2s;
}
/*每个波纹的动画延迟不一样, size由大变小再
变为100%这样效果更逼真*/
.wave1 {
/*forwards停留在动画的最后一帧*/
animation: move 1s ease-out .1s forwards;
background-size: 106%;
z-index: 10;
}
.wave2 {
animation: move 1s ease-out .15s forwards;
background-size: 102%;
z-index: 20;
}
.wave3 {
animation: move 1s ease-out .25s forwards;
background-size: 104%;
z-index: 30;
}
.wave4 {
animation: move 1s ease-out .4s forwards;
background-size: 100%;
z-index: 40;
}
@keyframes move {
0% {
top: calc((100% - 10vmin) / 2);
left: calc((100% - 10vmin) / 2);
width: 10vmin;
height: 10vmin;
opacity: 1;
}
/*动画过程中不能让opacity渐变,不然没有水波纹的效果*/
/*但是这样又会产生一点小抖动, 不过不影响效果*/
/*你也可以注释掉看看*/
99% {
opacity: 1;
}
100% {
top: calc((100% - 40vmin) / 2);
left: calc((100% - 40vmin) / 2);
width: 40vmin;
height: 40vmin;
opacity: 0;
}
}
JS: 我尽量每行都写注释
const container = document.getElementsByClassName('water-wave'); // 取父级
const number = 4; // 自定义产生几个水波纹
let index = 0; // 定义每次点击产生的波纹的层级
const containerWidth = document.body.clientHeight > document.body.clientWidth
? document.body.clientWidth * 0.8 / 2 : document.body.clientHeight * 0.8 / 2;
// 取包裹波纹的正方形的半个宽 这是为了计算点击时正方形的位置
container[0].addEventListener('click', (e) => {
// 传入事件, 父级, 波纹数, 层级
addWave(e, container[0], number, index++)
}, false); // 注册点击事件
// 点击触发
function addWave(e, parentNode, number, index) {
// 渲染完波纹后插入父级, 传入波纹数, 点击的坐标x, y ,层级
parentNode.appendChild(renderWave(number, e.pageX, e.pageY, index));
// 移除每次点击产生的波纹,
// index是用来识别每次点击的波纹相当于唯一的ID
removeWave(parentNode, index);
}
// 渲染波纹的函数
function renderWave(number, x, y, z) {
let childrenNode = '';
// 创建一个父级div元素用来包裹波纹
let childrenContainer = document.createElement('div');
// 添加一个class用来标记,方便删除
childrenContainer.classList.add(`remove${z}`);
// 循环产生波纹
for (let i = 0; i < number; i++) {
childrenNode += `<div></div>`
}
// 波纹放进div里
childrenContainer.innerHTML =
`<div>
<div>
${childrenNode}
</div>
</div>`;
// 返回这个div
return childrenContainer;
}
function removeWave(parentNode, index) {
// 延迟3秒删除波纹
setTimeout(() => {
const node = document.getElementsByClassName(`remove${index}`)[0];
parentNode.removeChild(node);
}, 3000);
}
注释已经写的很详细了, 自己动手写写才能发现问题哦
我们来看看最终效果:
来自:https://www.cnblogs.com/LHLVS/p/10738203.html
今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。
在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。
js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。
设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。
这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。
一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现
主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形
文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。
发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。
多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!