css网格grid布局悬浮动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css网格grid布局悬浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="flexgrid"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Baloo+Tamma'> <style> @charset "UTF-8"; /** * Make flexbox grids super easy! * --- * @param $cols — Number of columns * @param $margin — Margin with unit */ @media screen and (min-width: 600px) and (max-width: 799px) { .flexgrid .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .flexgrid .container:after { flex: auto; margin: 0 auto; content: ""; } .flexgrid .container > * { width: calc( 50% - 0.5rem ); margin-left: 0.5rem; margin-right: 0.5rem; } .flexgrid .container > *:nth-child(1) { margin-left: 0; } .flexgrid .container > *:nth-child(2n) { margin-right: 0; } .flexgrid .container > *:nth-child(2n+1) { margin-left: 0; } } @media screen and (min-width: 800px) and (max-width: 999px) { .flexgrid .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .flexgrid .container:after { flex: auto; margin: 0 auto; content: ""; } .flexgrid .container > * { width: calc( 33.3333333333% - 0.6666666667rem ); margin-left: 0.5rem; margin-right: 0.5rem; } .flexgrid .container > *:nth-child(1) { margin-left: 0; } .flexgrid .container > *:nth-child(3n) { margin-right: 0; } .flexgrid .container > *:nth-child(3n+1) { margin-left: 0; } } @media screen and (min-width: 1000px) { .flexgrid .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .flexgrid .container:after { flex: auto; margin: 0 auto; content: ""; } .flexgrid .container > * { width: calc( 25% - 0.75rem ); margin-left: 0.5rem; margin-right: 0.5rem; } .flexgrid .container > *:nth-child(1) { margin-left: 0; } .flexgrid .container > *:nth-child(4n) { margin-right: 0; } .flexgrid .container > *:nth-child(4n+1) { margin-left: 0; } } /* * Demo Styles */ .flexgrid { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "liga", "kern"; overflow-y: scroll; overflow-x: hidden; width: 100%; } .flexgrid *, .flexgrid *:before, .flexgrid *:after { box-sizing: border-box; } .flexgrid body { min-height: 100vh; font-family: "Baloo Tamma", cursive; text-align: center; text-transform: uppercase; line-height: 1; overflow: hidden; } .flexgrid .container { padding: 0 1rem; } .flexgrid .title { font-family: "Baloo Tamma", cursive; font-size: 300%; padding: 2rem 1rem; } .flexgrid .thing { color: #FEFEFE; font-size: 200%; padding: 2rem; display: flex; align-items: center; justify-content: center; min-height: 150px; margin-bottom: 1rem; cursor: pointer; box-shadow: 0 2.5px 5px rgba(25, 25, 25, 0.1); background: #1dd2af; background: linear-gradient(to bottom, #1dd2af, #17a689); } .flexgrid .thing:hover { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .flexgrid .thing:nth-child(1), .flexgrid .thing:nth-child(4), .flexgrid .thing:nth-child(7), .flexgrid .thing:nth-child(10) { background: #fed26a; background: linear-gradient(to bottom, #fed26a, #fec238); } .flexgrid .thing:nth-child(1):hover, .flexgrid .thing:nth-child(4):hover, .flexgrid .thing:nth-child(7):hover, .flexgrid .thing:nth-child(10):hover { -webkit-animation-name: bounce; animation-name: bounce; } .flexgrid .thing:nth-child(2), .flexgrid .thing:nth-child(5), .flexgrid .thing:nth-child(9), .flexgrid .thing:nth-child(14) { background: #7ad0ff; background: linear-gradient(to bottom, #7ad0ff, #47beff); } .flexgrid .thing:nth-child(2):hover, .flexgrid .thing:nth-child(5):hover, .flexgrid .thing:nth-child(9):hover, .flexgrid .thing:nth-child(14):hover { -webkit-animation-name: swing; animation-name: swing; } .flexgrid .thing:nth-child(3), .flexgrid .thing:nth-child(6), .flexgrid .thing:nth-child(12) { background: #df6974; background: linear-gradient(to bottom, #df6974, #d73f4e); } .flexgrid .thing:nth-child(3):hover, .flexgrid .thing:nth-child(6):hover, .flexgrid .thing:nth-child(12):hover { -webkit-animation-name: tada; animation-name: tada; } .flexgrid .emoji { font-size: 200%; transform: translateY(20%); } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0