<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    51rgb-css3动画23-卡片排版&经过动画特效

                    分享 :

                    网盘下载链接:

                    提取密码: u4qi
                    复制提取密码
                    51RGB在线教育,WEB前端开发直播体验课,游戏风格手风琴特效制作!源码下载
                    • 详情
                      文件来源

                      官方发布

                      更新日期

                      2018-01-29

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      154次

                      源码,可以直接复制使用!

                      <!DOCTYPE html>
                      <html>
                      <head>
                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                          <title>Cards hover effect</title>
                      	<meta charset="utf-8" />
                          <link rel="stylesheet" href="cards.scss"/>
                          <style>
                              body{
                                  width:100%;
                                  height:100%;
                                  font-family: "Open Sans", "open-sans", sans-serif;
                                  letter-spacing:0.03em;
                                  line-height:1.6;
                                  color:#000;
                              }
                              .container{
                                  width:1090px;
                                  min-width:600px;
                                  height:430px;
                                  position:absolute;
                                  top:50%;
                                  left:50%;
                                  -webkit-transform:translate(-50%,-50%);/*图层居中,移动translate*/
                                  transform:translate(-50%,-50%);
                              }
                              .container .card{
                                  width:330px;
                                  height:430px;
                                  float:left;
                                  border-radius:8px;
                                  box-shadow:0 2px 2px rgba(0,0,0,.2);
                                  position:relative;
                                  overflow:hidden;
                                  top:0;
                                  text-align:center;
                                  -webkit-transition:all 0.25s;
                                  transition:all 0.25s;
                              }
                               .container .card:hover{
                                   top:-10px;
                                   box-shadow:0 12px 16px rgba(0,0,0,.2);
                               }
                               .container .card:nth-child(2){
                                   margin:0 50px;
                               }
                               .container .card h4{
                                   font-weight:600;
                               }
                               .container .card p{
                                   padding:0 1rem;
                                   font-size:16px;
                                   font-weight:300;
                               }
                               .container .card a{
                                   font-weight:500;
                                   text-decoration:none;
                                   color: #3498db;
                               }
                          </style>
                      </head>
                      <body>
                          <div class="container">
                              <div class="card">
                                  <img src="https://source.unsplash.com/category/nature/330x200">
                                  <h4>Nature</h4>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias facere.</p>
                                  <a href="#">Learn more</a>
                              </div>
                              <div class="card">
                                  <img src="https://source.unsplash.com/category/food/330x200">
                                  <h4>Food</h4>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias facere.</p>
                                  <a href="#">Learn more</a>
                              </div>
                              <div class="card">
                                  <img src="https://source.unsplash.com/category/buildings/330x200">
                                  <h4>Buildings</h4>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos molestias facere.</p>
                                  <a href="#">Learn more</a>
                              </div>
                          </div>
                      </body>
                      </html>
                      
                      
                      
                    • 使用说明

                      本节课视频资源:

                      课程在线回放地址:http://www.gonooa.com/video/page-29/305.html

                      关注微信公众号:网页设计自学平台 回复:【css3动画】关键字即可获取全套css3动画教程及源码

                    • 相关下载
                    北京赛车玩法和赔率|官网_首页