<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8" /> ???<title>login</title> ???<style type="text/css" media="screen"> ???????/* 公用样式 */ ???????body{ ???????????margin:0; ???????????height: 0; ???????????background-color: #F1F1F1; ???????} ???????.warp{ ???????????width: 250px; ???????????height: 150px; ???????????background-color: #5e7c87; ???????????float:left; ???????????margin:15px 15px; ???????????box-shadow: 10px 10px 5px #888888; ???????} ???????.sim-button{ ???????????line-height: 50px; ???????????height: 50px; ???????????text-align: center; ???????????margin-right: auto; ???????????margin-left: auto; ???????????margin-top: 50px; ???????????width: 60%; ???????????cursor: pointer; ???????????color: rgba(255,255,255,1); ???????????border: 1px solid rgba(255,255,255,0.5); ???????} ???????/* 效果六 */ ???????.button6{ ???????????border:none; ???????????position: relative; ???????} ???????.button6::before{ ???????????content: ‘‘; ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????????width: 100%; ???????????height: 100%; ???????????background-color: rgba(255,255,255,0.5); ???????????????????transition: all 0.5s ; ???????} ???????.button6:hover::before{ ???????????opacity:0; ???????????????????transform: scale(0.5,0.5); ???????} ???????.button6::after{ ???????????content:‘‘; ???????????width:100%; ???????????height:100%; ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????????opacity:0; ???????????border: 1px solid rgba(255,255,255,0.5); ???????????????????transform: scale(1.2,1.2); ???????????????????transition: all 0.5s ; ???????} ???????.button6:hover::after{ ???????????opacity:1; ???????????-webkit-transform: scale(1,1); ???????????????????transform: scale(1,1); ???????} ???????/* 效果七 27*/ ???????.button7{ ???????????border: 1px solid rgba(255,255,255,0.5); ???????????????????transition: all 0.5s ; ???????????overflow:hidden; ???????????position: relative; ???????} ???????.button7:hover{ ???????????border: 1px solid rgba(255,255,255,0); ???????} ???????.button7::before{ ???????????content: ‘‘; ???????????position: absolute; ???????????left: 0; ???????????bottom: 0; ???????????width: 100%; ???????????height: 1px; ???????????background-color: rgba(255,255,255,0.5); ???????????????????transform: translate(-100%, -600%) ?rotate(9deg); ???????????????????transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); ???????????????????transition: all 0.5s ; ???????} ???????.button7:hover::before{ ????????????????????transform: translate(0,0); ???????} ???????/* 效果八 */ ???????.button8{ ???????????color:rgba(255,255,255,1); ???????????border:none; ???????????position: relative; ???????} ???????.button8:hover>span{ ???????????letter-spacing: 2px; ???????} ???????.button8::before{ ???????????content:‘‘; ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????????width: 100%; ???????????height: 100%; ???????????z-index: 1; ???????????opacity: 0; ???????????????????transition: all 0.3s; ???????????border-top-width: 1px; ???????????border-bottom-width: 1px; ???????????border-top-style: solid; ???????????border-bottom-style: solid; ???????????border-top-color: rgba(255,255,255,0.5); ???????????border-bottom-color: rgba(255,255,255,0.5); ???????????????????transform: scale(0.1, 1); ???????} ???????.button8:hover::before{ ???????????opacity: 1; ???????????????????transform: scale(1, 1); ???????} ???????.button8::after{ ???????????content: ‘‘; ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????????width: 100%; ???????????height:100%; ???????????z-index:1; ???????????background-color: rgba(255,255,255,0.25); ???????????????????transition: all 0.3s; ???????} ???????.button8:hover::after{ ???????????opacity:0; ???????????-webkit-transform: scale(0.1, 1); ???????????????????transform: scale(0.1, 1); ???????} ???????/* 效果九 */ ???????.button9{ ???????????color: rgba(255,255,255,1); ???????????border:none; ???????????position: relative; ???????????border-top-width: 1px; ???????????border-bottom-width: 1px; ???????????border-top-style: solid; ???????????border-bottom-style: solid; ???????????border-top-color: rgba(255,255,255,0.5); ???????????border-bottom-color: rgba(255,255,255,0.5); ???????????-webkit-transition: all 0.3s; ???????????????????transition: all 0.3s; ???????} ???????.button9:hover span{ ???????????letter-spacing: 2px; ???????} ???????.button9:hover{ ???????????border-top-color: rgba(255,255,255,0); ???????????border-bottom-color: rgba(255,255,255,0); ???????} ???????.button9::before{ ???????????content: ‘‘; ???????????position: absolute; ???????????top: 0; ???????????right: 0; ???????????width: 1px; ???????????height: 100%; ???????????z-index: 1; ???????????????????transition: all 0.3s; ???????????background-color: rgba(255,255,255,0.5); ???????} ???????.button9:hover::before{ ???????????????????transform: translate(-76px,0) rotate(270deg); ???????} ???????.button9::after{ ???????????content: ‘‘; ???????????position: absolute; ???????????top: 0; ???????????left: 0; ???????????width: 1px; ???????????height: 100%; ???????????z-index: 1; ???????????????????transition: all 0.3s; ???????????background-color: rgba(255,255,255,0.5); ???????} ???????.button9:hover::after{ ???????????????????transform: translate(76px,0) rotate(180deg); ???????} ???????.button10{ ???????????-webkit-transition: all 0.3s; ???????????????????transition: all 0.3s; ???????} ???????.button10:hover{ ???????????????????animation-name: move; ???????????????????animation-duration: 1s; ???????????????????animation-fill-mode: both; ???????????background-color: rgba(255,255,255,0.2); ???????} ???????@-webkit-keyframes move { ?????????from, 11.1%, to { ???????????-webkit-transform: none; ???????????transform: none; ?????????} ?????????22.2% { ???????????????????transform: skewX(-12.5deg) skewY(-12.5deg); ?????????} ?????????33.3% { ???????????????????transform: skewX(6.25deg) skewY(6.25deg); ?????????} ?????????44.4% { ???????????????????transform: skewX(-3.125deg) skewY(-3.125deg); ?????????} ?????????55.5% { ???????????????????transform: skewX(1.5625deg) skewY(1.5625deg); ?????????} ?????????66.6% { ???????????????????transform: skewX(-0.78125deg) skewY(-0.78125deg); ?????????} ?????????77.7% { ???????????????????transform: skewX(0.390625deg) skewY(0.390625deg); ?????????} ?????????88.8% { ???????????????????transform: skewX(-0.1953125deg) skewY(-0.1953125deg); ?????????} ???????} ???????@keyframes move { ?????????from, 11.1%, to { ???????????????????transform: none; ?????????} ?????????22.2% { ???????????????????transform: skewX(-12.5deg) skewY(-12.5deg); ?????????} ?????????33.3% { ???????????????????transform: skewX(6.25deg) skewY(6.25deg); ?????????} ?????????44.4% { ???????????????????transform: skewX(-3.125deg) skewY(-3.125deg); ?????????} ?????????55.5% { ???????????????????transform: skewX(1.5625deg) skewY(1.5625deg); ?????????} ?????????66.6% { ???????????????????transform: skewX(-0.78125deg) skewY(-0.78125deg); ?????????} ?????????77.7% { ???????????????????transform: skewX(0.390625deg) skewY(0.390625deg); ?????????} ?????????88.8% { ???????????????????transform: skewX(-0.1953125deg) skewY(-0.1953125deg); ?????????} ???????} ???</style></head><body> ???<div class="warp"> ???????<div class="sim-button button6"> ???????????<span>login6</span> ???????</div> ???</div> ???<div class="warp"> ???????<div class="sim-button button7"> ???????????<span>login7</span> ???????</div> ???</div> ???<div class="warp"> ???????<div class="sim-button button8"> ???????????<span>login8</span> ???????</div> ???</div> ???<div class="warp"> ???????<div class="sim-button button9"> ???????????<span>login9</span> ???????</div> ???</div> ???<div class="warp"> ???????<div class="sim-button button10"> ???????????<span>login10</span> ???????</div> ???</div></body></html>
翻滚闪烁，CSS特效
原文地址：https://www.cnblogs.com/mhxy13867806343/p/8447176.html