Transition特效案列

2021-01-20

原创字数统计: 586 | 阅读时长: 3分

试试把鼠标移到标题图片上|ू･ω･` )

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../z-css/basic.css"/>
		<style type="text/css">
			.album{
				
				width: 500px;
				height: 250px;
				margin: 100px auto;
				overflow: hidden;
			}
			.album li{
				list-style: none;
				width: 100px;
				height: 250px;
				float: left;
				box-shadow: 0 0 10px #000;
				position: relative;
				transition-property: width;
				transition-duration: 1s;
				transition-timing-function: ease;
				/* transition-delay: 1s; */
				/* transition: all 1s; */
			}
			.album:hover li{
				width: 50px;
			}
			.album li:hover{
				 width: 300px;
			}
			.album p{
				position: absolute;
				width: 100%;
				background: #000;
				bottom: 16px;
				height: 30px;
				color: white;
				line-height: 30px;
				text-indent: 2em;
				opacity: 0.6;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<ul class="album">
			<li><a href=""><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/QQ截图20210127165125.jpg" alt=""><p>css层的定位position、absolute、relative层叠加的五条叠加法则</p></a></li>
			<li><a href=""><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/QQ截图20210126213101.jpg" alt=""><p>阿里巴巴字体库引用方式</p></a></li>
			<li><a href=""><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/QQ截图20210126155629.jpg" alt=""><p>如何优雅的加这条杠?</p></a></li>
			<li><a href=""><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/QQ截图20210123232720.jpg" alt=""><p>Jojo的奇妙网站</p></a></li>
			<li><a href=""><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/src=htt16db1_1440w.jpg_source=172ae18b&refer=http___pic1.zhimg.jpg" alt=""><p>通用CSS样式</p></a></li>
		</ul>
	</body>
</html>

本文作者： 本该如此
本文链接： https://anyway521.github.io/post/8e08dc98.html
最后更新： 2021年01月31日 22:49:22
版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！