https://www.qdfuns.com/article/40816/35da9b3519e18e90a0004d03bb7a29a5.html
开关
<!DOCTYPE html><html class=''> <head> <style class="cp-pen-styles"> * { margin: 0px; padding: 0px; } body { background-color: #415062; } input[type="checkbox"] { position: absolute; top: 50%; left: 50%; margin: 0; margin-top: -40px; margin-left: -80px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75); transition: all 0.5s cubic-bezier(0.85, 0.1, 0.05, 0.75); width: 80px; height: 80px; outline: 40px solid #fff; outline-offset: -40px; box-shadow: 0 0 0 4px #dfdfdf, 80px 0 0 4px #dfdfdf, 0 0 0 4px #dfdfdf, 80px 0 0 4px #dfdfdf; } input[type="checkbox"]:checked { -webkit-transform: translateX(100%); transform: translateX(100%); outline-color: #5d6aba; box-shadow: 0 0 0 4px #dfdfdf, -80px 0 0 4px #dfdfdf, -80px 0 0 4px #dfdfdf, 0 0 0 4px #dfdfdf; } input[type="checkbox"]:checked+.backgroundAnimation { background-color: #baad5d; } .backgroundAnimation { width: 100vw; height: 100vh; -webkit-transition: background-color 0.5s ease; transition: background-color 0.5s ease; } </style> </head> <body> <input type="checkbox" /> <!-- option--> <div class="backgroundAnimation"></div> </body></html>
菜单悬停效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS菜单悬停效果</title> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; padding: 0; margin: 0; } body, html { width: 100%; height: 100%; background: #222; font-family: 'Varela Round', sans-serif; } nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 600px; height: 100%; margin: 0 auto; } nav a { text-decoration: none; font-size: 25px; color: #ddd; position: relative; margin-bottom: 50px; -webkit-transition: all .2s; transition: all .2s; overflow: hidden; } nav a:hover { color: #fff; } nav a:last-child { margin-bottom: 0px; } nav a::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: #eb2141; z-index: 99; -webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.4s cubic-bezier(0.7, 0, 0.3, 1); } nav a:hover::before { left: 100%; } nav a::after { content: ""; position: absolute; top: 50%; margin-top: -2px; left: 100%; width: 100%; height: 4px; background: #eb2141; -webkit-transition: all .3s; transition: all .3s; -webkit-transition-delay: .4s; transition-delay: .4s; } nav a:hover::after { left: 0%; } </style> </head> <body translate="no"> <!--是否要翻译--> <nav> <a href="#!"> <span>HOME</span> </a> <a href="#!"> <span>ABOUT</span> </a> <a href="#!"> <span>CONTACT</span> </a> <a href="#!"> <span>FAQ</span> </a> </nav> </body></html>
load
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="google" value="notranslate"> <title>CSS3loading加载进度页面</title> <style> .page { padding: 40px; } html, body { height: 100%; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; } body { background: #fff } #splash { background: #cc1f2f; background-repeat: repeat-y; position: fixed; left: 0; top: 0; width: 100%; height: 100%; animation: splash 3s ease-in; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } #loader { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); } #loader:after { content: ''; position: absolute; left: 50%; margin-left: -8px; bottom: -170px; width: 3px; background: #fff; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); height: 200px; } #loader:before { content: ''; position: absolute; left: 50%; margin-left: 8px; bottom: -190px; width: 3px; background: #000; background: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 0) 100%); height: 200px; } #splash .anim { height: 100%; position: absolute; left: 50%; width: 100px; transform: translate(-50%, 100%); animation: loader 4s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } @keyframes loader { 0% { transform: translate(-50%, 110%); } 30% { transform: translate(-50%, 50%); } 100% { transform: translate(-50%, 0%); } } @keyframes splash { 0% { transform: translate(0%, 0%); } 50% { transform: translate(0%, 0%); } 100% { transform: translate(0%, -100%); } } </style> </head> <body> <div class="page"> <header> <h1>Welcome</h1> <p>Just a test for a loading information. Press reload to repeat.</p> </header> </div> <div id="splash"> <div class="anim"> <div id="loader"> <svg version="1.1" width="60px" height="70px" viewBox="0 0 60 70"> <defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> </defs> <g id="airplane"> <path fill="#000" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541 h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004 c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017 c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004 c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03 C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(44,0) rotate(90 0 0)" /> </g> <g id="shadow" transform="scale(.9)"> <path fill="#000" fill-opacity="0.3" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541 h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004 c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017 c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004 c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03 C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(64,30) rotate(90 0 0)" filter="url(#f1)" /> </g> </svg> </div> </div> </div> </body></html>
开关
文章转载于:https://www.jianshu.com/p/c2a840512c07
原著是一个有趣的人,若有侵权,请通知删除
评论前必须登录!
立即登录