-
666
找到
3
篇与
css
相关的结果
-
六种好看的css按钮效果 演示html代码<div class="col"> <div class="container-1"> <div class="btn btn-one"> <span>BUTTON ONE</span> </div> </div> <div class="container-2"> <div class="btn btn-two"> <span>IDLE</span> </div> </div> <div class="container-3"> <div class="btn btn-three"> <span>BUTTON THREE</span> </div> </div> </div> <div class="col"> <div class="container-4"> <div class="btn btn-four"> <span>BUTTON FOUR</span> </div> </div> <div class="container-5"> <div class="btn btn-five"> <span>BUTTON FIVE</span> </div> </div> <div class="container-6"> <div class="btn btn-six"> <span>BUTTON SIX</span> </div> </div> </div>css代码 <style> html, body { height: 100%; width: 100%; margin: 0; display: flex; flex-direction: column; flex-wrap: wrap; font-family: 'Open Sans Condensed', sans-serif; } .col { height: 100%; } div[class*=container] { text-align: center; width: 100%; height: 33%; display: flex; justify-content: center; align-items: center; } .container-1 { background: #333; } .container-2 { background: #4E598C; } .container-3 { background: #8499B1; } .container-4 { background: #9888A5; } .container-5 { background: #7B6D8D; } .container-6 { background: #565554; } /* BUTTON STYLING */ .btn { position: relative; color: white; width: 256px; height: 64px; line-height: 64px; transition: all 0.3s; } .btn span { transition: all 0.3s; tranform: scale(1, 1); } .btn::before, .btn::after { content: ''; position: absolute; transition: all 0.3s; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .btn-one::before { left: 4px; z-index: 1; opacity: 0; background: rgba(255, 255, 255, 0.1); transform: scale(0.1, 1); } .btn-one:hover::before { opacity: 1; transform: scale(1, 1); } .btn-one::after { transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); } .btn-one:hover::after { transform: scale(1, 0.1); opacity: 0; } /* BTN TWO */ .btn-two::before, .btn-two::after { content: ''; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; z-index: 1; transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); } .btn-two:hover::after { animation-name: rotatecw; animation-duration: 2s; } .btn-two:hover::before { animation-name: rotateccw; animation-duration: 3s; } .btn-two:hover::after, .btn-two:hover::before { left: 96px; width: 64px; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotatecw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotateccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } /* BTN THREE */ .btn-three::before { opacity: 0; background: rgba(255, 255, 255, 0.1); transform: scale(1, 0.1); } .btn-three:hover::before { opacity: 1; transform: scale(1, 1); } .btn-three::after { transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); } .btn-three:hover::after { transform: scale(1, 0.1); opacity: 0; } /* BTN FOUR */ .btn-four:hover span { transform: scale(1.2, 1.2); } .btn-four::before { opacity: 0; background: rgba(255, 255, 255, 0.1); transform: scale(0.1, 0.1); } .btn-four:hover::before { opacity: 1; transform: scale(1, 1); } .btn-four::after { transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); } .btn-four:hover::after { transform: scale(0, 0); opacity: 0; } /* BTN FIVE */ .btn-five::before { transition: transform 0.15s, 0.15s border-radius 0.15s; opacity: 0; background: rgba(255, 255, 255, 0.1); transform: scale(0.1, 0.1); border-radius: 50%; } .btn-five:hover::before { opacity: 1; transform: scale(1, 1); border-radius: 0; } .btn-five::after { transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.3); } .btn-five:hover::after { opacity: 0; } /* BTN SIX */ .btn-six::before { opacity: 0; background: rgba(255, 255, 255, 0.1); transform: scale(1.3, 1.3); } .btn-six:hover::before { opacity: 1; transform: scale(1, 1); } .btn-six::after { transition: all 0.3s; border: 1px solid rgba(255, 255, 255, 0.5); } .btn-six:hover::after { transform: scale(0, 0); opacity: 0; } </style> -
animation实现轮播图 第一步定义html结构<div class="imgs"> <img src="./imgs/204071.jpg" alt=""> <img src="./imgs/493016.png" alt=""> <img src="./imgs/810967.jpg" alt=""> <img src="./imgs/974914.png" alt=""> <img src="./imgs/974921.png" alt=""> </div>第二部定义css样式<style> @keyframes bannerMove { 0% { opacity: 0; z-index: 2; } 5% { opacity: 1; z-index: 2; } 20% { opacity: 1; z-index: 2; } 25% { opacity: 1; z-index: 0; } 50% { opacity: 0; z-index: 0; } 100% { opacity: 0; z-index: 0; } } .imgs { position: relative; left: 25%; transition: opacity 0.5s ease 0s; } .imgs>img { position: absolute; width: 800px; height: 450px; margin: auto; animation-name: bannerMove; animation-duration: 20s; animation-timing-function: step-end; animation-iteration-count: infinite; } .imgs>img:nth-of-type(2) { animation-delay: 4s; } .imgs>img:nth-of-type(3) { animation-delay: 8s; } .imgs>img:nth-of-type(4) { animation-delay: 12s; } .imgs>img:nth-of-type(5) { animation-delay: 16s; } </style>第三，实现效果如下图:
-
css居中的几种方式 1 固定宽高元素水平垂直居中通过margin平移元素整体宽度的一半，使元素水平垂直居中。</head> <style> .box1{ border: solid 3px; width: 400px; height: 200px; position: relative; } .img1{ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; } </style> </head> <body> <div class="box1"> <img class="img1" src="t1.png" alt=""> </div> </body>2 未知宽高元素水平垂直居中利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。.img1{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }3 利用flex布局利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。.box1{ display: flex; justify-content: center; align-items: center; }4 利用grid布局利用grid实现水平垂直居中，兼容性较差，不推荐。.box1{ display: flex; place-items: center; }5.边距布局可以设置上下左右边距为0实现元素居中.img1{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
