600字范文 > HTML实现一个简单的图片自动显示特效

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

时间：2023-03-05 15:06:54

相关推荐

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

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

源代码：

<html><head><title>Web</title><link href="/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>HomeSearchUserMailChat</body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。