整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果如圖：
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>純CSS3實現發光開關切換按鈕DEMO演示</title> <link rel="stylesheet" href="style.css" media="screen" type="text/css" /> </head> <body style="background-color: #1c1d1f;"> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> <iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe> </body> </html>
index2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Switch Button #3 - CodePen</title> <link rel="stylesheet" href="style.css" media="screen" type="text/css" /> </head> <body> <label class="button"><input type="checkbox"><span></span><span></span></input></label> <script src="js/index.js"></script> </body> </html>
style.css
*,
*:before,
*:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #1c1d1f;
}
.button {
display: block;
width: 400px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #000000;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.button span {
display: block;
position: absolute;
top: 6px;
width: 194px;
height: 108px;
background-color: #1c1d1f;
-webkit-transition: -webkit-transform 300ms ease, box-shadow 300ms ease;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.button span:before {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: "Open Sans";
font-weight: 800;
font-size: 48px;
-webkit-transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
transition: text-shadow 800ms ease 100ms, color 800ms ease 100ms;
}
.button span:after {
content: "";
width: 4px;
height: 108px;
position: absolute;
top: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, transparent 50%);
-webkit-transition: opacity 300ms ease;
transition: opacity 300ms ease;
}
.button span:first-of-type {
left: 6px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
-webkit-transform-style: preserve3d;
transform-style: preserve3d;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: perspective(2000px) rotateY(40deg);
transform: perspective(2000px) rotateY(40deg);
box-shadow: -1px 0 1px rgba(255, 255, 255, 0.1) inset, 4px 0 8px rgba(255, 255, 255, 0.1) inset, 1px 0 0 rgba(255, 255, 255, 0.1) inset, -10px 0 8px rgba(40, 42, 44, 0.9), -20px 0 8px rgba(28, 29, 31, 0.7), -30px 0 8px rgba(28, 29, 31, 0.4);
}
.button span:first-of-type:before {
content: "ON";
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button span:first-of-type:after {
left: -1px;
}
.button span:last-of-type {
right: 6px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
box-shadow: -1px 1px 1px rgba(255, 255, 255, 0.1) inset, 2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button span:last-of-type:before {
content: "OFF";
color: #ff4847;
text-shadow: 0 0 24px rgba(255, 72, 71, 0.6);
}
.button span:last-of-type:after {
right: -1px;
opacity: 0;
}
.button input[type="checkbox"] {
display: none;
}
.button input[type="checkbox"]:checked ~ span:first-of-type {
-webkit-transform: none;
-ms-transform: none;
transform: none;
box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1) inset, -2px 0 2px rgba(255, 255, 255, 0.05) inset;
}
.button input[type="checkbox"]:checked ~ span:first-of-type:before {
color: #93c913;
text-shadow: 0 0 24px rgba(147, 201, 19, 0.6);
}
.button input[type="checkbox"]:checked ~ span:first-of-type:after {
opacity: 0;
}
.button input[type="checkbox"]:checked ~ span:last-of-type {
-webkit-transform: perspective(2000px) rotateY(-40deg);
transform: perspective(2000px) rotateY(-40deg);
box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1) inset, -4px 0 8px rgba(255, 255, 255, 0.1) inset, -1px 0 0 rgba(255, 255, 255, 0.1) inset, 10px 0 8px rgba(40, 42, 44, 0.9), 20px 0 8px rgba(28, 29, 31, 0.7), 30px 0 8px rgba(28, 29, 31, 0.4);
}
.button input[type="checkbox"]:checked ~ span:last-of-type:before {
color: rgba(0, 0, 0, 0.5);
text-shadow: 1px 4px 6px #1c1d1f, 0 0 0 #000000, 1px 4px 6px #1c1d1f;
}
.button input[type="checkbox"]:checked ~ span:last-of-type:after {
opacity: 1;
}style.less
@background: #1C1D1F;
@button: #1C1D1F;
@light-on: #93C913;
@light-off: #FF4847;
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
*,
*:before,
*:after {
box-sizing: border-box
}
body {
background-color: @background;
}
.button {
display: block;
width: 400px;
height: 120px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: darken(@button, 50%);
box-shadow: 0 -1px 0 fade(white, 20%) inset;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: fade(black, 0%);
span {
display: block;
position: absolute;
top: 6px;
width: 194px;
height: 108px;
background-color: @button;
transition:
transform 300ms ease,
box-shadow 300ms ease;
&:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Open Sans";
font-weight: 800;
font-size: 48px;
transition:
text-shadow 800ms ease 100ms,
color 800ms ease 100ms;
}
&:after {
content: "";
width: 4px;
height: 108px;
position: absolute;
top: 0;
background: radial-gradient(ellipse at center, fade(white, 50%) 0%, transparent 50%);
transition: opacity 300ms ease;
}
&:first-of-type {
left: 6px;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
transform-style: preserve3d;
transform-origin: right center;
transform:
perspective(2000px)
rotateY(40deg);
box-shadow:
-1px 0 1px fade(white, 10%) inset,
4px 0 8px fade(white, 10%) inset,
1px 0 0 fade(white, 10%) inset,
-10px 0 8px fade(lighten(@button, 5%), 90%),
-20px 0 8px fade(@button, 70%),
-30px 0 8px fade(@button, 40%);
&:before {
content: "ON";
color: fade(black, 50%);
text-shadow:
1px 4px 6px @button,
0 0 0 black,
1px 4px 6px @button;
}
&:after {
left: -1px;
}
}
&:last-of-type {
right: 6px;
border-top-right-radius: 18px;
border-bottom-right-radius: 18px;
transform-origin: left center;
box-shadow:
-1px 1px 1px fade(white, 10%) inset,
2px 0 2px fade(white, 5%) inset;
&:before {
content: "OFF";
color: @light-off;
text-shadow: 0 0 24px fade(@light-off, 60%);
}
&:after {
right: -1px;
opacity: 0;
}
}
}
input[type="checkbox"] {
display: none;
&:checked ~ span {
&:first-of-type {
transform: none;
box-shadow:
1px 1px 1px fade(white, 10%) inset,
-2px 0 2px fade(white, 5%) inset;
&:before {
color: @light-on;
text-shadow: 0 0 24px fade(@light-on, 60%);
}
&:after {
opacity: 0;
}
}
&:last-of-type {
transform:
perspective(2000px)
rotateY(-40deg);
box-shadow:
1px 0 1px fade(white, 10%) inset,
-4px 0 8px fade(white, 10%) inset,
-1px 0 0 fade(white, 10%) inset,
10px 0 8px fade(lighten(@button, 5%), 90%),
20px 0 8px fade(@button, 70%),
30px 0 8px fade(@button, 40%);
&:before {
color: fade(black, 50%);
text-shadow:
1px 4px 6px @button,
0 0 0 #000,
1px 4px 6px @button;
}
&:after {
opacity: 1;
}
}
}
}
}內容轉至網絡，若侵權，聯系刪除
網頁設計工作中，我們可以給很多元素添加發光的動畫效果，舉幾個例子，“輸入框”、“文字”、“進度條”等。給這些元素加上的發光特效會讓整個網頁變得更加炫酷。今天陜西優就業小編就為大家搜集整理了8款炫酷的HTML發光動畫，這些都可以用作Web前端開發工作中，可以為你節省很多開發時間。
1.HTML5 Canvas五彩繽紛的3D發光水晶球動畫
這是一款基于HTML5 Canvas的超絢麗發光水晶球動畫，就像是酒吧里的那種水晶球射燈一樣，不停地隨機變換射出光線的顏色，給人一種非常動感的視覺效果。整個水晶球是在Canvas畫布上繪制而成，利用CSS3的相關特性使其能夠出現五彩繽紛的發光動畫，而且可以通過鼠標滾輪來放大縮小這個水晶球，不得不說HTML5真的是非常強大。
2.jQuery/CSS3實現漂亮字體發光特效
今天我們要來分享一款很酷的jQuery/CSS3文字發光特效，首先是加載了谷歌的公共字體庫，因此字體非常特別和漂亮，另外利用了jQuery和CSS3的相關特性，當鼠標滑過文字時，文字將會出現發光的動畫特效，非常漂亮。
3.超絢麗CSS3多色彩發光立方體旋轉動畫
之前我們分享過幾個不錯的CSS3立方體動畫，比如這款HTML5 3D立方體旋轉動畫和HTML5 3D立方體圖片切換動畫。今天要分享的也是一款基于CSS3的3D立方體旋轉動畫，不同的是，這款立方體的每一個面都有不同的色彩，并且會帶有絢麗的發光特效。
4.純CSS3實現發光開關切換按鈕
前段時間我們向大家分享過一款牛奶般剔透的CSS3 3D開關按鈕，效果相當贊。今天我們要來分享一款類似的純CSS3發光開關切換按鈕，它的外觀就像一個電燈的開關，可以左右切換。另外開關上的文字還有發光的特效，整體看上去很有立體感。
5.純CSS3和SVG鼠標滑過燈泡發光特效
這次要分享一款利用純CSS3和SVG實現的燈泡發光效果，我們只需要將鼠標滑過燈泡，整個燈泡就會出現發光發亮的動畫特效，效果相當逼真。CSS3的運用，讓燈泡外圍有一層淡淡的光暈。并且在燈光點亮和熄滅的時候有淡入淡出的效果。
6.HTML5 Canvas發光Loading動畫
之前我們分享過很多基于CSS3的Loading動畫效果，相信大家都很喜歡。今天我們要來分享一款基于HTML5 Canvas的發光Loading加載動畫特效。Loading旋轉圖標是在canvas畫布上繪制的，整個loading動畫是發光3D的視覺效果，HTML5非常強大。
7.CSS3發光Loading加載動畫
今天我們要分享一款與眾不同的CSS3 Loading動畫效果，它是由幾個不同的動畫效果組合而成的，像文字打印效果、發光效果、飛入飛出效果，這幾種效果都非常酷。另外我們可以再回顧一下其他的CSS3 Loading效果：HTML5 Canvas實現超酷Loading動畫、很有個性的CSS3彈跳Loading動畫。
8.純CSS3實現發光動畫按鈕特效
這是一款基于純CSS3的發光按鈕，按鈕發光的顏色是隨機的，這樣一排按鈕就顯得五彩繽紛，非常絢麗。之前我們也介紹過不少樣式很獨特的CSS3按鈕，比如純CSS3 3D開關按鈕、純CSS3實現動感彈性按鈕等，都非常不錯，也有HTML5動畫按鈕，大家可以自己看看。
陜西優就業：http://www.ujiuye.com/shaanxi/
IT學習交流：468910291
132個特效，是我歷時10個多月在油管一個一個跟著敲出來的，為了加強記憶，每個練習，我都錄制了視頻，在這里分享出來給大家。大家可能又會調侃了，你是工作不飽和吧，有時間做這些。其實，我目前工作還是挺飽和的，都是擠出來的。我們是9點上班，我基本7點半就到公司自學了，這樣我就有一個半小時的時間來做這些了。
對于 CSS 評價，無論是在論壇還是身邊的人，我聽到最多的是學 CSS 這些花里胡哨沒啥用，實際項目中又用不到。聽到這些心里還是挺實受挫的，有時候會懷疑自己，我學習的方向是不是錯了。但在幾次的項目需要用到一些特效，我都能很快的找到思路并做出來，我想這是得益于，我平時所學的這些特效積累出來的。
現在我不在困惑我所學的東西，因為學習成長是你自己事情，而不是別人在意的眼光。
對應的所有視頻可以到 【B站查看】，或者在 B 站搜索 前端小智 即可看到，源碼都在視頻簡介里面，大家進行查看。
效果：
視頻地址：https://www.bilibili.com/video/BV17V411r74q/
效果：
頻地址：https://www.bilibili.com/video/BV16Z4y1u7NY/
效果：
視頻地址：https://www.bilibili.com/video/BV1dK411J7p2/
效果：
視頻地址：https://www.bilibili.com/video/BV1bA411Y7UY/
演示視頻：https://www.bilibili.com/video/BV1Mh411Z7Ze/
演示視頻：https://www.bilibili.com/video/BV16f4y1X7Yr/
視頻地址：https://www.bilibili.com/video/BV14A411Y7Gd/
視頻地址：https://www.bilibili.com/video/BV1oD4y1U7C8/
視頻地址：https://www.bilibili.com/video/BV1vT4y157Up/
視頻地址：https://www.bilibili.com/video/BV1tf4y1979Z/
視頻地址：https://www.bilibili.com/video/BV1EV411U7fD/
視頻地址：https://www.bilibili.com/video/BV1sA411n7us/
視頻地址：https://www.bilibili.com/video/BV1eZ4y1K7o3/
視頻地址：https://www.bilibili.com/video/BV1tK4y1Y771/
視頻地址：https://www.bilibili.com/video/BV1V5411h7iZ/
視頻地址：https://www.bilibili.com/video/BV1Dh41197Lf/
視頻地址：https://www.bilibili.com/video/BV145411b7RJ/
視頻播放地址：https://www.bilibili.com/video/BV15D4y1m7JG/
視頻演示地址：https://www.bilibili.com/video/BV1Lf4y1X7Bm/
視頻地址：https://www.bilibili.com/video/BV1YA411n7xu/
視頻地址：https://www.bilibili.com/video/BV1vA411E77W/
視頻地址：https://www.bilibili.com/video/BV17T4y1A7Vg/
視頻地址：https://www.bilibili.com/video/BV1s5411b78Q/
視頻地址：https://www.bilibili.com/video/BV1KZ4y1N7nr/
視頻地址：https://www.bilibili.com/video/BV1Jf4y1D7Lm/
視頻地址：https://www.bilibili.com/video/BV17A411J7RL/
視頻地址：https://www.bilibili.com/video/BV1yv411C7NJ/
視頻地址：https://www.bilibili.com/video/BV1RV411m7LQ/
視頻地址：https://member.bilibili.com/v2#/upload-manager/article
視頻地址：https://www.bilibili.com/video/BV1LK411A7X2/
視頻地址：https://www.ixigua.com/6882247186009031181/
視頻地址：https://www.ixigua.com/6882247186009031181/
視頻地址：https://www.ixigua.com/6883784380632793611/
視頻地址：https://www.ixigua.com/6885309534483513859/
視頻地址：https://www.ixigua.com/6886389124811457032/
視頻地址：https://www.ixigua.com/6887878632572715532/
視頻地址：https://www.ixigua.com/6888608009556230667/
視頻地址：https://www.ixigua.com/6890835336868397572/
視頻地址：https://www.ixigua.com/6891580915374359043/
視頻地址：https://www.ixigua.com/6893066211257483784/
視頻地址：https://www.ixigua.com/6893808422605554183/
視頻地址：https://www.ixigua.com/6894533882432094728/
視頻地址：https://www.ixigua.com/6897449872975200780/
視頻地址：https://www.ixigua.com/6897450763094753800/
視頻地址：https://www.ixigua.com/6898262151455048199/
視頻地址：https://www.ixigua.com/6899588911862022660/
視頻地址：https://www.ixigua.com/6901230535520027143/
視頻地址：https://www.ixigua.com/6902344348986262024/
視頻地址：https://www.ixigua.com/6903449899006689804/
視頻地址：https://www.ixigua.com/6904504548409213454/
視頻地址：https://www.ixigua.com/6906066035506414084/
視頻地址：https://www.ixigua.com/6906796258489270788/
視頻地址：https://www.ixigua.com/6907873173098889731/?&wid_try=1
視頻地址: https://www.bilibili.com/video/BV1964y1f7CK/
視頻地址：https://www.ixigua.com/6910132650648797699/
視頻地址：https://www.ixigua.com/6911265897659400708/
視頻地址：https://www.ixigua.com/6911983867603878407/
視頻地址：https://www.ixigua.com/6914222592170263053/
視頻地址：https://www.ixigua.com/6914589524660224526/
視頻地址：https://www.ixigua.com/6915324225184072200/
視頻地址：https://www.ixigua.com/6916439319217603085/
視頻地址：https://www.ixigua.com/6917189337700368907/
視頻地址：https://www.ixigua.com/6917930699139842563
視頻地址：https://www.ixigua.com/6919046116382081540
完~，我是小智，我要去刷碗了，我們下期再見！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
