CSS3过度鼠标经过实现炫酷图片效果

最新推荐文章于 2023-12-29 11:30:00 发布

苦瓜式的幽默

最新推荐文章于 2023-12-29 11:30:00 发布

阅读量275

点赞数 1

分类专栏：前端文章标签： html5 html css css3

本文链接：https://blog.csdn.net/are_gh/article/details/112060270

版权

使用CSS3的过度效果，可以为网页上的图片添加炫酷的鼠标经过变换，提升用户体验。

摘要由CSDN通过智能技术生成

CSS3过度鼠标经过实现炫酷图片效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		body {
background: #000;
		}
		.box {
			overflow: hidden;
			position: relative;
			width:450px;
			height:320px;
			border:1px solid #000;
			margin:100px auto;
			box-shadow:-1px 0px 45px 1px #fff;
		}
		.box:hover img {
			transform: scale(1.1);
		}
		.box img {
			transition: all .5s;
			width: 100%;
			height:100%;
		}
		.box span {
			transition:all .5s;
			position: absolute;
			top: 40px;
			left:-200px;
			color: #fff;
			font-size: 24px;
			font-weight: 700;
		}
		.box:hover span {
			left:45px;
		}
		.cover1 {
			transition:all .5s;
			z-index: 1;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left:0;
			bac