css 悬浮hover效果代码
代码语言:html
所属分类:悬停
代码描述:css 悬浮hover效果代码,9中hover悬浮动画效果
代码标签: 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body{ margin: 0; padding: 0; font-family: sans-serif; } h1, h2, h3, h4, h5, h6, p{ color: #fff; font-weight: 200; } a{ text-decoration: none; } /* GRID */ .grid { max-width: 940px; width: 100%; margin: 0 auto; } .four { width: 32.26%; } /* COLUMNS */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-of-type { margin-left: 0; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* GENERAL STYLES FOR BOX AND OVERLAY */ .box { display: block; width: 100%; height: 200px; overflow: hidden; background-color: #bbb; text-align: center; position: relative; } .overlay{ width: 100%; height:100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } /* SLIDE IN */ .slide-in .overlay{ background-color: #6addaa; line-height: 200px; color: #fff; transform: translateX(-100%); -webkit-transition: transform 0.5s ease-out; -o-transition: transform 0.5s ease-out; transition: transform 0.5s ease-out; } .slide-in .box:hover .overlay{ transform: translateX(0); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0