整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
終效果如下圖，廢話不多說了，有廢話的時間都能寫3行代碼了。
原生JS+CSS3，不需要jQuery庫。
一、css部分
<style>
.carousel {padding: 20px;margin-top: -60px;-webkit-perspective: 500px;perspective: 500px;overflow: hidden;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-align: center;-ms-flex-align: center;align-items: center;}
.carousel > * {-webkit-box-flex: 0;-ms-flex: 0 0 auto;flex: 0 0 auto;}
.carousel figure {margin: 0;width: 40%;-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transition: -webkit-transform 0.5s;transition: -webkit-transform 0.5s;transition: transform 0.5s;transition: transform 0.5s, -webkit-transform 0.5s;}
.carousel figure img {width: 100%;box-sizing: border-box;padding: 0 0px;}
.carousel figure img:not(:first-of-type) {position: absolute;left: 0;top: 0;}
.carousel nav {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
.carousel nav .prev{position: absolute;width: 38px;height: 70px;left: 22%;top: 42%;background: url(./img/prev.png);}
.carousel nav .next{position: absolute;width: 38px;height: 70px;right: 22%;top: 42%;background: url(./img/next.png);}
</style>
二、HTML部分
<div class="carousel" data-gap="80">
<figure>
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
</figure>
<nav>
<button class="nav prev"></button>
<button class="nav next"></button>
</nav>
</div>
三、JS部分
<script>
window.addEventListener('load', function () {
var carousels = document.querySelectorAll('.carousel');
for (var i = 0; i < carousels.length; i++) {
carousel(carousels[i]);
}
});
function carousel(root) {
var figure = root.querySelector('figure'),
nav = root.querySelector('nav'),
img = figure.children,
n = img.length,
gap = root.dataset.gap || 0,
bfc = 'bfc' in root.dataset,
theta = 2 * Math.PI / n,
currImage = 0;
setupCarousel(n, parseFloat(getComputedStyle(img[0]).width));
window.addEventListener('resize', function () {
setupCarousel(n, parseFloat(getComputedStyle(img[0]).width));
});
setupNavigation();
function setupCarousel(n, s) {
var apothem = s / (2 * Math.tan(Math.PI / n));
figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';
for (var i = 0; i < n; i++) {
img[i].style.padding = gap + 'px';
}for (i = 1; i < n; i++) {
img[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
img[i].style.transform = 'rotateY(' + i * theta + 'rad)';
}
if (bfc) for (i = 0; i < n; i++) {
img[i].style.backfaceVisibility = 'hidden';
}rotateCarousel(currImage);
}
function setupNavigation() {
nav.addEventListener('click', onClick, true);
function onClick(e) {
e.stopPropagation();
var t = e.target;
if (t.tagName.toUpperCase() != 'BUTTON') return;
if (t.classList.contains('next')) {
currImage++;
} else {
currImage--;
}
rotateCarousel(currImage);
}
}
function rotateCarousel(imageIndex) {
figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
}
}
</script>
好了，本例子到此結束，要是有用到的，直接復制。希望各位能分享出去，讓需要的人發現。
喜歡的可以關注哦。
載說明：原創不易，未經授權，謝絕任何形式的轉載
俗話說得好，興趣是最好的老師。本篇文章搜集了幾個漂亮的宇宙風格按鈕動畫效果的代碼，希望它們能夠激發你對 CSS 的熱愛。作為前端開發者，我們不僅僅是制作寫頁面和與 后端 API 打交道，偶爾也需要調味劑。廢話不多說，讓我們一起來解讀這些 CSS 代碼吧。
HTML部分
<button class="btn" type="button">
<strong>SPACE</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
<div id="glow">
<div class="circle"></div>
<div class="circle"></div>
</div>
</button>
CSS部分
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 13rem;
height: 3rem;
background-size: 300% 300%;
backdrop-filter: blur(1rem);
border-radius: 5rem;
transition: 0.5s;
animation: gradient_301 5s ease infinite;
border: double 4px transparent;
background-image: linear-gradient(#212121, #212121), linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
background-origin: border-box;
background-clip: content-box, border-box;
}
#container-stars {
position: fixed;
z-index: -1;
width: 100%;
height: 100%;
overflow: hidden;
transition: 0.5s;
backdrop-filter: blur(1rem);
border-radius: 5rem;
}
strong {
z-index: 2;
font-family: 'Avalors Personal Use';
font-size: 12px;
letter-spacing: 5px;
color: #FFFFFF;
text-shadow: 0 0 4px white;
}
#glow {
position: absolute;
display: flex;
width: 12rem;
}
.circle {
width: 100%;
height: 30px;
filter: blur(2rem);
animation: pulse_3011 4s infinite;
z-index: -1;
}
.circle:nth-of-type(1) {
background: rgba(254, 83, 186, 0.636);
}
.circle:nth-of-type(2) {
background: rgba(142, 81, 234, 0.704);
}
.btn:hover #container-stars {
z-index: 1;
background-color: #212121;
}
.btn:hover {
transform: scale(1.1)
}
.btn:active {
border: double 4px #FE53BB;
background-origin: border-box;
background-clip: content-box, border-box;
animation: none;
}
.btn:active .circle {
background: #FE53BB;
}
#stars {
position: relative;
background: transparent;
width: 200rem;
height: 200rem;
}
#stars::after {
content: "";
position: absolute;
top: -10rem;
left: -100rem;
width: 100%;
height: 100%;
animation: animStarRotate 90s linear infinite;
}
#stars::after {
background-image: radial-gradient(#ffffff 1px, transparent 1%);
background-size: 50px 50px;
}
#stars::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 170%;
height: 500%;
animation: animStar 60s linear infinite;
}
#stars::before {
background-image: radial-gradient(#ffffff 1px, transparent 1%);
background-size: 50px 50px;
opacity: 0.5;
}
@keyframes animStar {
from {
transform: translateY(0);
}
to {
transform: translateY(-135rem);
}
}
@keyframes animStarRotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0);
}
}
@keyframes gradient_301 {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes pulse_3011 {
0% {
transform: scale(0.75);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(0.75);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}代碼解釋
@keyframes pulse_3011
這個動畫定義了一個名為“pulse_3011”的關鍵幀動畫。在該動畫中，元素從開始狀態縮小到0.75倍，同時有一個0.7不透明度的黑色陰影。在動畫執行的70％處，元素擴大到原始大小，同時黑色陰影消失。最終，元素再次縮小到0.75倍，而黑色陰影再次消失。該動畫無限重復。
stars::before 和 stars::after 相關的代碼是實現星星循環動畫的關鍵，設置了背景為一個由白色和透明顏色交替組成的徑向漸變色，這樣就形成了一些閃閃發光的小星星。通過 animation 屬性設置了動畫效果，其中 animStar 是一個移動動畫，設置了 60s 的動畫時間，并且使用 linear 動畫函數，使得小星星以勻速向上移動的方式出現在屏幕上，并且使用 infinite 讓其循環播放。這樣就形成了一些往上移動的小星星，從而實現了整個星空的動態效果。
HTML部分
<button>
<div id="moon" class="state"> Moony</div>
<div id="sun" class="state">Sunny</div>
<span class="border border1"></span>
<span class="border border2"></span>
</button>CSS部分
button {
--sunGradient: linear-gradient(to right, #fa709a 0%, #fee140 100%);
--moonGradient: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 85px;
height: 85px;
color: white;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
border-radius: 70px;
background-color: transparent;
transition: 0.09s;
box-shadow: 0 20px 30px black;
overflow: hidden;
}
button:hover {
transform: rotate(360deg);
}
button:active {
transform: rotate(360deg) scale(1.2);
box-shadow: -15px -15px 500px white,inset 0 0 5px black, 0px -15px 20px white;
}
.state {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-radius: inherit;
width: 90%;
height: 90%;
border: 4px groove black;
}
#sun {
display: none;
transition: 2s;
background: var(--sunGradient);
}
#moon {
background: var(--moonGradient);
}
button:hover #sun {
display: flex;
}
button:active #moon {
display: none;
}
.border {
position: absolute;
transition: 0.4s;
z-index: -1;
border-radius: inherit;
background: var(--moonGradient);
}
button:hover .border {
background: var(--sunGradient);
}
.border1 {
width: 45px;
height: 100px;
animation: 1s linear reverse infinite rotation_91;
}
.border2 {
width: 200px;
height: 35px;
animation: 3s linear reverse infinite rotation_91;
}
@keyframes rotation_91 {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}代碼解釋：
這段代碼實現了一個狀態切換的動畫按鈕效果，它包含兩個狀態：一個是太陽狀態，另一個是月亮狀態。當鼠標懸停在按鈕上時，太陽狀態會出現，月亮狀態會消失。當用戶點擊按鈕時，按鈕會放大并旋轉，并且太陽狀態會替換成月亮狀態，月亮狀態則替換成太陽狀態。
具體實現的邏輯如下：
HTML部分：
CSS部分：
HTML部分
<button>
Button
</button>CSS部分：
button {
position: relative;
padding: 18px 55px;
font-size: 15px;
font-weight: bold;
color: #fff;
background: linear-gradient(87deg, #6d67e4, #7743db, #4e31aa, #6d67e4, #6d67e4);
background-size: 600% 600%;
border: 3px solid #7743db;
border-radius: 8px;
/* filter: drop-shadow(0 0 4px #9F73AB); */
box-shadow: inset 0 0 10px 1px #7743db, 0 0 10px 5px #7743db;
cursor: pointer;
transition: all 0.5s;
animation: GradientAnimation 25s ease infinite;
}
button::after {
content: "";
position: absolute;
width: 202px;
height: 54px;
top: 0;
left: -17px;
border: 5px solid #453c67;
border-width: 0 2px 4px 0;
border-radius: 100%;
filter: drop-shadow(0px 0px 6px rgba(78, 49, 180, 1));
transform: rotate(-30deg);
animation: LinerAfter 15s ease infinite;
}
button::before {
content: "";
position: absolute;
width: 200px;
height: 50px;
top: 0;
left: -20px;
border: 5px solid #6d67e4;
border-width: 0 12px 8px 4px;
border-radius: 100%;
filter: drop-shadow(0px 0px 6px rgba(109, 103, 228, 1));
/* box-shadow: inset 0 0 10px 1px #4E31AA, 0 0 10px 5px #4E31AA; */
transform: rotate(-30deg);
transition: all 0.5s;
animation: LinerBefore 15s ease infinite;
}
@keyframes GradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes LinerAfter {
0% {
left: -27px;
height: 54px;
}
50% {
left: -7px;
height: 37px;
}
100% {
left: -27px;
height: 54px;
}
}
@keyframes LinerBefore {
0% {
left: -30px;
height: 50px;
}
50% {
left: -10px;
height: 33px;
}
100% {
left: -30px;
height: 50px;
}
}
代碼解釋：
CSS代碼設置了按鈕的樣式，包括位置、內邊距、字體大小、加粗程度、顏色、背景、邊框、圓角、光標形狀、過渡效果、動畫等。其中background屬性使用了線性漸變，border屬性設置了3px寬度的實線邊框，border-radius屬性設置了8px的圓角。box-shadow屬性設置了兩個陰影效果，一個是內陰影，另一個是外陰影。button::after和button::before是button的偽元素，分別表示按鈕前面和后面的圓圈。這兩個圓圈都是絕對定位，大小、位置、邊框、圓角等屬性不同，但都使用了drop-shadow濾鏡和rotate旋轉變換效果。動畫效果分別由GradientAnimation、LinerAfter和LinerBefore三個關鍵幀動畫控制，分別設置了不同的屬性變化規則，實現了按鈕和圓圈的不同的動態效果。
今天的內容就分享到這里，太多了就不利于我們去理解，雖然就三個案例，但是需要我們去慢慢消化和理解，才能成為自己的知識，建議大家還是親自實現下上述的按鈕動畫效果，這些案例雖然我們在平常的工作中很少用到，但是如果你接到酷炫的項目，比如某品牌的宣傳站點時，我相信這些效果還是能派上用場的。
如果你喜歡這樣的文章，請點贊支持下，后續我會持續分享這類的內容，如果太少，我會覺得大家不太喜歡這樣的文章，我只能自己私藏了，最后別忘記關注「前端達人」，你的支持將是我分享最大的動力，后續我會持續輸出更多內容，敬請期待。
點擊顯示和隱藏按鈕分別控制圖片的顯示和隱藏。
框架繪制，顯示按鈕、隱藏按鈕、div標簽：
<input type="button" value="顯示" id="btn1">
<input type="button" value="隱藏" id="btn2">
<div id="box"></div>添加樣式：按鈕居中，div設置寬高和背景圖片，display:block; 代表顯示圖片；display:none; 代表顯示圖片。
<style>
body{
text-align: center;
}
input{
margin: 10px;
}
#box{
height: 400px;
width: 500px;
background: url(./images/001.jpg) no-repeat;
background-size: cover;
margin: auto;
display: block;
}
</style>獲取對象：
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let box = document.getElementById("box");當按鈕點擊切換顯示狀態：
console.log(box.style.display, typeof(box.style.display));
btn1.onclick = function(){
box.style.display = "block";
}
btn2.onclick = function(){
console.log(box.style.display, typeof(box.style.display));
box.style.display = "none";
}按下UP向上跳躍：
按下DOWN落地：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
