小さなイルミネーション特効html+css
効果:
実装:
1.ラベルを追加すると、liが電球であることがわかります.マルチポイントで、サイズを設定した後、ブラウザのデフォルトのビジュアル領域の幅を全体的に大きくすることができます.
<ul class="container">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
2.下箱を設置する.containerの基本スタイル:
.container{
margin-top: 10px;
width: 100%;
height: 120px;
white-space: nowrap;
overflow: hidden;
}
white-space: nowrap; サブエレメントliは改行せず、同じ行に並び続けます.overflow: hidden; オーバーフロー非表示
3.li電球のスタイルを設定する:
.container li{
display: inline-block;
margin-top: 30px;
margin-right: 50px;
width: 15px;
height: 30px;
border-radius: 50%;
position: relative;
}
display: inline-block; 行内ブロック要素に変換します.border-radius: 50%; 角弧度
4.ダブルダミークラスでランプキャップを設定する:
.container li::after{
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 12px;
background-color: rgb(27, 27, 27);
box-shadow: inset 0 0 3px rgb(129, 129, 129);
border-radius: 10px;
}
left: 50%; transform: translateX(-50%); 水平中央box-shadow:inset 0 0 0 3 px rgb(129,129,129);インナシャドウ
5.二重ダミーで電線を設置する:
.container li::before{
content: '';
position: absolute;
top: -23px;
left: 15px;
width: 55px;
height: 30px;
border-bottom: 3px solid rgb(61, 61, 61);
border-radius: 50%;
}
border-bottom: 3px solid rgb(61, 61, 61); border-radius: 50%; このように枠は月歯の形を呈することができる.
6.4つのアニメーション効果を設定し、それぞれ異なる色の点滅を表示します.
@keyframes lan{
0%,100%{
background-color: rgba(4, 255, 242, 0.5);
}
50%{
background-color: rgb(4, 255, 242);
box-shadow: 0 0 10px rgb(4, 255, 242),
0 0 30px rgb(4, 255, 242),
0 0 50px rgb(4, 255, 242);
}
}
@keyframes huang{
0%,100%{
background-color: rgba(251, 255, 4,.5);
}
50%{
background-color: rgb(251, 255, 4);
box-shadow: 0 0 10px rgb(251, 255, 4),
0 0 12px rgb(251, 255, 4),
0 0 30px rgb(251, 255, 4);
}
}
@keyframes lv{
0%,100%{
background-color: rgba(33, 255, 4,.5);
}
50%{
background-color: rgb(33, 255, 4);
box-shadow: 0 0 10px rgb(33, 255, 4),
0 0 12px rgb(33, 255, 4),
0 0 30px rgb(33, 255, 4);
}
}
@keyframes zhi{
0%,100%{
background-color: rgba(255, 4, 255,.5);
}
50%{
background-color: rgb(255, 4, 255);
box-shadow: 0 0 10px rgb(255, 4, 255),
0 0 25px rgb(255, 4, 255),
0 0 40px rgb(255, 4, 255);
}
}
box-shadow:シャドウ、追加すると発光に相当します.
7.異なる場所のliにアニメーション属性を追加するには:
.container li:nth-of-type(2n+1){
animation: lan 2s infinite;
}.container li:nth-child(2n+2){
animation: huang 2.2s infinite;
}.container li:nth-child(3n+3){
animation: zhi 1.8s infinite;
}
.container li:nth-child(4n+4){
animation: lv 2.8s infinite;
}
完全なコード:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(0, 0, 0);
}
.container{
margin-top: 10px;
width: 100%;
height: 120px;
white-space: nowrap;
overflow: hidden;
}
.container li{
display: inline-block;
margin-top: 30px;
margin-right: 50px;
width: 15px;
height: 30px;
border-radius: 50%;
position: relative;
}
.container li::after{
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 12px;
background-color: rgb(27, 27, 27);
box-shadow: inset 0 0 3px rgb(129, 129, 129);
border-radius: 10px;
}
.container li::before{
content: '';
position: absolute;
top: -23px;
left: 15px;
width: 55px;
height: 30px;
border-bottom: 3px solid rgb(61, 61, 61);
border-radius: 50%;
}
.container li:nth-of-type(2n+1){
animation: lan 2s infinite;
}.container li:nth-child(2n+2){
animation: huang 2.2s infinite;
}.container li:nth-child(3n+3){
animation: zhi 1.8s infinite;
}
.container li:nth-child(4n+4){
animation: lv 2.8s infinite;
}
@keyframes lan{
0%,100%{
background-color: rgba(4, 255, 242, 0.5);
}
50%{
background-color: rgb(4, 255, 242);
box-shadow: 0 0 10px rgb(4, 255, 242),
0 0 30px rgb(4, 255, 242),
0 0 50px rgb(4, 255, 242);
}
}
@keyframes huang{
0%,100%{
background-color: rgba(251, 255, 4,.5);
}
50%{
background-color: rgb(251, 255, 4);
box-shadow: 0 0 10px rgb(251, 255, 4),
0 0 12px rgb(251, 255, 4),
0 0 30px rgb(251, 255, 4);
}
}
@keyframes lv{
0%,100%{
background-color: rgba(33, 255, 4,.5);
}
50%{
background-color: rgb(33, 255, 4);
box-shadow: 0 0 10px rgb(33, 255, 4),
0 0 12px rgb(33, 255, 4),
0 0 30px rgb(33, 255, 4);
}
}
@keyframes zhi{
0%,100%{
background-color: rgba(255, 4, 255,.5);
}
50%{
background-color: rgb(255, 4, 255);
box-shadow: 0 0 10px rgb(255, 4, 255),
0 0 25px rgb(255, 4, 255),
0 0 40px rgb(255, 4, 255);
}
}
style>
head>
<body>
<ul class="container">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
body>
html>
まとめ:
実現は難しくないが、効果はなかなかいい.
その他の文章:炫彩流光文字html+css泡浮动背景特効html+css简约クロック特効html+css+js赛博朋克风格ボタンhtml+css仿网易云官网轮播図html+css+js水波ロードアニメーションhtml+cssナビゲーションバー転がりグラデーション効果html+css+js本ページをめくるhtml+css 3 D立体アルバムhtml+cssネオン絵画板効果html+css+js记いくつかcss属性まとめ(一)Sassまとめノート...