css3可以说是前端的脸面了，要想页面美，特效必须六。本文将会举几个栗子。本文的例子 看得上
直接拿走，不谢。
1.样式实现 进度条
<style>
main {
width: 100%;
padding: 80px 0px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.progress-outer {
width: 60%; height: 12px;
border-radius: 8px;
overflow: hidden;
position: relative;
}
.progress-enter {
height: inherit;
background: rgba(180, 160, 120, .2);
}
.progress-bg {
width: 60%; height: inherit;
border-radius: 6px;
background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
#D9CFBB 0, #D9CFBB 75%, #C3B393 0);
background-size: 16px 16px;
animation: panoramic 20s linear infinite;
}
@keyframes panoramic{
to {
background-position: 200% 0;
}
}
</style>
<template>
<main>
<div class="progress-outer"> <!--better extension-->
<div class="progress-enter">
<div class="progress-bg"></div>
</div>
<!-- <span>60%</span> -->
</div>
</main>
</template>
<script>
</script>
process.jpg
2.样式实现单项选择按钮样式
<style>
main {
width: 100%;
padding: 60px 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
user-select: none;
font: 14px / 1 Helvetica, sans-serif;
}
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
input[type="radio"] + label {
display: inline-block;
height: 12px;
line-height: 12px;
/* 小写英文开头 */
/* line-height: 10px; */
cursor: pointer;
position: relative;
user-select: none;
}
input[type="radio"] + label:not(:nth-of-type(6)) {
margin-top: 29px;
margin-bottom: 29px;
}
input[type="radio"]:disabled + label {
cursor: not-allowed;
color: #999;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 10px; height: 10px;
border-radius: 8px;
vertical-align: top;
margin-right: .2em;
border: 1px solid #ccc;
background-color: #fff;
transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
input[type="radio"]:not(:disabled) + label:hover::before {
border-color: #b4a078;
}
input[type="radio"]:checked + label::before {
border-color: #b4a078 !important;
background-color: #b4a078;
}
input[type="radio"] + label::after {
content: "";
display: inline-block;
width: 4px; height: 4px;
background-color: #fff;
border-radius: 4px;
position: absolute;
left: 4px; top: 50%;
transform: translateY(-50%) scale(0);
transition: transform .2s ease-in-out;
}
input[type="radio"]:checked + label::after {
transform: translateY(-50%) scale(1);
transition: transform .2s ease-in-out;
}
input[type="radio"]:disabled + label::before,
input[type="radio"]:disabled.checked + label::before {
background-color: #f2f2f2;
}
input[type="radio"]:disabled.checked + label::after {
border-color: #ccc;
background-color: #ccc;
transform: translateY(-50%) scale(1);
}
</style>
<template>
<main>
<input type="radio" id="radio0" name="radio">
<label for="radio0">Vue</label>
<input type="radio" id="radio1" name="radio" checked>
<label for="radio1">React</label>
<input type="radio" id="radio3" name="radio">
<label for="radio3">Angular</label>
<input type="radio" id="radio4" name="radio" disabled>
<label for="radio4">disable</label>
<input type="radio" id="radio5" name="radio" disabled class="checked">
<label for="radio5">check disable</label>
</main>
</template>
<script>
</script>
radio.jpg
3.css手写开关
<style>
main {
width: 100%;
padding: 60px 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
user-select: none;
font: 12px / 1 Helvetica, sans-serif;
}
label {
position: relative;
width: 48px;
height: 20px;
background: lightgrey;
border-radius: 10px;
cursor: pointer;
transition: background .3s;
}
label[disabled] {
cursor: not-allowed;
opacity: .5;
}
label::before,
label::after {
transition: all .3s;
position: absolute;
}
label::before {
content: 'OFF';
top: 4px;
left: 21px;
color: white;
transform: scale(.7);
font-weight: 700;
}
label::after {
content: '';
top: 1px;
left: 1px;
width: 18px;
height: 18px;
border-radius: 9px;
background: white;
}
input[type="checkbox"]:checked + label {
background: #b4a078;
}
input[type="checkbox"]:checked + label::before {
content: 'ON';
left: 6px;
}
input[type="checkbox"]:active + label::after {
width: 23px;
}
input[type="checkbox"]:checked + label::after {
left: 29px;
}
input[type="checkbox"]:checked:active + label::after {
left: 24px;
}
</style>
<template>
<main>
<input type="checkbox" id="switch" checked hidden>
<label for="switch"></label>
<input type="checkbox" id="switch-disabled" disabled hidden>
<label for="switch-disabled" disabled></label>
<input type="checkbox" id="switch-checked-disabled" checked disabled hidden>
<label for="switch-checked-disabled" disabled></label>
</main>
</template>
<script>
</script>
close.jpg
4.选中弹出 提示框
<style>
main {
width: 100%; height: 229px;
display: flex;
}
label {
margin: auto;
}
input {
display: block;
width: 229px;
padding: .8em;
outline: none;
border: 1px solid #e3e3e3;
border-radius: 2px;
}
input:focus,
input:hover {
border-color: #b4a078;
}
input:not(:placeholder-shown) {
border-color: #be4141;
box-shadow: 0 0 0 2px rgba(255, 100, 97, 0.2);
}
input:not(:placeholder-shown) + .poptip {
color: #be4141;
}
input:valid {
border-color: #b4a078;
box-shadow: 0 0 0 2px rgba(180, 160, 120, 0.2);
}
input:valid + .poptip {
color: unset;
}
input:not(:focus) + .poptip {
transform: scale(0);
animation: elastic-dec .25s;
}
input:focus + .poptip {
transform: scale(1);
animation: elastic-grow .45s;
}
.poptip {
display: inline-block;
width: 236px;
font-size: 13px;
padding: .6em;
background: #fafafa;
position: relative;
margin-left: -3px;
margin-top: 3px;
border-radius: 3px;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, .23456));
transform-origin: 15px -6px;
}
.poptip::before {
content: "";
position: absolute;
top: -6px; left: 10px;
border: 9px solid transparent;
border-bottom-color: #fafafa;
border-top-width: 0;
}
@keyframes elastic-grow {
from {
transform: scale(0);
}
70% {
transform: scale(1.1);
animation-timing-function: cubic-bezier(.1, .25, .1, .25);
}
}
@keyframes elastic-dec {
from {
transform: scale(1);
}
to {
transform: scale(0);
animation-timing-function: cubic-bezier(.25, .1, .25, .1);
}
}
</style>
<template>
<main class="main">
<label>
<input
required
type="text"
id="username"
autocomplete="off"
placeholder="Please input something"
pattern="^\w+$"/>
<span class="poptip">Only letters, numbers, and underscore combinations are supported!</span>
</label>
</main>
</template>
<script>
</script>
showtips.jpg
5.圆形旋转效果
<style>
main {
width: 100%; height: 529px;
display: flex;
flex-direction: column;
align-items: center;
}
.path {
width: 300px; height: 300px;
border-radius: 50%;
margin: 100px auto;
position: relative;
display: flex;
border: 1px solid #b4a078;
}
.logo {
width: 52px;
margin: auto;
background: #FFF;
}
.avatar {
width: 50px;
position: absolute;
top: 124px; left: 124px;
animation: circular-smooth-spin 7.5s infinite linear;
animation-play-state: running;
}
.avatar > span {
font-weight: 500;
position: absolute;
white-space: nowrap;
top: -50%; left: 50%;
padding: 3px 12px;
opacity: 0;
transform: scale(0);
transition: opacity, transform .8s;
transform-origin: 0 bottom;
}
.avatar > img {
width: inherit;
border-radius: 50%;
overflow: hidden;
}
.path:hover .avatar {
animation-play-state: paused;
}
.path:hover .avatar > span {
opacity: 1;
transform: scale(1);
transition: opacity, transform .8s;
}
.avatar:nth-of-type(2){
animation-delay: -1.5s;
}
.avatar:nth-of-type(3){
animation-delay: -3s;
}
.avatar:nth-of-type(4){
animation-delay: -4.5s;
}
.avatar:nth-of-type(5){
animation-delay: -6s;
}
@keyframes circular-smooth-spin {
from {
transform: rotate(0turn) translateY(-124px) rotate(1turn)
}
to {
opacity: 1;
transform: rotate(1turn) translateY(-124px) rotate(0turn)
}
}
</style>
<template>
<main class="main">
<div class="path">
<img class="logo" src="./static/vue-logo.png" />
<div class="avatar">
<span>Evan You</span>
<img src="./static/Evan.jpeg"/>
</div>
<div class="avatar">
<span>Damian Dulisz</span>
<img src="./static/Dulisz.jpeg"/>
</div>
<div class="avatar">
<span>defcc</span>
<img src="./static/defcc.png"/>
</div>
<div class="avatar">
<span>Edd Yerburgh</span>
<img src="./static/Yerburgh.png"/>
</div>
<div class="avatar">
<span>Sarah Drasner</span>
<img src="./static/Drasner.jpeg"/>
</div>
</div>
</main>
</template>
<script>
</script>
yuan.jpg
参考文献：https://lhammer.cn/You-need-to-know-css/#/circular-smooth
网友评论