您現在的位置是:電腦技術吧?>? 組裝維修 ??>??css3,css3偽類選??>??正文詳情

css3,css3偽類選

威雅惠2019-11-05 16:01:19 人圍觀
簡介css3新增的偽類制作步驟:首先在head tag結構下面的代碼中使用css3的prefix free.js腳本。CSS3中-Moz、-WebKit、-O、-MS的代碼可以省略如css3偽類before

制作步驟:一, head標簽結構下面代碼中使用了CSS3無前綴腳本prefixfree.js,可以省去CSS3中前綴-moz、-webkit、-o、-ms代碼如下:headmeta charset=utf-8titlebutton/titlescript src=js/jquery.js type=text/javascript/scriptscript src=js/prefixfree.min.js type=text/javascript/scriptlink rel=stylesheet type=text/css href=css/button.css /script type=text/javascript/*這里采用淡入效果試試*/$(function(){$(.bt).css(opacity,1);});/script/head二, body標簽結構代碼如下:bodydiv class=btdiv class=button/divdiv class=button2/divdiv style=clear:both /div /div/body三,CSS代碼代碼如下:* {padding: 0;margin: 0;}/* 清除浮動 */.clearfix:after {content: ;display: table;clear: both;}html, body {height: 100%;}body {font-family: Microsoft YaHei;background: #E1E1E1;font-weight: 300;font-size: 15px;color: #333;overflow: hidden;}a {text-decoration: none;}/*按鈕 陰影無擴展 */.bt {margin: 100px auto;display: block;width: 350px;opacity:0;border-bottom: 1px solid #C5C5C5;border-top: 1px solid #C5C5C5;box-shadow: 0 1px 0 #F6F6F6, 0 1px 0 #F6F6F6 inset;transition: all 0.5s ease-in;}/p p.button:before, .button2:before {content: ;width: 130px;height: 130px;display: block;z-index: -1;position: relative;background: #ddd;left: -15px;top: -15px;border-radius: 65px;box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);}.button:after, .button2:after {content: 注冊;color: #09F;font-size: 20px;width: 100%;height: 100%;line-height: 100px;text-align: center;position: absolute;top: 0;display: block;}.button2:after {content: 登入;word-spacing: 25px;color: #A0D989;}.button, .button2 {float: left;margin: 50px auto;cursor: pointer;height: 100px;width: 100px;display: block;position: relative;color: black;text-align: center;line-height: 100px;border-radius: 50px;box-shadow: 2px 2px 4px rgba(0,0,0,0.4);background: #FFF;transition: all 0.5s ease-in;}.button {float: left;}.button2 {float: right;}OK,制作結束。

是不是簡單得讓人抬不起精神呢? 趕緊動手試試吧。

再次申明演示地址到文章的開始處已經給出了哦,找找看啊。

下面給大家分享幾個在線制作CSS3按鈕的網站吧:1,Live Tools是一個在線UI制作工具,他提供了按鈕、表單、icon圖標和Ribbons的制作工具,可以在線配置相關參數,生成你需要的效果代碼。

2,CSS3 Button Generator是一款簡單的按鈕生成工具,他可以制作出兩種狀態下的按鈕效果,當然你如果需要其他狀態的下按鈕效果,要在其基礎上做一些參數的變化,相對來說麻煩一點。

3,Button Generator生成和圖片效果一樣的按鈕工具。

4,Webarti CSS3 Button Maker是一款非常強大的按鈕在線生成工具,他提供了很多種不同按鈕效果讓你參考,可以說只需選擇就能制作出自己需要的按鈕,思考的時間都不用你花了。

版權聲明:本文由 威雅惠 整理編輯。

原標題:css3偽類not,css3偽類

轉載注明出處:http://www.dn9ww09s.icu/assemble/11222.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦內存滿了怎么清理,電腦內存條怎么清理

    電腦內存滿了怎么清理,電腦內存條怎么清理 相關圖片電腦內存當計算機開始緩慢運行時,我們會考慮計算機中是否有太多垃圾。此時,我們將通過清理計算機來釋放內存。有很多方法可以清理計算機內存,你知道嗎如果你不知道,就往下...

  • 聯想筆記本價格大全,聯想筆記本電腦哪款好

    聯想筆記本價格大全,聯想筆記本電腦哪款好 相關圖片筆記本品牌最近,很多小伙伴都在問小編,哪款筆記本更容易用我想把它們介紹給你,但我希望價格不要太高,在5000左右。所以小編今天要寫一本5000左右的筆記本。感興趣的合作伙聯想...

  • cascade怎么用,cascade

    cascade怎么用,cascade 相關圖片cascade意思即使在不太復雜的樣式表中,也可能有兩個或多個規則可以找到相同的元素css通過一個名為cascade的過程來處理這個沖突。cascade為每個規則分配一個重要性索cascade是什么...

  • msi筆記本,msi筆記本怎么樣

    msi筆記本,msi筆記本怎么樣 相關圖片msi是什么電腦MSI筆記本電腦有幾個版本的Ge,GS,GT,GX系列,為玩家提供更多的購買選擇msi筆記本以其高性能的特點擠進了競爭激烈的電腦市場,并以其自身獨特的特點被大多rog筆記本...

  • 網頁設計背景,頁面背景

    網頁設計背景,頁面背景 相關圖片怎么設置頁面背景在網頁設計和制作中,經常會遇到這樣的問題:當使用圖片作為背景時,由于顯示分辨率太大或圖片尺寸太小,頁面兩側或底部都沒有背景圖片。例如,當分辨率小于...

  • word激活密鑰,word文檔激活密鑰

    word激活密鑰,word文檔激活密鑰 相關圖片office密鑰在哪里查找現在很多軟件確實需要激活,特別是一些辦公軟件,必須激活才能使用。但是只有兩種方法可以激活。使用激活工具激活或使用激活鑰匙激活。但是今天,我要給你...

  • compatible,ua模式

    compatible,ua模式 相關圖片ua兼容模式在行政長官的IE9下,公司的項目無法正常訪問,我們需要使用以下方法:使網頁與IE9兼容,并復制如下代碼:![如果lte ie 8]元http equiv=x-uincompatible...

  • 0x000000116藍屏,藍屏0x000000d1

    0x000000116藍屏,藍屏0x000000d1 相關圖片電腦藍屏0x0000016怎么辦我們知道,電腦使用不當會導致藍屏甚至無法啟動,原因有很多,如常見的硬件不兼容、軟件不兼容等。由于電腦藍屏的原因不同,解決方法也不同藍屏代碼0x00...

  • 彈跳的球球,彈跳球怎么做

    彈跳的球球,彈跳球怎么做 相關圖片一個球一直彈跳的游戲彈跳球是用html5實現的。別驚訝。它完全可以通過使用HTML5來實現具體截圖和代碼如下。有興趣的朋友可以參考夏哈,希望能幫你拷貝代碼如下:HTML頭元字符集=彈...

  • outlook激活密鑰,outlook怎么激活

    outlook激活密鑰,outlook怎么激活 相關圖片outlook激活碼在我知道outlook 2007即將被激活之前,我很高興下載并安裝它,準備使用它來獲取一些東西。但冷是無法打開的,后來朋友知道了,才告訴我需要激活Outlook2013office激活密鑰...

熱評文章

  • word空白頁刪除不了,word多了一頁空白頁怎么刪除

    word空白頁刪除不了,word多了一頁空白頁怎么刪除 相關圖片word分頁符怎么刪除word是一種辦公用具,經常被一些上班族和一些學生使用。辦公室工作人員經常用word處理文件。為什么有些學生經常用這個?因為當我們用電腦寫論文,做電腦作業或...

  • 尾注是注釋的一種嗎,軟件注釋有哪幾種

    尾注是注釋的一種嗎,軟件注釋有哪幾種 相關圖片html中注釋有幾種一。子選擇器:如果你想隱藏ie中的css定義,你可以使用子選擇器css部分:htmlbody p{/*declarations*/}2。通配符(*)。只有IE瀏軟件注釋分為哪幾種...

  • 手機打開ai文件的軟件,打開ai文件的軟件

    手機打開ai文件的軟件,打開ai文件的軟件 相關圖片什么軟件可以打開ai格式近日,有朋友問小編大達如何打開人工智能文件收到私信后,我特意打開電腦試著操作,然后告訴小朋友開封的過程但我相信還有其他合作伙伴不知道如何打開人...

  • office2017密鑰,office2016激活密鑰

    office2017密鑰,office2016激活密鑰 相關圖片office2019永久密鑰Office2017已準備就緒一些用戶已下載office2017但令一些用戶困擾的是,他們沒有激活密鑰。他們不知道如何激活Office2017。如果您沒有真正的office10密鑰...

  • 基礎組織,組織

    基礎組織,組織 相關圖片組織建設包括哪些方面(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽的符號后面加了一個空格,比如左尖括號 字段集 右尖括號,我會寫字段集,這樣就可以在文章...

  • 諾頓殺毒軟件好不好,諾頓殺毒軟件怎么買

    諾頓殺毒軟件好不好,諾頓殺毒軟件怎么買 相關圖片手機諾頓殺毒軟件我相信大多數可愛的電腦都被病毒感染了。像小編這樣的電腦經歷過各種病毒的“愛”。但幸運的是,每次我聰明機智的時候,我就解決了。為什么?因為小編一直在...

  • cpl濾鏡用法,濾鏡怎么使用

    cpl濾鏡用法,濾鏡怎么使用 相關圖片濾鏡用得好css波濾波器可能不會被很多朋友使用。事實上,它工作得很好,可以有很多奇怪的效果。Csswave過濾器可以垂直疊加對象的波樣式,使對象看起來像一個波語法示例:f濾鏡種類...

  • 電腦老是藍屏,電腦突然藍屏

    電腦老是藍屏,電腦突然藍屏 相關圖片電腦藍屏0x0000007b當你使用電腦時,遇到電腦的藍屏是很不愉快的。一兩次,你都不在乎。但是,如何經常使用電腦的藍屏呢看著冰冷的藍色屏幕,它一動不動,這嚴重影響了我們的操作...

  • canvas應用技巧,canvas實例

    canvas應用技巧,canvas實例 相關圖片澳洲注意事項畫布的默認寬度和高度為300和150為了避免異常,最好使用顯示屬性而不是css來添加寬度和高度。下面簡單介紹一下使用畫布的注意事項。感興趣的朋友,請參考哈哈,希c...

  • DNF如何解除安全模式,dnf安全模式解除不了

    DNF如何解除安全模式,dnf安全模式解除不了 相關圖片dnf避過安全模式dnf的安全模式是當我們的游戲帳戶異常登錄時打開的模式。也許我的搭檔會問我如何刪除這個安全模式?如果你能想到那個問題那就太好了。因為我今天要講的是如何釋...

關注微信

变脸官网查询