CSS完成的1闪而过的照片闪亮实际效果

2021-03-07 22:18 jianzhan

只必须两个HTML元素和1个CSS转换,我就可以造就出我自身的闪亮实际效果。让大家来完成它!


展现光泽照片

下面便是这张Addy在他blog上应用的照片:

比我必须的要大1些,但你能够把它剪裁1些。

留意:左侧的那张是纯白色的,因此看不见,两张图在CSS编码中都要用到。

HTML编码

制做这类闪亮实际效果,必须有两个元素:1个外架构,另外一个內部元素用来展现光泽。我这里应用了A标识和SPAN标识:

拷贝编码
编码以下:

<a href="/" class="logo lazy "><span></span></a>

HTML编码一直最简易的。

CSS编码

A元素的款式很简易,外溢的一部分要掩藏,确保光泽的一切正常显示信息,最终设定元素的长宽:

拷贝编码
编码以下:

a.logo {
display: block;
background: url("logo.png") 0 0 no-repeat;</p> <p> height: 70px;
width: 91px;
overflow: hidden;
}

负责光泽的SPAN元素也10分简易;设定它的长宽和情况部位就可以了:

拷贝编码
编码以下:

a.logo span {
display: block;
background: url("shine.png") ⑹0px ⑻0px no-repeat; </p> <p> transition-property: all;
transition-duration: .8s;</p> <p> height: 70px;
width: 91px;
}

最终1步是设定电脑鼠标悬停时的姿势:

拷贝编码
编码以下:

a.logo:hover span {
background-position: 100px 100px;
}

由于面部是弧线型,这里做了1些独特解决,我用border-radius将內部的SPAN变为了椭圆型:

拷贝编码
编码以下:

a.logo span {
border-radius: 50%;
}

这便是当电脑鼠标悬停岁月泽1闪而过的实际效果了,十分简易!


用这样少的编码造就出这么炫的实际效果,彻底值得放在网站上。许多年前大家都必须应用JavaScript专用工具库才可以进行这样的实际效果——而如今轻轻松松的只必须几行CSS编码。期待你们也感觉这个实际效果很趣味,你能够换为你的头像试1下!