HTML实现一个简单的图片自动显示特效

谁借莪１个温暖的怀抱￠ 2022-02-21 12:40 494阅读 0赞

一个简单的图片自动显示特效

![20190410222121896.gif][]

源代码：

<html>
 	<head>
 		<title>Web</title>
 		<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
 		<style>
 			html {
 				background-color: #659cef;
 			}
 			.icon{
 				font-size:0px; /*使span中的文字不显示*/
 				cursor:pointer; /*使鼠标指针显示为手型*/
 				display:inline-block;
 				width:100px;
 				height:100px;
 				line-height:100px;
 				border-radius:50%; /*使背景形状显示为圆形*/
 				background:#FFF;
 				color:#8b8ab3;
 				text-align:center;
 				animation:move 1s cubic-bezier(.62,-0.91,.45,1.97);
 				animation-fill-mode:backward;
 			}
 			.icon::before{
 				font-family: FontAwesome;
 				speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
 				font-size:48px;
 				display:block;
 			}
 			
 			.home::before {
 				content: '\f015';
 			}
 			
 			.search::before {
 				content: '\f002';
 			}
 			
 			.user::before {
 				content: '\f007';
 			}
 			
 			.mail::before {
 				content: '\f0e0';
 			}
 			
 			.chat::before{
 				content: '\f086';
 			}
 			
 			@keyframes move {
 				from {
 					opacity:0;
 					transform:translateY(100%);
 				}
 				to {
 					opacity:1;
 					transform:translateY(0%);
 				}
 			}
 			
 			.home{
 				animation-delay:0s;
 			}
 			.search{
 				animation-delay:.1s;
 			}
 			.user{
 				animation-delay:.2s;
 			}
 			.mail{
 				animation-delay:.3s;
 			}
 			.chat{
 				animation-delay:.4s;
 			}
 		</style>
 	</head>
 	<body>
 		Home
 		Search
 		User
 		Mail
 		Chat
 	</body>
 </html>

[20190410222121896.gif]: /images/20220221/4ec4bf997b32413d84cfa70e42eb0f37.png