纯css3实现动画 4.缩放动画

前端基础 同时被 2 个专栏收录
78 篇文章 1 订阅
32 篇文章 0 订阅

缩放动画浏览器实现效果:

在这里插入图片描述

缩放动画实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>figure demo</title>
	<style type="text/css">
		body,figure,figcaption,h2,p,img,div{
			margin: 0;
			padding: 0;
		}
		figure{
			position: relative;
			width: 33.33%;
			height: 350px;
			overflow: hidden;
			float: left;
			
		}
		figure img{
			margin-left:-120px; 
			opacity: 0.8;
			transition: all 0.5s;
		}
		figcaption{
			display: block;
			position: absolute;
			top: 0px;
			left: 0px;
			color: #FFF;
			font-family: "微软雅黑";
		}
		figure figcaption p,h2,span{
			transition: all 0.5s;
		}
		@media screen and(max-width:600px){
			figure{width: 100%;}
		}
		@media screen and(min-width: 601px) and(max-width:1000px){
			figure{width: 50%;}
		}
		@media screen and(min-width:1001px){
			figure{width: 33.33%;}
		}
		.test4 img{
			margin-top:-160px; 
		}
		.test4{
			background: yellow;
		}
		.test4 figcaption{
			width: 100%;
			height: 100%;
		}
		.test4 figcaption p{
			margin-top: 5px;
			margin-left: 15%;
			opacity: 0;
		}
		.test4 figcaption h2{
			margin-top: 15%;
			margin-left: 15%;
			opacity: 0;
		}
		.test4 figcaption div{
			border: 2px solid #FFF;
			width: 80%;height: 80%;
			position: absolute;
			top: 10%;
			left: 10%;
			transform: scale(1.2,1.2);
			opacity: 0;
			transform: translate(0px,-350px) rotate(0deg);
			transition: all 0.5s;
		}
		.test4:hover figcaption div{
			transform: scale(0.5,0.5);
			opacity: 1;
			transform: translate(0px,0px) rotate(360deg);
		}
		.test4:hover img{
			transform: scale(1.2,1.2);
			opacity: 0.5;
		}
		.test4:hover figcaption h2{
			transform: scale(1,1);
			opacity: 1;
		}
		.test4:hover figcaption p{
			transform: scale(1,1);
			opacity: 1;
		}
		</style>
</head>
<body>
	<figure class="test4">
		<img src="D:\壁纸\新建文件夹\394aced300.jpg" alt="谭松韵">
		<figcaption>
			<h2>缩放动画</h2>
			<p>缩放动画图片注解</p>
			<div></div>
		</figcaption>
	</figure>
</body>
</html>
  • 4
    点赞
  • 1
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值