首页 > 网站 > WEB开发 > 正文

css3 animation 学习

2024-04-27 14:30:41
字体：大 中 小
来源：转载
供稿：网友
CSS3 animation 学习

css3中可以实现动画效果，主要是通过css3中新增加的属性(transform , transition,animation)来完成。

他们的详细解释可以参考W3CSCHOOL

下面是效果图：

类似于tab选项卡，当点击某个input的时候，就以动画的效果来显示对应的内容区域。

Html代码Flashvars" value="clipboard=%3Chtml%20lang%3D%22zh%22%20%3E%0A%3Chead%3E%0A%09%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%09%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%20%0A%0A%3Cstyle%3E%0A%09%0Abody%7B%0A%09overflow%3A%20hidden%3B%0A%7D%0A%0A.st-container%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%200%3B%0A%20%20%20%20font-family%3A%20Arial%2C%20sans-serif%3B%0A%7D%0A%0A%2F*put%20the%20%E2%80%9Cnavigation%E2%80%9D%20at%20the%20top%20of%20the%20page%20by%20giving%20it%20a%20fixed%20position*%2F%0A%0A.st-container%20%3E%20input%2C%0A.st-container%20%3E%20a%20%7B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20width%3A%2020%25%3B%0A%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20height%3A%2034px%3B%0A%20%20%20%20line-height%3A%2034px%3B%0A%7D%0A%20%0A.st-container%20%3E%20input%20%7B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20z-index%3A%201000%3B%0A%7D%0A%20%0A.st-container%20%3E%20a%20%7B%0A%20%20%20%20z-index%3A%2010%3B%0A%20%20%20%20font-weight%3A%20700%3B%0A%20%20%20%20background%3A%20%23e23a6e%3B%0A%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20text-shadow%3A%201px%201px%201px%20rgba(151%2C24%2C64%2C0.2)%3B%0A%09text-decoration%3A%20none%3B%0A%7D%0A%0A%2F*It%20will%20have%20the%20same%20background%20color%20like%20the%20link%20elements%3A*%2F%0A.st-container%3Aafter%20%7B%0A%20%20%20%20content%3A%20''%3B%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20height%3A%2034px%3B%0A%20%20%20%20background%3A%20%23e23a6e%3B%0A%20%20%20%20z-index%3A%209%3B%0A%20%20%20%20top%3A%200%3B%0A%7D%0A%0A%2F*give%20input%20and%20links%20%20respective%20left%20values*%2F%0A%23st-control-1%2C%20%23st-control-1%20%2B%20a%20%7B%0A%20%20%20%20left%3A%200%3B%0A%7D%0A%20%0A%23st-control-2%2C%20%23st-control-2%20%2B%20a%20%7B%0A%20%20%20%20left%3A%2020%25%3B%0A%7D%0A%20%0A%23st-control-3%2C%20%23st-control-3%20%2B%20a%20%7B%0A%20%20%20%20left%3A%2040%25%3B%0A%7D%0A%20%0A%23st-control-4%2C%20%23st-control-4%20%2B%20a%20%7B%0A%20%20%20%20left%3A%2060%25%3B%0A%7D%0A%20%0A%23st-control-5%2C%20%23st-control-5%20%2B%20a%20%7B%0A%20%20%20%20left%3A%2080%25%3B%0A%7D%0A%0A%2F*define%20a%20%E2%80%9Cselected%E2%80%9D%20state%20for%20the%20link%20elements.*%2F%0A.st-container%20%3E%20input%3Achecked%20%2B%20a%2C%0A.st-container%20%3E%20input%3Achecked%3Ahover%20%2B%20a%7B%0A%20%20%20%20background%3A%20%23821134%3B%0A%7D%0A%0A%2F*add%20a%20little%20triangle%20using%20the%20pseudo-class%20%3Aafter%20and%20give%20it%20the%20same%20color%3A*%2F%0A%0A.st-container%20%3E%20input%3Achecked%20%2B%20a%3Aafter%2C%0A.st-container%20%3E%20input%3Achecked%3Ahover%20%2B%20a%3Aafter%7B%0A%20%20%20%20top%3A%20100%25%3B%0A%20%20%20%20border%3A%20solid%20transparent%3B%0A%20%20%20%20content%3A%20''%3B%0A%20%20%20%20height%3A%200%3B%0A%20%20%20%20width%3A%200%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20pointer-events%3A%20none%3B%0A%20%20%20%20border-top-color%3A%20%23821134%3B%0A%20%20%20%20border-width%3A%2020px%3B%0A%20%20%20%20left%3A%2050%25%3B%0A%20%20%20%20margin-left%3A%20-20px%3B%0A%7D%0A%0A%2F*define%20a%20hover%20state%20for%20the%20link%20element%3A*%2F%0A.st-container%20%3E%20input%3Ahover%20%2B%20a%7B%0A%20%20%20%20background%3A%20%23AD244F%3B%0A%7D%0A%20%0A.st-container%20%3E%20input%3Ahover%20%2B%20a%3Aafter%20%7B%0A%20%20%20%20border-bottom-color%3A%20%23AD244F%3B%0A%7D%0A%0A%2F*define%20scroll%20panel%20style*%2F%0A%0A.st-scroll%2C%0A.st-panel%20%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20height%3A%20100%25%3B%0A%7D%0A%20%0A.st-scroll%20%7B%0A%20%20%20%20top%3A%200%3B%0A%20%20%20%20left%3A%200%3B%0A%20%20%20%20-webkit-transition%3A%20all%200.6s%20ease-in-out%3B%0A%20%20%20%20%20%0A%20%20%20%20%2F*%20Let's%20enforce%20some%20hardware%20acceleration%20*%2F%0A%20%20%20%20-webkit-transform%3A%20translate3d(0%2C%200%2C%200)%3B%0A%20%20%20%20-webkit-backface-visibility%3A%20hidden%3B%0A%09border%3A%20solid%201px%20%23ccc%3B%0A%7D%0A%20%0A.st-panel%7B%0A%20%20%20%20background%3A%20%23fff%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%7D%20%0A%0A%2F**define%20the%20positions%20for%20the%20st-scroll%20wrapper%20for%20each%20checked%20radio%20button*%2F%0A%0A%23st-control-1%3Achecked%20~%20.st-scroll%20%7B%0A%20%20%20%20-webkit-transform%3A%20translateY(0%25)%3B%0A%09background-color%3A%20green%3B%0A%7D%0A%23st-control-2%3Achecked%20~%20.st-scroll%20%7B%0A%20%20%20%20-webkit-transform%3A%20translateY(-100%25)%3B%0A%09background-color%3A%20green%3B%0A%7D%0A%23st-control-3%3Achecked%20~%20.st-scroll%20%7B%0A%20%20%20%20-webkit-transform%3A%20translateY(-200%25)%3B%0A%09background-color%3A%20green%3B%0A%7D%0A%23st-control-4%3Achecked%20~%20.st-scroll%20%7B%0A%20%20%20%20-webkit-transform%3A%20translateY(-300%25)%3B%0A%09background-color%3A%20green%3B%0A%7D%0A%23st-control-5%3Achecked%20~%20.st-scroll%20%7B%0A%20%20%20%20-webkit-transform%3A%20translateY(-400%25)%3B%0A%09background-color%3A%20green%3B%0A%7D%0A%0A%23st-control-1%3Achecked%20~%20.st-scroll%20%23st-panel-1%20h2%2C%0A%23st-control-2%3Achecked%20~%20.st-scroll%20%23st-panel-2%20h2%2C%0A%23st-control-3%3Achecked%20~%20.st-scroll%20%23st-panel-3%20h2%2C%0A%23st-control-4%3Achecked%20~%20.st-scroll%20%23st-panel-4%20h2%2C%0A%23st-control-5%3Achecked%20~%20.st-scroll%20%23st-panel-5%20h2%7B%0A%20%20%20%20-webkit-animation%3A%20moveDown%201.6s%20ease-in-out%201.2s%20backwards%3B%0A%7D%0A%0A%2F**%20define%20animation%20for%20the%20scroll%20panel*%2F%20%0A%40keyframes%20moveDown%7B%0A%20%20%20%200%25%20%7B%20%0A%20%20%20%20%20%20%20%20-webkit-transform%3A%20translateY(-40px)%3B%20%0A%20%20%20%20%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20%7D%0A%20%20%20%20100%25%20%7B%20%0A%20%20%20%20%20%20%20%20-webkit-transform%3A%20translateY(0px)%3B%20%20%0A%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%7D%0A%7D%0A%0A.st-panel%20h2%20%7B%0A%20%20%20%20color%3A%20%23e23a6e%3B%0A%20%20%20%20text-shadow%3A%201px%201px%201px%20rgba(151%2C24%2C64%2C0.2)%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20font-size%3A%2054px%3B%0A%20%20%20%20font-weight%3A%20900%3B%0A%20%20%20%20width%3A%2080%25%3B%0A%20%20%20%20left%3A%2010%25%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20line-height%3A%2050px%3B%0A%20%20%20%20margin%3A%20-70px%200%200%200%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20top%3A%2050%25%3B%0A%20%20%20%20-webkit-backface-visibility%3A%20hidden%3B%0A%7D%0A%0A.st-panel%20p%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%20%20font-size%3A%2016px%3B%0A%20%20%20%20line-height%3A%2022px%3B%0A%20%20%20%20color%3A%20%238b8b8b%3B%0A%20%20%20%20z-index%3A%202%3B%0A%20%20%20%20padding%3A%200%3B%0A%20%20%20%20width%3A%2050%25%3B%0A%20%20%20%20left%3A%2025%25%3B%0A%20%20%20%20top%3A%2050%25%3B%0A%20%20%20%20margin%3A%2010px%200%200%200%3B%0A%20%20%20%20-webkit-backface-visibility%3A%20hidden%3B%0A%7D%0A%0A%3C%2Fstyle%3E%0A%3Cbody%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22container%22%3E%0A%09%09%0A%09%09%09%3Cdiv%20class%3D%22st-container%22%3E%0A%09%09%09%0A%09%09%09%09%3Cinput%20type%3D%22radio%22%20name%3D%22radio-set%22%20checked%3D%22checked%22%20id%3D%22st-control-1%22%3E%0A%09%09%09%09%3Ca%



发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有