修改头像效果

gensisboss · Oct 7, 2023 · 7bc5b31 · 7bc5b31
1 parent 0f35d6f
commit 7bc5b31
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 35 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -4375,18 +4375,29 @@ textarea.form-control.is-invalid {
     z-index: 4
 }
 
-.cloud{
+.image-holder {
+    perspective: 1000px;
+    transform-style: preserve-3d;
+}
+
+.image-holder img {
+    transform: rotateY(0);
+    transform-style: preserve-3d;
+}
+
+
+.cloud {
     position: relative;
     width: 320px;
     top: 10px;
     height: 100px;
     background-color: #fff;
     border-radius: 100px;
     z-index: -100;
-    filter: drop-shadow(0,0,35px #fff);
+    filter: drop-shadow(0, 0, 35px #fff);
 }
 
-.cloud::before{
+.cloud::before {
     content: '';
     position: absolute;
     top: -50px;
@@ -4398,49 +4409,51 @@ textarea.form-control.is-invalid {
     box-shadow: 90px 0 0 30px #fff;
 }
 
-.text{
+.text {
     position: absolute;
     top: 100px;
     height: 20px;
     line-height: 20px;
     text-transform: uppercase;
-    color:#eab308;
+    color: #eab308;
     text-shadow: 0 0 5px #eab308,
-    0 0 15px #eab308,
-    0 0 30px #eab308;
+        0 0 15px #eab308,
+        0 0 30px #eab308;
     transform-origin: bottom;
     animation: animation-cloud 2s linear forwards;
 }
 
-@keyframes animation-cloud
-{
-    0%{
+@keyframes animation-cloud {
+    0% {
         transform: translateY(0) scale(1);
     }
-    70%{
+
+    70% {
         transform: translateY(100px) scale(1);
     }
-    100%{
+
+    100% {
         transform: translateY(100px) scale(1);
     }
 }
 
 
-.my-animation-contact{
+.my-animation-contact {
     animation: animation-contact 1s linear forwards;
 }
 
-@keyframes animation-contact
-{
-    0%{
+@keyframes animation-contact {
+    0% {
         transform: scale(1);
     }
-    80%{
+
+    80% {
         transform: scale(1.2);
     }
-    100%{
+
+    100% {
         transform: scale(1);
-      }
+    }
 
 
 }

diff --git a/assets/js/index.js b/assets/js/index.js
@@ -44,6 +44,17 @@ function rain() {
 }
 
 
+function transformElement(x, y,element) {
+   let multiple = 10;
+   let box = element.getBoundingClientRect();
+   let calcX = -(y - box.y - (box.height / 2)) / multiple;
+   let calcY = (x - box.x - (box.width / 2)) / multiple;
+
+   element.style.transform = "rotateX(" + calcX + "deg) "
+       + "rotateY(" + calcY + "deg)";
+}
+
+
 
 
 window.addEventListener('scroll', function () {

diff --git a/index.html b/index.html
@@ -77,13 +77,24 @@ <h1 class="mt-4 mb-4 display-3 fw-semibold">龚港浩</h1>
                     <!--col-->
                     <div class="col-xl-4 offset-xl-3 col-md-5 offset-md-1 col-lg-5 offset-lg-0  col-12">
                         <!--image-->
-                        <div class="position-relative">
-                            <img src="./assets/images/img-1.jpg" alt="about"
-                                class="img-fluid  position-relative z-1 rounded-4 ms-lg-n5 ms-md-n3">
-                            <div class="position-absolute top-0 mt-1 ">
-                                <img src="./assets/images/square.svg" alt="square"
-                                    class="img-fluid w-100 d-none d-lg-block d-md-block">
-                            </div>
+                        <div class="position-relative image-holder">
+                            <img id="image-holder" src="./assets/images/img-1.jpg" alt="about"
+                                class="img-fluid position-relative z-1 rounded-4 ms-lg-n5 ms-md-n3">
+                            <script>
+                                const mouseOverContainer = document.getElementsByClassName("image-holder")[0];
+                                const element = document.getElementById("image-holder");
+
+                                mouseOverContainer.addEventListener('mousemove', (e) => {
+                                    window.requestAnimationFrame(function () {
+                                        transformElement(e.clientX, e.clientY,element);
+                                    });
+                                });
+                                mouseOverContainer.addEventListener('mouseleave', (e) => {
+                                    window.requestAnimationFrame(function () {
+                                        element.style.transform = "rotateX(0) rotateY(0)";
+                                    });
+                                });
+                            </script>
                         </div>
 
                     </div>
@@ -100,13 +111,13 @@ <h1 class="mt-4 mb-4 display-3 fw-semibold">龚港浩</h1>
                 <div class="row d-flex align-items-center">
                     <div class="col-xl-4  col-md-6 col-lg-6 col-12">
                         <div class="p-3 mb-5 mb-md-0">
-                                <div class="cloud"></div>
-                                <script>
-                                    setInterval(() => {
-                                        rain();
-                                    }, 50);
-                                </script>
-                            </div>
+                            <div class="cloud"></div>
+                            <script>
+                                setInterval(() => {
+                                    rain();
+                                }, 50);
+                            </script>
+                        </div>
                     </div>
                     <!--col-->
                     <div class="col-xl-6 offset-xl-1  col-md-5 offset-md-1 col-lg-5 offset-lg-1 col-12">
@@ -222,7 +233,8 @@ <h3 class="mb-3">后端</h3>
                                     <h3 class="mb-3">算法</h3>
 
                                     <p class="mb-0">
-                                       LeetCode解题超过500道，熟练掌握常用数据结构和算法，具备较强的逻辑思考和代码实现能力。具备深度学习、机器学习理论知识，有一定的数学基础。解决问题能力强，讲究团队协作 </p>
+                                        LeetCode解题超过500道，熟练掌握常用数据结构和算法，具备较强的逻辑思考和代码实现能力。具备深度学习、机器学习理论知识，有一定的数学基础。解决问题能力强，讲究团队协作
+                                    </p>
                                 </div>
                             </div>
                         </div>
@@ -434,7 +446,8 @@ <h5 class="">
                                 <h5>
                                     <span class="fw-bold text-primary">Blog:</span>
                                 </h5>
-                                <a href="https://blog.csdn.net/gghhb12?type=blog"  target="_blank" class="'mb-0 ms-3">https://blog.csdn.net/gghhb12?type=blog</a>
+                                <a href="https://blog.csdn.net/gghhb12?type=blog" target="_blank"
+                                    class="'mb-0 ms-3">https://blog.csdn.net/gghhb12?type=blog</a>
                             </div>
                         </div>
                     </div>