html – 在css中创建幻灯片菜单

概述我正在创建一个幻灯片菜单,橙色框位于菜单的一角,并出现带有橙色菜单名称的白色框. 问题是当我使用时：悬停 并将鼠标移到该位置,它会启动,并自动进入开始位置. 如何让它完成它的动画？ http://jsfiddle.net/JudgeDredd/XWmme/1/ .smmo { width:195px; height:45px; background:#FF3300; 我正在创建一个幻灯片菜单,橙色框位于菜单的一角,并出现带有橙色菜单名称的白色框.

问题是当我使用时：悬停
并将鼠标移到该位置,它会启动,并自动进入开始位置.

如何让它完成它的动画？

http://jsfiddle.net/JudgeDredd/XWmme/1/

.smmo    {    wIDth:195px;    height:45px;    background:#FF3300;    position:relative;    display:block;    }    .smmo:hover {-webkit-animation-name:slIDeL ;-webkit-animation-duration:1s; }@-webkit-keyframes slIDeL /* Safari and Chrome */{from {left:0px;}to {left:200px;wIDth:65px;}}

解决方法 我带来了一个只使用转换的解决方案：在伪元素之前这样：

HTML

<div >Your Title</div>

CSS

.smmo {    position:relative;    color:orange;    text-align:center;    wIDth:195px;    height:45px;    line-height:45px;}.smmo:before{    content:" ";    wIDth:100%;    height:100%;    background:#FF3300;    position:relative;    display:block;    position:absolute;    top:0;    left:0;    Transition:all 1s;}.smmo:hover:before {    left:200px;    wIDth:65px;}

检查这个Demo fiddle

总结

以上是内存溢出为你收集整理的html – 在css中创建幻灯片菜单全部内容，希望文章能够帮你解决html – 在css中创建幻灯片菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。