整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

图片添加倒影 HTML + CSS 实现给图片添加倒影 #前端开发

看一下这样的效果。这里展示了四张图片,每一个图片都有一个倒影。当鼠标旋转每个图片的时候倒影会消失,并且把图片放大显示。接下来跟着我一起完成这样的效果制作。

·这里展示了一个空白的HTML模板,来设置一下它的背景颜色。

·bargain设置为边距为零,内边距也为零,背景颜色为黑色。

·再添加一个INMAX标签,添加上图片。这个图片当前是没有任何效果的,就直接的展示出来了。

·给图片添加一个样式,设置一个宽度为一百五十像素。这个时候发现这个图片是靠左上角的,设置一个next布局body。

·再设置一下它的高度为一百,根据这个四口来设置高度,宽度也是。现在就可以把它在窗口的页面上进行剧终了。

·再来设置一下它的图片样式。

·order top left,左上角的圆角设置成十像素,右上角也设置成十像素的圆角。

·这个时候遇到一个关键的问题,怎么样去把设置成一个倒影,增加一个倒影?它有这么一个属性,这里有设置一下它的倒影,往下的倒影让倒影离开主要图片的五个像素的间距,间距也就是这里的缝隙。

·再设置一下颜色,这个颜色来设置一个渐变的,这个时候是空白的,这样子就产生了这样的倒影。但是倒影还是太高了一点,可以给透明加一个,如果不够可以继续加,这样子就差不多了,设置成八十暗一点,这样子就有了一个倒影。

·再设置一下鼠标悬停,悬停是没有效果的,可以给英美的标签添加一个鼠标悬停的效果。

·然后是它的放大,放大为一点五倍,这个时候放大缩小是很生硬的,可以在这里加上零点五秒的过渡时间,但倒影还没有消失,希望它的倒影消失一下。

·可以继续设置一下属性,它有一个on set,也就是恢复到默认设置。这个时候再来看一下,再给它添加外发光的效果,这样就出现了这个效果。

·给元素多复制几个,这个时候再来看一下,但它是挨在一起的,可以给元素设置一个外边距,上下为零,左右为十像素,可以设置成五像素。

·这个时候再来看,这个时候会发现后边的一张图片会遮住前面的那张图片,但这不是想要的,可以在over的时候把英美解的元素的层级往上走一下,这样子设置到最高,就展现到最前面,外发光效果还是太小小了点,这样子看起来就好看一些。

·如果图片放大了,最好是把左下角也设置成圆角,也可以这里设置一下。再来看一下,这样子是不是放大的时候全为圆角了。

今天的展示就到这里,谢谢大家。

SVG(Scalable Vector Graphics)是一种基于XML的2D矢量图形格式,可以实现图像的无损缩放和高清晰度显示。在HTML中嵌入SVG图像,可以使网页更加生动有趣,提高用户体验

<svg width="54" height="54" class="c-nav--footer__svgicon c-slackhash" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386" fill="#44BEDF">
</path>
<path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" fill="#2EB67D">
</path>
<path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" fill="#ECB22E">
</path>
<path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" fill="#E01E5A">
</path>
</g>
</svg>

景图片

本例演示如何向 HTML 页面添加背景图片。

<html>

<body background="background.jpg">

<h3>图像背景</h3>

<p>gif 和 jpg 文件均可用作 HTML 背景。</p>

<p>如果图像小于页面,图像会进行重复。</p>

</body>

</html>

HTML基础操作:图片显示