使用CSS3动画制作导航菜单

1、使用定位属性把图片“赚”和“花”设置到相对应的位置上
2、使用animation属性给中间的“赚”和“花”图片设置动画，动画效果为鼠标移入“赚”图片的时候变为“赚积分”，
并且是从左到右缓慢展开的效果
3、使用transition属性给右边的“论”图片设置动画，效果为鼠标移入旋转360°

效果展示

代码展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>实验7_彩贝导航</title><style>a{text-decoration: none;}.caibei{width: 100%;height: 100px;background-color: #eeeeee;line-height: 100px;}.logo{float: left;}li{/* position: relative; */float: left;list-style: none;width: 90px;cursor: pointer;}li a{margin-right: 10px;color: black;}li a:hover{color: #ff0000;}.right img{margin-left: 20px;cursor: pointer;transition: all 0.5s ease-in-out;}.right img:hover{transform: scale(1.5)rotate(360deg);}.icon1,.icon2{position: absolute;display: inline-block;width: 38px;height: 23px;top: 35px;}.icon1{background: url("./实验素材/header_03.png") 0 0 no-repeat;}.icon2{background: url("./实验素材/header_07.png") 0 0 no-repeat;}.back:hover .icon1{animation: zhuan 1s forwards;}.shop:hover .icon2{animation: hua 1s forwards;}@keyframes zhuan {0%{width: 37px;background: url("./实验素材/header_03.png") 0 0 no-repeat ;}30%{width: 45px;background: url("./实验素材/header_03.png") 0 0 no-repeat;}70%{width: 55px;background: url("./实验素材/header_03.png") 0 0 no-repeat;}100%{width: 65px;background: url("./实验素材/header_05.png") 0 0 no-repeat;}}@keyframes hua {0%{width: 37px;background: url("./实验素材/header_07.png") 0 0 no-repeat;}30%{width: 45px;background: url("./实验素材/header_07.png") 0 0 no-repeat;}70%{width: 55px;background: url("./实验素材/header_07.png") 0 0 no-repeat;}100%{width: 65px;background: url("./实验素材/header_09.png") 0 0 no-repeat;}}</style></head><body><div class="caibei"><div class="logo"><img src="./实验素材/logo_170x46.png" alt="彩贝导航"></div><nav><ul><li class="back"><a href="#"><span class="icon1"></span>返回商城</a>|</li><li><a href="#">商旅频道</a>|</li><li class="shop"><a href="#"><span class="icon2"></span>积分商城</a>|</li><li><a href="#">商旅频道</a>|</li><li><a href="#">了解彩贝</a>|</li><li><a href="#">彩贝活动</a>|</li><li><a href="#">个人中心</a>|</li></ul></nav><div class="right"><img src="./实验素材/iconsB_11.gif" alt=""><img src="./实验素材/iconsB_12.gif" alt=""><img src="./实验素材/iconsB_13.png" alt=""></div></div></body>
</html>

使用CSS3动画制作导航菜单相关推荐

css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
动漫风html源码,CSS3动画制作一个卡通风格的404错误页面代码
CSS3动画制作一个卡通风格的404错误页面代码(有动画效果) html> Css 404错误页 .error-container { text-align: center; font-size ...
CSS3动画制作的旋转风车，大家五一节日快乐
✅作者简介: 大家好五一快乐,我是痴心阿文,你们的学友哥,今天给大家分享一个CSS3动画制作的旋转风车!
利用CSS3动画制作摩天轮
本篇文章向大家介绍利用CSS3动画制作摩天轮旋转特效,代码很简单,还不赶紧学起来,发给你的小朋友看看吧! 运行效果: 代码: <!DOCTYPE html> <html>< ...
ul li 制作导航菜单
ul li 制作导航菜单效果图: 代码段: <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...
css3图标悬停导航菜单
纯css3制作的图标悬停导航菜单,包含9中不同的悬停风格,干净大气. 转载于:https://blog.51cto.com/jimanyu/1362823
css3动画制作转动相册
一.CSS3 动画 CSS3 可以创建动画,它可以取代许多网页动画图像.Flash 动画和 JavaScript 实现的效果. 1.CSS3 @keyframes 规则要创建 CSS3 动画,你需要 ...
如何在WordPress中制作导航菜单（7个功能点）
在wordpress中添加导航菜单是初级的操作,但对于新手而言依旧会遇到一些问题,接下来我们就逐一讲解. 什么是导航菜单导航菜单通常位于网站的顶部和底部,用于方便用户快速打开关键页面,譬如下方两张图 ...

使用CSS3动画制作导航菜单

使用CSS3动画制作导航菜单

效果展示

代码展示

使用CSS3动画制作导航菜单相关推荐

最新文章

热门文章