2. 程式人生 > >CSS3之線條特效（滑鼠懸停線條從中間變長）

CSS3之線條特效（滑鼠懸停線條從中間變長）

阿新 • • 發佈：2019-01-24

這裡寫圖片描述

當滑鼠懸停在紅色圓上時，福字下面出現一條白色的線條從中間不斷向兩邊延伸

這裡寫圖片描述

<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta
 
 name="Description" content="">
            <title>Document</title>
            <style>
                #wrap{
                    width:500px;
                    height:500px;
                    border-radius:50%;
                    background-color:#E4393C;
                    margin
 
:100px auto;
                    position:relative;
                }
                #wrap:befor{
                    content:"";
                    display:table;
                }
                p.good{
                    float:left;
                    font-size:168px;
                    font-family
 
:"楷體";
                    color:#fff;
                    margin:148px 0 0 166px;
                }
                #line{
                    width:0px;
                    height:5px;
                    border-radius:5px;
                    background-color:#fff;
                    margin:0 auto;
                    position:absolute;
                    top:338px;
                    left:0px;
                    right:0px;
                    transition:width 1s linear;
                }
                #wrap:hover #line{
                    width:200px;
                }
            </style>
     </head>
     <body>
        <div id="wrap">
            <p class="good">福</p>
            <div id="line"></div>
        </div>
     </body>
</html>

相關推薦

CSS3之線條特效（滑鼠懸停線條從中間變長）

當滑鼠懸停在紅色圓上時，福字下面出現一條白色的線條從中間不斷向兩邊延伸 <!doctype html> <html> <head>

jquery實現圖片向左慢慢輪播（滑鼠懸停圖片停止輪播版）

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

Css3基於 box-shadow的滑鼠懸停

.fill:hover, .fill:focus { box-shadow: inset 0 0 0 2em var(--hover); } .pulse:hover, .pulse:focus { -webkit-animation: pu

JS特效：滑鼠懸停顯示提示

<script language="JavaScript"> function showtip2(current,e,text) { if (document.readyState=="complete") {<!--如果是ie瀏覽器並且滿足readyst

基於css3的3D立方體旋轉特效 （先translate與先rotate的不同）

3D變換基於幾個比較重要的屬性，perspective,translateZ,preserve-3d; 格式： 舞臺(perspective) 容器(3D, preserve-3d) 內容 3D實現立方體盒子： transform的4

Linux運維之道之admin1.4（權限和歸屬，LADP認證）

達內 linux 運維admin admin1.4權限和歸屬：基本權限：基本權限的類別：訪問方式（權限）：---讀取：允許查看內容--read （r權限：能夠ls瀏覽此目錄內容）---寫入：允許修改內容--write （w權限：能夠執行rm/mv/cp/mkdir/touch等更

QT之圓形頭像（使用PNG的Mask達到的效果）

led asp mage gravity details fill text sca ima 廢話不多說!直接上代碼。 我們在很多UI設計應用中，需要用到自定義形狀頭像，在這裏，我對圓形頭像的設計做簡單的闡述，其它形狀頭像可參考本文做相應的更改即可。如下圖所

保研之路------塵埃落定（復旦，同濟，北郵）

自我介紹：本科南京郵電大學貝爾英才學院 保研院校：碩士北京郵電大學網路研究院 不知不覺已經大四了， 就在今天的下午我確認了北郵的擬錄取通知，其實我的內心還是有些失落和不甘的。看到同學有去清華，北大、浙大、同濟，覺得很羨慕。我也總結一下自己保研的一些遺憾和後悔吧。 首先：保研之前我就

Unity全景圖片加全景視訊播放（滑鼠控制視角方向自由預覽）

最近也是週末做了一個全景圖片加視訊，滑鼠控制方向全景預覽和視訊預覽。 準備材料： 1.首先去歷覽器下載一個360全景圖片，網上資源很多。 2.去網上下載一個icon，ps後作為跳轉視訊的按鈕。（我就是怎麼做的，當然知識體驗效果的話，到不必要求審美） 3.除要有Unity引擎之外，

軟體工程之軟體設計③（概要設計說明書，詳細設計說明書）

      需求分析確定了系統的開發目標，下一步工作就是軟體設計。軟體設計可以進一步地 分為兩個階段：總體設計和詳細設計。      總體設計又稱概要設計，即確定系統的具體實現方案、給出軟體的模組結構、編寫總體設計說明書。 &nbs

Git 深度學習填坑之旅二（檔案三種狀態、打標籤）

0x01 三種狀態 Git 有三種狀態，你的檔案可能處於其中之一： 已提交(committed)、已修改(modified)和已暫存(staged)。 已提交表示資料已經安全的儲存在本地資料庫中。 已修改表示修改了檔案，但還沒儲存到資料庫中。 已暫存表示對一個已修改檔案的當前版本做了標記，使之包含在下次

Linux學習之網路程式設計（TCP三次握手四次揮手）

言之者無罪，聞之者足以戒。 - “詩序” 1、三次握手： 看一下三次握手的框圖： （1）、伺服器必須準備好接受外來連線 （2）、客戶端呼叫connect來主動開啟一個連線，此時客戶端TCP將會發送一個SYN分節 （3）、伺服器必須確認客戶的SYN （4）、客戶必須確認伺

Python之高等數學（對映，函式，數列，極限）

對映{x}→{y} 定義：兩個非空集合 X、 Y，若存在法則 f，使 X中每個元素 x在 Y中都能確定唯一元素 y與之對應，則稱 f為 X到 Y的對映，記 作 f： x→y X:{0,1,2,3}→Y:{0,2,4,6};有 f： x→y 即 y=f[x]=2x 函式y=f[x] 定義：數集 D

【資料結構】八大排序之快速排序（遞迴和非遞迴方法）

上一博文我們講了氣泡排序，但是由於他的時間複雜度過高為O（n*n）,於是在氣泡排序的基礎上今天要說的是快速排序。 本文講述兩個內容： 1.快速排序的三種方法。 2.快速排序的優化 一.什麼是快速排序？？？      通過一趟排序將要排序的資料分割成獨立的兩部

C++順序表應用3：元素位置互換之移位演算法（好好看著函式名！！）要不然就會 undefined reference to `build_table(Table&, int, int)'

順序表應用3：元素位置互換之移位演算法 Time Limit: 1000 ms Memory Limit: 570 KiB Problem Description 一個長度為len(1<=len<=1000000)的順序表，資料元素的型別為整型，將該表分

css3——transition動畫過渡（transition動畫過渡可作用的屬性），animation動畫鋪墊和@keyframes動畫關鍵幀

css3動畫優點：開啟GPU加速，不會產生動畫佇列，即頻繁點選按鈕時，不會有多個動畫在等待執行； 1. transition: property duration timing-function delay; 是個複合屬性，包括： transition-property

數學建模之線性規劃問題（含整數規劃和0-1規劃）

線性規劃問題 線性規劃是數學規劃中的一類最簡單規劃問題，常見的線性規劃是一個有約束的，變數範圍為有理數的線性規劃。 如： 為了便於表達，將上面的式子寫成矩陣形式： 於是約束就表達為了一個不等式。 求解MATLAB線性規劃時，最常用的函式是linprog函

【十】Java設計模式GOF23之介面卡模式（類方式實現、物件方式實現）

目錄 Target.java package com.bjsxt.adapter; /** * @author liyijie * @date 2016年8月12日下午4:13:21 *

Git 深度學習之填坑之旅一（git安裝和配置、基本命令）

2018-11-07 14:37 by 蟬時雨, ... 閱讀, ... 評論, 收藏, 編輯 前戲 最近不管是工作還是ctf比賽，接觸與使用git變得越來越多，git半吊子水平的我已經不能支撐日常工作了。碰巧自己公司專案剛上線，現在能擠出一

IT職場人生系列之九 消費觀（攢錢，繼續教育，買房）

                本文是IT職場人生系列的第九篇。前不久幾個朋友去海南玩，因為一位年輕的同事正好在附近出差，就一起去了。這樣的一次旅遊，幾乎會花掉她大半個月的工資，所以引發了對金錢觀的思考，簡單而言，就是：錢該怎麼花？整體比較亂，用幾個問題串起來。每個人的環境和經歷不同，因此只可說是自己回顧及環