190. 前端卡片切换特效及事件发出

Stella981
• 阅读 440

1.效果

190. 前端卡片切换特效及事件发出

2.实现代码

2.1 整体代码 图

190. 前端卡片切换特效及事件发出

2.2 css

190. 前端卡片切换特效及事件发出

*{
    padding:0;
    list-style:none;
    margin:0;
}
.years{
    width:120px;
    height:30px;
    border-radius:4px;
    overflow:hidden;
    background-color:#55454f;
    font-size:0;
    margin:50px auto 0;
    color:#c1bebf;
}
.years li{
    width:33.3%;
    display:inline-block;
    vertical-align:top;
    font-size:16px;
    text-align:center;
    line-height:30px;
    height:100%;
    cursor:pointer;
}
.years li:nth-child(2){
    border-right:1px solid #6a6172;
    border-left:1px solid #6a6172;
    box-sizing:border-box;
}
.years li:first-child{
    background-color:#e68133;
}

2.3 html 

190. 前端卡片切换特效及事件发出

                      时间切换                                                         
                          
  •                       
  •                       
  •                
    

3. 发出请求

190. 前端卡片切换特效及事件发出

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Java修道之路,问鼎巅峰,我辈代码修仙法力齐天
<center<fontcolor00FF7Fsize5face"黑体"代码尽头谁为峰,一见秃头道成空。</font<center<fontcolor00FF00size5face"黑体"编程修真路破折,一步一劫渡飞升。</font众所周知,编程修真有八大境界:1.Javase练气筑基2.数据库结丹3.web前端元婴4.Jav
待兔 待兔
4天前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
2年前
2021 最顶级 React 组件库推荐
点上方蓝字关注公众号「前端从进阶到入院」作者丨MaxRozen译者丨王强策划丨小智AntDesign!(https://oscimg.oschina.net/oscnet/a85c35f23bd04e5da6a1e5e68a24119b.png)项目链接:AntDesignh
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
2年前
mysql系列(三)——mysql架构与存储引擎
一、MySql逻辑架构!(https://oscimg.oschina.net/oscnet/up35e1824330cd1df7ac66652b9b1dbc41965.png)1.连接层!(https://oscimg.oschina.net/oscnet/up272cb2634e262cc2df52220a063
可莉 可莉
2年前
2021 最顶级 React 组件库推荐
点上方蓝字关注公众号「前端从进阶到入院」作者丨MaxRozen译者丨王强策划丨小智AntDesign!(https://oscimg.oschina.net/oscnet/a85c35f23bd04e5da6a1e5e68a24119b.png)项目链接:AntDesignh
Wesley13 Wesley13
2年前
CSS 奇思妙想:超级酷炫的边框动画
点上方蓝字关注公众号「前端从进阶到入院」精选原创好文助你进入大厂文章转载自公众号「iCSS前端趣闻」今天逛博客网站shoptalkshow\1\,看到这样一个界面,非常有意思:!(https://oscimg.oschina.net/oscnet/9655b35af5a045999ff55c144a3f7c
Stella981 Stella981
2年前
Js使用面向对象和面向过程的方法实现拖拽物体的效果
1.面向过程的拖拽实现代码:!(https://oscimg.oschina.net/oscnet/d680c759957babef2fec0902676eaa35ad9.gif)<!DOCTYPEhtml<html<head<titledragDiv</title
可莉 可莉
2年前
190. 前端卡片切换特效及事件发出
1.效果!(https://oscimg.oschina.net/oscnet/c8a54cd48f98ccc1bec9fffc0501dddfc7f.jpg)2.实现代码2.1整体代码图!(https://oscimg.oschina.net/oscnet/a9d815e96fee4