CSS3鼠标悬浮图片闪动效果

发布时间:2020-05-23 02:24:16发布者:admin浏览数:
本章节分享一段代码实例,它实现了鼠标悬浮能够实现图片闪动的效果。

首先需要悬浮于文字之上出现图片,然后再悬浮于图片之上测试效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">@keyframes btnZoom { 0% { opacity: 1.0; transform: scale(1, 1); } 60% { opacity: 0.0; transform: scale(1.2, 1.2); } 100% { opacity: 0.0; }}h3 { color: red; text-align: center;}.wrap { position: relative; width: 100px; margin: 0 auto;}.wrap,.wrap span { cursor: pointer; display: block; width: 205px; height: 205px; background: url(demo/CSS/img/antzone.png) -404px -153px no-repeat;}.wrap span { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; opacity: 0;}.wrap:hover span { animation: btnZoom infinite linear 0.8s;}</style></head> <body><h3>蚂蚁部落欢迎您</h3><p class="wrap"> <span></span></p></body></html>

  网站建设分类
程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航