猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

蘑菇街线性渐变的动画如何实现

https://img.mukewang.com/5bda956a0001aab802660150.jpg

https://img1.mukewang.com/5bda95750001a47102800161.jpg

最近在模仿蘑菇街做练习
这种线性渐变的动画如何实现啊？用过keyframe，transition，都很生硬，也许是我用的不对？

ITMISS
浏览 438回答 1
1回答

哔哔one

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>css3渐变动画</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; *{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-right: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 120px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content: '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-transition: opacity 0.5s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -moz-transition: opacity 0.5s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -ms-transition: opacity 0.5s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: opacity 0.5s ease-out;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 2;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover:hover:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover-a{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #00dafe\9;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -webkit-linear-gradient(left, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -moz-linear-gradient(left, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -ms-linear-gradient(left, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(left, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover-a:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -webkit-linear-gradient(right, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -moz-linear-gradient(right, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -ms-linear-gradient(right, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(right, #00dafe, #3381ff);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover-b{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #ea73ff\9;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -webkit-linear-gradient(left, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -moz-linear-gradient(left, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -ms-linear-gradient(left, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(left, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .hover-b:after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -webkit-linear-gradient(right, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -moz-linear-gradient(right, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: -ms-linear-gradient(right, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: linear-gradient(right, #ea73ff, #a34eff);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body><a href="" class="hover hover-a"></a><a href="" class="hover hover-b"></a></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript