頁面旋轉動畫效果

来源:https://www.cnblogs.com/mirayi/archive/2018/04/23/8917533.html
-Advertisement-
Play Games

Document ...


<!-- http://183.131.17.231:6663/s1 -->
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .click3DBarMapContainer{width:1060px;height:680px;position:relative}.click3DBarMapContainer .titleContainer{position:absolute;left:89px;top:26px;z-index:999}.click3DBarMapContainer .titleContainer .topTitle{font-size:17px;font-weight:700;color:#22c1ff}.click3DBarMapContainer .titleContainer .unitTitle{font-size:12px;color:#22c1ff}.click3DBarMapContainer .bgContainer{width:100%;height:100%;position:absolute;z-index:100;pointer-events:none;background:url(/40edb2f4e9916b835401daa702be35f5.png) 100% 0 no-repeat}.click3DBarMapContainer .shadowContainer{width:991px;height:508px;position:absolute;right:3px;top:11px;z-index:10;pointer-events:none;box-shadow:inset 0 30px 60px 0 #010101,inset 0 -30px 60px 0 #010101}.click3DBarMapContainer #mapmap{width:991px;height:519px;position:absolute;right:3px;top:5px;z-index:1;transform-style:preserve-3d;transform:rotateX(15deg)}.click3DBarMapContainer #mapmap .layerPath{transform:translateY(6px)}.click3DBarMapContainer .rightBarContainer{position:absolute;right:50px;top:46px;z-index:1000}.click3DBarMapContainer .detailContainer{position:absolute;right:0;bottom:39px;z-index:100;pointer-events:none}.click3DBarMapContainer .imgContainer{width:600px;height:600px;position:absolute;left:-135px;bottom:-125px;z-index:999;pointer-events:none}.click3DBarMapContainer .imgContainer #innerHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);animation:innerHalo1 7s linear infinite}.click3DBarMapContainer .imgContainer #midHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(480deg);animation:midHalo 10s linear infinite}.click3DBarMapContainer .imgContainer #outerHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(0deg);animation:innerHalo1 10s linear infinite}.click3DBarMapContainer .imgContainer #innerCircle,.click3DBarMapContainer .imgContainer #outCircle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(480deg);animation:midHalo 10s linear infinite}.click3DBarMapContainer .animationBar{width:240px;height:4px;position:absolute;right:41px;bottom:226px;z-index:1000}.click3DBarMapContainer .animationBar .timeBar{height:4px;position:absolute;background:#2cebff}.click3DBarMapContainer .animationBar #timeBar1{left:0;width:240px;opacity:.2}.click3DBarMapContainer .animationBar #timeBar2{left:141px;width:20px;opacity:.4;animation:timeBar2 5s linear infinite}.click3DBarMapContainer .animationBar #timeBar3{left:66px;width:40px;opacity:.4;animation:timeBar3 10s linear infinite}.click3DBarMapContainer .animationBar #timeBar4{left:11px;width:15px;opacity:.6;animation:timeBar4 7s linear infinite}.click3DBarMapContainer .animationBar #timeBar5{left:111px;width:15px;opacity:.8;animation:timeBar5 5s linear infinite}.click3DBarMapContainer .animationBar #timeBar6{left:67px;width:27px;opacity:1;animation:timeBar6 3s linear infinite}.click3DBarMapContainer .timetime{position:absolute;right:41px;bottom:200px;z-index:1000}@-moz-keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@-webkit-keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@-o-keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@keyframes timeBar2{0%{left:141px}45%{left:2px}85%{left:200px}to{left:141px}}@-moz-keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@-webkit-keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@-o-keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@keyframes timeBar3{0%{left:36px}10%{left:0}60%{left:199px}to{left:36px}}@-moz-keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@-webkit-keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@-o-keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@keyframes timeBar4{0%{left:11px}10%{left:2px}60%{left:188px}to{left:11px}}@-moz-keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@-webkit-keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@-o-keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@keyframes timeBar5{0%{left:111px}30%{left:0}75%{left:223px}to{left:111px}}@-moz-keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@-webkit-keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@-o-keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@keyframes timeBar6{0%{left:60px}20%{left:2px}60%{left:181px}to{left:60px}}@-moz-keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@-webkit-keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@-o-keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes innerHalo1{to{transform:translate(-50%,-50%) rotate(1turn)}}@-moz-keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}@-webkit-keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}@-o-keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}@keyframes midHalo{to{transform:translate(-50%,-50%) rotate(120deg)}}
    </style>
    <style type="text/css">
    .imgContainer #innerHalo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        animation: innerHalo1 7s linear infinite;
    }
    .imgContainer #midHalo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(480deg);
    animation: midHalo 10s linear infinite;
}
.imgContainer #outerHalo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(0deg);
    animation: innerHalo1 10s linear infinite;
}
.imgContainer #innerCircle, .imgContainer #outCircle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(480deg);
    animation: midHalo 10s linear infinite;
}
    </style>

    <body>
    	<div id="click3DBarMapContainer">
	        <div class="imgContainer"><img alt="circle" id="innerHalo" src="142f3f3db93cdd3bb0cb34316ed12100.png">
	        <img alt="circle" id="midHalo" src="a26d07438f49fe2f24b8c1a315a44c5c.png">
	        <img alt="circle" id="outerHalo" src="55a7f2a0301bbd233926a23bfbdbf616.png">
	        <img alt="circle" id="innerCircle" src="b55e4a23cd08505579e5daa872cac22a.png">
	        <img alt="circle" id="outCircle" src="8869771be9b1ddfda8ac29744901651c.png">
	        </div>
        </div>
    </body>

</html>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 小程式--剖析小程式上傳文件
    前言 小程式開發的過程中，如果你涉及到文件的上傳，就需要使用微信提供的API去上傳文件： 官方文檔的解釋這裡就不多介紹了，主要看一下這個方法具體如何使用以及為什麼這樣使用。 正文 我們可以先看一下該API的參數說明： 其實wx.uploadFile的操作是你把要請求的數據以及要請求的伺服器URL傳遞 ...
  • 表單驗證如何定位到未填的選項
    我們在做數據提交的時候經常用到表單驗證，如果遇到表單元素有沒填的選項，一般都會禁止表單提交 如果表單需要驗證的數據比較多，有些必填的欄位為空 提交不了 但是沒有定位到未填項的位置 導致用戶懵逼 不知道為什麼提交不了 這個時候，我們可以給未填的表單項加foucs() 例如上圖的代碼，這樣游標就可以定位 ...
  • 前端性能優化整理
    0. 瀏覽器渲染原理： 1. 瀏覽器宿主環境層面： 2. 網路層面： 3. 代碼層面： ...
  • JavaScript原型與原型鏈
    原型鏈是js面向對象的基礎，非常重要。 一，創建對象的幾種方法： 1，字面量 var o1 = { name:'o1' }; 2，構造函數 var M = function(name){ this.name = name; }; var o2 = new M('o2'); var a = {} 其實 ...
  • 小程式--小程式開發過程中遇到的問題以及解決方案
    1.模板名片發送後不顯示內容？（如第一張圖） 經過查看官方文檔，是data數據格式問題，小程式端傳給後端的data數據被服務端解析出了一點問題（data裡面的字元串加入了"\"）。現在後端將數據從新做了清洗。已解決。解決後的展示如第二張圖。 2.上傳圖片一直失敗。 解決答案相關鏈接：https:// ...
  • (轉載)柯里化函數應用
    概述 理解柯里化函數，需要有閉包的基礎，只有徹底理解閉包後才能理解柯里化，如果尚未理解閉包，建議閱讀上文js引擎的執行過程（一）；如果理解了閉包再研究柯里化函數，則會大大的加深你對閉包理解，並且更清楚的認識到閉包的應用場景，那麼如果在面試時候問到閉包，你就可以侃侃而談了；並且理解柯里化函數會在很大的 ...
  • 執行環境及作用域、變數對象、作用域鏈、閉包
    當代碼在執行環境中執行時，會創建一個作用域鏈。作用域鏈本質是一個指向變數對象的指針列表。 如果執行環境是函數，則將其活動對象（最開始時只包含一個變數->argument對象）作為變數對象。ps:argument對象在全局環境中是不存在的. （基於2條件下）作用域鏈中的下一個變數對象來自外部環境，而再 ...
  • (轉載)js引擎的執行過程（一）
    概述 js是一種非常靈活的語言，理解js引擎的執行過程對我們學習javascript非常重要，但是網上講解js引擎的文章也大多是淺嘗輒止或者只局部分析，例如只分析事件迴圈（Event Loop）或者變數提升等等，並沒有全面深入的分析其中過程。所以我一直想把js執行的詳細過程整理成一個較為詳細的知識體 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類