CSS頁面效果_浮動幽靈

阿新 • • 發佈：2020-12-12

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { 

            margin: 0;
            padding: 0;
            background-color: #2c3a47;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .ghost {
            width: 140px;
            height: 160px;
            background- 
color: #f2f2f2;
            border-radius: 70px 70px 0 0;
            position: relative;
            cursor: pointer;
            animation: floating 2s infinite ease-in-out;
        }

        @keyframes floating {
            50% {
                transform: translateY(-60px);
            }
        }

        . 
face {
            width: 100px;
            position: absolute;
            top: 60px;
            left: calc(50% - 50px);
        }

        .eyes {
            height: 24px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 14px;
        }

        .eyes span {
            width: 24px;
            height: 24px;
            background-color: #2c3a47;
            border-radius: 50%;
            transition: .3s linear;
        }
        .meimao {
            height: 2px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 14px;
        }

        .meimao span{
            height: 8px;
            width: 20px;
            background-color: chocolate;
            border-radius: 50px 50px 0 0;
        }
        .ghost:hover .meimao span{
            height: 4px;
        }

        .ghost:hover .eyes span {
            height: 16px;
        }

        .mouth {
            width: 40px;
            height: 20px;
            background-color: #2c3a47;
            margin: auto;
            border-radius: 0 0 20px 20px;
            transition: .3s linear;
        }

        .ghost:hover .mouth {
            height: 12px;
        }

        .hands {
            width: 180px;
            position: absolute;
            left: -20px;
            top: 80px;
            display: flex;
            justify-content: space-between;
        }

        .hands span {
            width: 20px;
            height: 30px;
            background-color: #f2f2f2;
        }

        .hands span:first-child {
            border-radius: 20px 0 0 0;
        }

        .hands span:last-child {
            border-radius: 0 20px 0 0;
        }

        .feet {
            position: absolute;
            width: 100%;
            bottom: -20px;
            display: flex;
        }

        .feet span {
            flex: 1;
            height: 20px;
            background-color: #f2f2f2;
            border-radius: 0 0 20px 20px;
        }

        .feet span:first-child {
            border-radius: 0 0 20px 12px;
        }

        .feet span:last-child {
            border-radius: 0 0 10px 20px;
        }
    </style>
</head>

<body>
    <div class="ghost">
        <div class="face">
            <div class="meimao">
                <span></span><span></span>
            </div>
            <div class="eyes">
                <span></span><span></span>
            </div>
            <div class="mouth"></div>
        </div>
        <div class="hands">
            <span></span><span></span>
        </div>

        <div class="feet">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>

</html>

GIF效果如下:
在這裡插入圖片描述

CSS頁面效果_浮動幽靈

技術標籤：頁面設計csscss3html <!DOCTYPE html> <html lang="en"> <head>

css實現快速抖動效果_原生JS快速實現拖放（drag and drop）效果

技術標籤：css實現快速抖動效果拖放是很常見的一種互動效果，很多時候我們都會藉助於第三方的控制元件來實現，其實用原生js實現起來也非常的方便。接下來我們就用原生js和css快速實現這樣的拖放效果：

Vue實現手機掃描二維碼預覽頁面效果

本文例項為大家分享了Vue實現手機掃描二維碼預覽頁面的具體程式碼，供大家參考，具體內容如下

keep-Alive搭配vue-router實現快取頁面效果的示例程式碼

　　Vue工程中有些頁面需要有快取。這個功能通過keep-alive元件實現，keep-alive元件可以使被包含的元件保留狀態，或避免重新渲染。

css的clear清除浮動

清除前清除後程式碼 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\">

3.前端CSS—盒子模型和浮動

目錄一、CSS盒子模型1.1 content(內容區域)1.2 padding(內填充)1.3 border(邊框)1.4 margin(外邊距)二、塊級元素、行內元素和行內塊級元素的轉換關係2.1 display:inline 轉化為行內元素2.2 display:block 轉化為塊級

CSS元素水平方向浮動

CSSFloat(浮動) 什麼是 CSS Float（浮動）？ CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。

cardboard 效果_如何在iPhone上設定Google Cardboard

cardboard 效果 Want to see what this VR thing is about, but don’t want to plop down a bunch of cash? Google Cardboard is an insanely cheap way to try it out. And, despite being a Goog

CSS頁面元素

1.常用字型元素（1）font-style 用於規定斜體文字 normal - 文字正常顯示 italic - 文字斜體顯示

CSS——文字效果

我們這次，就來看一下文字效果。文字效果就是對文字的修飾啦。 text-indent 首行縮排的利器。我們可以通過設定text-indent來實現段落的首行縮排。

CSS盒子模型與浮動

技術標籤：筆記css CSS盒子模型與浮動 CSS盒子模型說明內邊距（padding）外邊距（margin）邊框（border）練習小三角製作聖誕樹製作

android 去掉水波紋效果_不鏽鋼界不一樣的煙火 | 不鏽鋼水波紋板，成家居熱潮...

技術標籤：android 去掉水波紋效果 “水波紋板”顧名思義表面紋理類似水波盪漾，裝飾性極強

html border陰影效果_CSS | 6 種 css 邊框效果

技術標籤：html border陰影效果wpf border圓角邊框注 |本文轉載來源：見本文底部腳註CSS 邊框效果[1]

order by 臨時表沒有效果_如何讓前端程式設計師沒有後端也能完成專案?

技術標籤：order by 臨時表沒有效果答：Backend as a Database, Sort Of 直接把 Mysql 暴露在公網給前端使用會有什麼問題：

h5 手風琴效果_小程式-實現摺疊面板-手風琴效果

技術標籤：h5 手風琴效果背景無論是在小程式還是 h5 網頁,摺疊選單,手風琴是一個非常常見的效果,如今也有很多現成的 UI 元件庫已經實現了這一效果的,但有時候在寫原生小程式時,單單就是一個摺疊選單效果,卻要

css頁面佈局

Css頁面佈局：　　一：頭部區域：

CSS 內容總結(三)浮動

CSS 內容總結 1.浮動 2.常見網頁佈局 3.清除浮動 4.PS切圖 5.學成線上案例 1.浮動 1.1傳統網頁佈局的三種方式網頁佈局的本質——用CSS來擺放盒子到相應位置

vue寫數字翻牌效果_封裝vue版數字翻牌器

技術標籤：vue寫數字翻牌效果 {{item2}} js部分 export default {props:{number:Number},data(){return{list:[],numList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8,

react 獲取頁面寬度_【譯】用 React 和 D3 建立圖表

技術標籤：react 獲取頁面寬度本文翻譯自：https://dzone.com/articles/charts-with-modern-react-and-d3

第175天學習打卡（專案穀粒商城17 API三級分類刪除頁面效果邏輯刪除）

商品服務 API 三級分類刪除頁面效果元件 | Element category.vue <template> <el-tree:data=\"menus\":props=\"defaultProps\":expand-on-click-node=\"false\"show-checkboxnode-key=\"catId\" &

CSS頁面效果_浮動幽靈

相關推薦