果图如下:
代码展示如下:
<style>
h1 {
font-size: 50px;
text-align: center;
color:slateblue;
filter: hue-rotate(240deg);
-webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
img{
filter: hue-rotate(120deg);
-webkit-box-reflect: right 1px;
}
</style>
<h1>你看到了什么</h1>
<img src="https://img1.baidu.com/it/u=1964477391,3223175982&fm=26&fmt=auto" alt="" width="200px" >
属性说明:
filter: hue-rotate(angle)
给图像应用色相旋转。“angle”设定图像会被调整的色环角度值。值为0deg,则图像无变化。
若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
-webkit-box-reflect
是webkit内核浏览器的一个私有属性,用来对block(块级)元素或者行内块元素(img,input)制作一个镜像的效果
✨✨ above:指定倒影在对象的上边
✨✨below:指定倒影在对象的下边
✨✨ left:指定倒影在对象的左边
✨✨ right:指定倒影在对象的右边
✨✨ offset:倒影与对象之间的间隔,可以为负值。
、相关知识点
介绍
文档
MDN关于倒影属性介绍:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
官方说明:
非标准:该特性是非标准的,不在标准轨道上。不要在面向Web的生产站点上使用它:它并不适用于每个用户。实现之间也可能存在很大的不兼容性,将来行为可能会发生变化
浏览器兼容性:
总结
虽然这是个非标准属性,但是大多数浏览器都支持,火狐除外,追求效果的还是可以使用的。
支持三个位置的属性值:
-webkit-box-reflect:属性值1 属性值2 属性值3;
-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */
-webkit-box-reflect: below 10px; /* 下,距离10像素 */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下,距离0像素,线性遮罩最后白色 */
完整代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { margin: 0; }
#time {
width: 300px;
height: 80px;
line-height: 80px;
font-size: 48px;
text-align: center;
font-weight: bold; /* 下 */
color: #fff;
background-color: #2196f3;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}
</style>
</head>
<body>
<div id="time"></div>
<script>
function refreshTime(){
let time = document.getElementById('time');
let h = new Date().getHours(); //小时
let m = new Date().getMinutes(); //分钟
let s = new Date().getSeconds(); //秒
time.innerHTML = `${h}:${m}:${s}`
setTimeout(refreshTime, 1000)
}
refreshTime()
</script>
</body>
</html>
以上就是今天要讲的内容,本文介绍CSS倒影属性,更多详细内容,自己多写写代码,多练练,可以参考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。
如果觉得有用欢迎点赞,关注
有问题私信我!!
看一下这样的效果。这里展示了四张图片,每一个图片都有一个倒影。当鼠标旋转每个图片的时候倒影会消失,并且把图片放大显示。接下来跟着我一起完成这样的效果制作。
·这里展示了一个空白的HTML模板,来设置一下它的背景颜色。
·bargain设置为边距为零,内边距也为零,背景颜色为黑色。
·再添加一个INMAX标签,添加上图片。这个图片当前是没有任何效果的,就直接的展示出来了。
·给图片添加一个样式,设置一个宽度为一百五十像素。这个时候发现这个图片是靠左上角的,设置一个next布局body。
·再设置一下它的高度为一百,根据这个四口来设置高度,宽度也是。现在就可以把它在窗口的页面上进行剧终了。
·再来设置一下它的图片样式。
·order top left,左上角的圆角设置成十像素,右上角也设置成十像素的圆角。
·这个时候遇到一个关键的问题,怎么样去把设置成一个倒影,增加一个倒影?它有这么一个属性,这里有设置一下它的倒影,往下的倒影让倒影离开主要图片的五个像素的间距,间距也就是这里的缝隙。
·再设置一下颜色,这个颜色来设置一个渐变的,这个时候是空白的,这样子就产生了这样的倒影。但是倒影还是太高了一点,可以给透明加一个,如果不够可以继续加,这样子就差不多了,设置成八十暗一点,这样子就有了一个倒影。
·再设置一下鼠标悬停,悬停是没有效果的,可以给英美的标签添加一个鼠标悬停的效果。
·然后是它的放大,放大为一点五倍,这个时候放大缩小是很生硬的,可以在这里加上零点五秒的过渡时间,但倒影还没有消失,希望它的倒影消失一下。
·可以继续设置一下属性,它有一个on set,也就是恢复到默认设置。这个时候再来看一下,再给它添加外发光的效果,这样就出现了这个效果。
·给元素多复制几个,这个时候再来看一下,但它是挨在一起的,可以给元素设置一个外边距,上下为零,左右为十像素,可以设置成五像素。
·这个时候再来看,这个时候会发现后边的一张图片会遮住前面的那张图片,但这不是想要的,可以在over的时候把英美解的元素的层级往上走一下,这样子设置到最高,就展现到最前面,外发光效果还是太小小了点,这样子看起来就好看一些。
·如果图片放大了,最好是把左下角也设置成圆角,也可以这里设置一下。再来看一下,这样子是不是放大的时候全为圆角了。
今天的展示就到这里,谢谢大家。
*请认真填写需求信息,我们会在24小时内与您取得联系。