动画按钮

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在按钮上可以使用一些动画的效果 .. 鼠标放到按钮上的时候,会用动画效果显示按钮上额外的内容 .. 同样可以先用一个 button 标签 .. 动画按钮上要用一个 animated 类 .. ui animated button .. 然后把默认在按钮上显示的内容放到一个 div 标签里面,上面用一个 visible 类,还有一个 content 类 .. 这里 下一步 这个文字会默认在按钮上显示 ..

要用动画效果切换显示的内容,也可以放到一个 div 里面,上面用一个 hidden content .. 表示这是一个默认要隐藏的内容 .. 这里再用一个小图标 .. 小图标一般使用 i 标签 .. right arrow icon .. 意思是这是一个向右箭头图标 ..

默认这个动画按钮上显示下一步这个文字 .. 鼠标放上去 .. 会用动画效果切换显示被隐藏的内容这里就是一个小图标 .. 这个动画是从右向左,把隐藏的内容显示出来.. 我们也可以控制这个动画的方向 ..

选中这段代码 .. command + shift + D .. 复制一段 .. 这里再加上一个 vertical .. 表示垂直的 .. 现在这个按钮动画是从上往下 .. 把隐藏的内容显示出来,把默认显示的内容隐藏起来 ..

另外还有一个 fade .. 渐变,我们再去试一下 .. 复制一段代做 .. 把 vertical 换成 fade .. 现在这个动画是渐变的把显示的内容隐藏起来,把隐藏的内容显示出来 ..

动画按钮《 Semantic UI 元素 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点