CSS3 2D转换实现遮罩效果

最新推荐文章于 2022-11-07 17:13:18 发布

这碗花里只有粥

最新推荐文章于 2022-11-07 17:13:18 发布

阅读量339

点赞数 1

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq_36381242/article/details/99456228

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

实现遮罩效果如下：当鼠标悬停在li的区域，遮罩的矩形会有一个动画。

遮罩效果

分析：

实现遮罩效果步骤

需要有一个盒子的宽度及高度与li一样，li要设置overflow:hidden；
将这个盒子定位与li重和
注意设置盒子的透明度
实现动画

这里的动画使用了CSS3 2D 转换中的rotate();将遮罩旋转90度

并且设置了转化元素的位置：transform-origin: right bottom;

附上代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3D转换</title>
		<style>
			@font-face{
				font-family: cuteFont;
				src:url(font/cutefont.ttf);
			}
			body{
				font-family: cuteFont;
			}
			.box{
				width: 500px;
				height: 152px;
				background-color:rgb(130,166,245);
			}
			.box ul li{
				list-style: none;
				position: relative;
				float: left;/*相当于设置display:block*/
				width: 121px;
				height: 121px;
				background: rgb(255,192,159);
				margin: 10px;
				border: 5px solid rgb(246,214,255);
				overflow: hidden;
			}
			.box ul li img{
				/* display: block; */
				/* margin: 10px auto; */
			}
			.cover{
				width: 121px;
				height: 121px;
				background: rgba(42,82,0,0.7);
				position: absolute;
				left:0;
				top:0;
				/* 动画相关的 */
				/* transform-origin 属性允许您改变被转换元素的位置。 */
				transform-origin: right bottom;
				-webkit-transform-origin: right bottom;
				-moz-transform-origin: right bottom;
				/* transform: rotate(0deg); */
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				color:rgb(226,219,190);
			}
			
			/* 鼠标悬停在li区域 cover实现动画 */
			.box li:hover .cover{
				/* 顺时针转90度 */
				transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				/* transition属性是一个速记属性有四个属性：
				transition-property,  指定CSS属性的name，transition效果
				transition-duration,transition效果需要指定多少秒或毫秒才能完成
				transition-timing-function, 指定transition效果的转速曲线
				and transition-delay。定义transition效果开始的时候 
				*/
			   /* 设置让动画持续1s */
				transition:all 1s;
				-webkit-transition:all 1s;
				-moz-transition:all 1s;
			}
			
			.cover a{
				/* 设置遮罩中的圆点 */
				display: block;
				width: 20px;
				height: 20px;
				background-color: rgb(226,219,190);
				border-radius: 50%;
				margin: 20px auto;
			}
			.cover p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li>
					<img src="img/桃美人.jpg" alt="桃美人">
					<div class="cover">
						<a></a>
						<p>桃美人</p>
					</div>
				</li>
				<li>
					<img src="img/吉娃莲.jpg" alt="吉娃娃">
					<div class="cover">
						<a></a>
						<p>吉娃娃</p>
					</div>
				</li>
				<li>
					<img src="img/姬玉露.jpg" alt="姬玉露">
					<div class="cover">
						<a></a>
						<p>姬玉露</p>
					</div>
				</li>
			</ul>
		</div>
	</body>
</html>

这碗花里只有粥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 2D转换实现遮罩效果

实现遮罩效果如下：当鼠标悬停在li的区域，遮罩的矩形会有一个动画。分析：实现遮罩效果步骤需要有一个盒子的宽度及高度与li一样，li要设置overflow:hidden；将这个盒子定位与li重和注意设置盒子的透明度实现动画这里的动画使用了CSS3 2D 转换中的rotate();将遮罩旋转90度并且设置了转化元素的位置：transform-origin: right...
复制链接

扫一扫

专栏目录