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>
开关
