2. 程式人生 > >CSS3 英文字母滑鼠放上去效果

CSS3 英文字母滑鼠放上去效果

阿新 • • 發佈：2019-01-19
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style>
    .letter{
      display: inline-block;
      font-weight: 900;
      font-size: 8em;
      margin: 0.2em;
      position: relative;
      color: #00B4F1;
      transform-style: preserve-3d;
      perspective: 400;
      z-index: 1;
    }
.letter:before, .letter:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  -ms-transform-origin: top left;
  -moz-transform-origin: top left;
  -webkit-transform-origin: top left;
  -o-transform-origin: top left;
  top:0;
  left:0;
}
.letter, .letter:before, .letter:after{
  transition: all 0.3s ease-in-out;
}
.letter:before{
  color: #fff;
  text-shadow:
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
-ms-transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
-moz-transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
-webkit-transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
-o-transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.letter:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
-ms-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
-moz-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
-webkit-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
-o-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}
.letter:hover:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
-ms-transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
-moz-transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
-webkit-transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
-o-transform:
    rotateX(0deg)
    rotateY(-40deg)
    rotateZ(0deg);
}
.letter:hover:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
-ms-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
-webkit-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
-moz-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
-o-transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}


</style>
</head>


<body>
    <div class="foo">
      <span class="letter" data-letter="A">A</span>
      <span class="letter" data-letter="B">B</span>
      <span class="letter" data-letter="C">C</span>
      <span class="letter" data-letter="D">D</span>
      <span class="letter" data-letter="E">E</span>
      <span class="letter" data-letter="F">F</span>
      <span class="letter" data-letter="G">G</span>
      <span class="letter" data-letter="H">H</span>
      <span class="letter" data-letter="I">I</span>
      <span class="letter" data-letter="J">J</span>
      <span class="letter" data-letter="K">K</span>
      <span class="letter" data-letter="L">L</span>
      <span class="letter" data-letter="M">M</span>
      <span class="letter" data-letter="N">N</span>
      <span class="letter" data-letter="O">O</span>
      <span class="letter" data-letter="P">P</span>
      <span class="letter" data-letter="Q">Q</span>
      <span class="letter" data-letter="R">R</span>
      <span class="letter" data-letter="S">S</span>
      <span class="letter" data-letter="T">T</span>
      <span class="letter" data-letter="U">U</span>
      <span class="letter" data-letter="V">V</span>
      <span class="letter" data-letter="W">W</span>
      <span class="letter" data-letter="X">X</span>
      <span class="letter" data-letter="Y">Y</span>
      <span class="letter" data-letter="Z">Z</span>
    </div>
</body>
</html>

相關推薦

CSS3 英文字母滑鼠放上去效果

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</tit

滑鼠放上去，出現大圖預覽效果

       前天逛淘寶，看見淘寶的商品圖片，滑鼠放上去就會就會有相應大圖的預覽，於是就想著自己能不能做一個這樣的效果出來，畢竟以前也看過這樣類似的教程。 思路：             一：頁面佈局             二：滑鼠放上去，出現透明浮動塊        

intellij idea 滑鼠放上去提示引數等資訊

settings-->Editor-->General，在other中找到show quick documentation on mouse move, 或者開啟settings，直接輸入mouse move搜尋，如下圖： 在other中找到show quick document

jquery 預覽圖片，滑鼠放上去顯示實際大小的預覽圖片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

Jquery滑鼠放上去圖片放大

效果圖： 存放圖片及上傳參考 HTML程式碼 <a href="/Upload/Jaeyi/308_20140722102828.JPG" class="tooltip"> <img src="/Upload/Jaeyi/Small/308_2

Js滑鼠放上去圖片變大變小

<img src="" onmouseover="bigger()" onmouseout="smaller()" id="img"> <script type="text/javascript">  var img = document.getEl

CSS3滑鼠放上按鈕懸浮框提示效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" c

滑鼠放圖片上==放大鏡顯示效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery-圖片的放大鏡顯示效果</title> <style

CSS3 動畫-- 滑鼠移上去，div 會旋轉、放大、移動

原碼：   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

unity--滑鼠放上顯示物體資訊和物體高光效果

滑鼠放在物體上顯示資訊程式碼 using UnityEngine; using System.Collections; public class info : MonoBehaviour { bool isShowInfo; public GUISty

學習筆記3--CSS製作滑鼠放上後淡入透明遮罩層效果

transition： Internet Explorer 10、Firefox、Opera 和 Chrome 支援 transition 屬性。 Safari 支援替代的 -webkit

滑鼠懸浮上去 實現光暈效果

#btn-attend{cursor: pointer;text-decoration: none;color: #fff;border-radius: 10px;position: absolute;left:40px;        } #btn-attend:after{content: "";posi

滑鼠放上圖片，圖片上方出現遮罩和文字效果

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" c

PHP英文字母大小寫轉換函數小結

字符串 content 字符轉換 class 文字 單詞 con 英文 code 每個單詞的首字母轉換為大寫：ucwords() 代碼如下: <?php$foo = ‘hello world!‘;$foo = ucwords($foo); /

[JS] 氣球放氣效果

增刪改查 兼容ie splay lec ajax json 插件 最小 scale inset <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

使用css3實現小菊花加載效果

常見 ani frame 嘗試 linear key 利用 del 做成 使用css3實現小菊花加載效果 　　最常見的就是我們用到的加載動畫。加載動畫的效果處理的好，會給頁面帶來畫龍點睛的作用，而使用戶願意去等待。而頁面中最常用的做法是把動畫做成gif格式，當做背景圖或是i

二十二、英文字母和數字不會換行如何處理

英文 一次 bre word-wrap style 英文字母 ron wrap -a 一次偶然的項目中，遇到一個奇怪的問題，為什麽我都寫了換行的css怎麽還是沒有換行？請教宋老師之後才知道“英文字母和數字是不會換行的”，那如何處理呢？ 處理辦法，在所在類上增加下面css：

CSS3 3D環境實現立體 魔方效果代碼

3d 魔方 css 環境實現 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>魔方</title>

使用css3制作簡單的loading效果

-o frame mov height document load charset key bottom <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

現在的位置就是對的啊，意思就是當鼠標放上去的時候，停止滾動，鼠標離開，繼續滾動

sta 意思 out rip star script detail ref 停止 <marquee id="marquee" onmouseover="this.stop()" onmouseout="this.start()"> <a href=