下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8" /> <Meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>CSS3</title> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta name="author" content="Codrops" /> <style> /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } html,body { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } section,header{ display: block; } /* General Demo Style */ body{ font-family: Microsoft Yahei,Georgia,serif; background: #e0e3ec; font-weight: 400; font-size: 15px; color: #393b40; overflow-y: scroll; } a{ color: #333; text-decoration: none; } .container{ width: 100%; position: relative; text-align: center; } .ff-container{ width: 90%; margin: 10px auto 30px auto; } .ff-container label{ font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif; width: 25%; height: 30px; cursor: pointer; color: #777; text-shadow: 1px 1px 1px rgba(255,255,0.8); line-height: 33px; font-size: 19px; background: #ffffff; background: -moz-linear-gradient(top,#ffffff 1%,#eaeaea 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#ffffff),color-stop(100%,#eaeaea)); background: -webkit-linear-gradient(top,#eaeaea 100%); background: -o-linear-gradient(top,#eaeaea 100%); background: -ms-linear-gradient(top,#eaeaea 100%); background: linear-gradient(top,#eaeaea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#eaeaea',GradientType=0 ); float:left; Box-shadow: 0px 0px 0px 1px #aaa,1px 0px 0px 0px rgba(255,0.9) inset,0px 1px 2px rgba(0,0.2); } .ff-container label.ff-label-type-all{ border-radius: 3px 0px 0px 3px; } .ff-container label.ff-label-type-3{ border-radius: 0px 3px 3px 0px; } .ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3{ background: #646d93; background: -moz-linear-gradient(top,#646d93 0%,#7c87ad 100%); background: -webkit-gradient(linear,color-stop(0%,#646d93),#7c87ad)); background: -webkit-linear-gradient(top,#7c87ad 100%); background: -o-linear-gradient(top,#7c87ad 100%); background: -ms-linear-gradient(top,#7c87ad 100%); background: linear-gradient(top,#7c87ad 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93',endColorstr='#7c87ad',GradientType=0 ); color: #424d71; text-shadow: 0px 1px 1px rgba(255,0.3); Box-shadow: 0px 0px 0px 1px #40496e,0 1px 2px rgba(0,0.1) inset; } .ff-container input{ display: none; } .ff-items{ position: relative; margin: 0px auto; padding-top: 20px; } .ff-items a{ display: block; position: relative; padding: 10px; background: #fff; Box-shadow: 0 1px 2px rgba(0,0.1); margin: 4px; width: 160px; height: 120px; } .ff-items a span{ display: block; background: rgba(113,123,161,0.9); font-style: italic; color: #fff; font-weight: bold; padding: 20px; position: absolute; bottom: 10px; left: 10px; width: 120px; height: 0px; overflow: hidden; opacity: 0; text-align: center; text-shadow: 1px 1px 1px #303857; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ff-items a:hover span{ height: 80px; opacity: 1; } .ff-items li img{ display: block; } .ff-items li{ margin: 0px; float: left; width: 188px; height: 148px; -webkit-transition: opacity 0.6s ease-in-out; -moz-transition: opacity 0.6s ease-in-out; -o-transition: opacity 0.6s ease-in-out; -ms-transition: opacity 0.6s ease-in-out; transition: opacity 0.6s ease-in-out; } .ff-container input.ff-selector-type-all:checked ~ .ff-items li,.ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,.ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,.ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3{ opacity: 1; } .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3){ opacity: 0.1; } .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1) span,.ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2) span,.ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3) span{ display:none; } </style> </head> <body> <div class="container"> <section class="ff-container"> <input id="select-type-all" name="radio-set-1" type="radio" class="ff-selector-type-all" checked="checked" /> <label for="select-type-all" class="ff-label-type-all">电影</label> <input id="select-type-1" name="radio-set-1" type="radio" class="ff-selector-type-1" /> <label for="select-type-1" class="ff-label-type-1">影院</label> <input id="select-type-2" name="radio-set-1" type="radio" class="ff-selector-type-2" /> <label for="select-type-2" class="ff-label-type-2">角色</label> <input id="select-type-3" name="radio-set-1" type="radio" class="ff-selector-type-3" /> <label for="select-type-3" class="ff-label-type-3">表演</label> </section> </div> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
原文链接:https://www.f2er.com/css/456813.html