JS+CSS 시 크 한 빛 효과 구현
효과 1:(나선형 몰입 시각 적 느낌)
효과 2:(소용돌이 식 원 관 시각 적 느낌)
구현 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<style>
html,body{
height: 100%;
overflow: hidden;
}
body{
background-color: #c08eaf;
}
.main{
/* */
width: 8px;
height: 8px;
/* background-color: aqua; */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
/*
* ，
* ： perspective 400px
* perspective 800px
*
*/
perspective: 800px;
}
.main i{
/* */
width: 8px;
height: 8px;
border-radius: 50%;
background:white;
box-shadow: 0 0 10px 0 white;
position: absolute;
/* */
animation: run 3s ease-in-out infinite;
}
/* .main i:nth-child(1){
transform: rotate(0deg) translateX(80px);
} */
/* */
@keyframes run{
0%{
opacity: 0;
}
10%{
opacity: 1;
}
100%{
opacity: 1;
/* 3D */
transform: translate3d(0,0,560px);
}
}
</style>
<body>
<div class="main" id="main">
</div>
</body>
<script type="text/javascript">
//
var m = document.getElementById("main");
for(var i = 0;i<60;i++){
//
var newNode = document.createElement("i");
//
m.appendChild(newNode)
// x
newNode.style.transform=`rotate(${i*12}deg) translateX(80px)`
//
newNode.style.animationDelay=`${i*0.05}s`
}
</script>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
