CSS3新特性學習

wing324 發布于2019-08-29 12:31 / 1661人閱讀

摘要：引言最近發現很多的新特性不熟悉，所以今天把它們都學習一邊，做出效果加深印象，說到還加了蠻多的特性，像一些的一些效果，動畫屬性等。

引言

最近發現很多css3的新特性不熟悉，所以今天把它們都學習一邊，做出效果加深印象，說到css3還加了蠻多的特性，像一些border的一些效果，動畫屬性animation trasiform等。

1.border-radius（邊框圓角） 效果

　實現代碼：

    height: 100px;
    width: 100px;
    margin: 0 auto;
    background-color: #E0e0e0;
    border-radius: 10px

加上下面這兩個是為了兼容chrome和fixfox舊版本

    -moz-border-radius: 10px;/* chrome */    
    -webkit-border-radius: 10px;/* fixfox */

這個屬性很有趣，還可用來畫圓，把值設為百分比，可以畫任意大小的圓

    border-radius: 50%;
    -moz-border-radius: 50%;/* chrome */
    -webkit-border-radius: 50%;/* fixfox */

　圓效果

2.box-shadow（邊框陰影）

這個可就厲害了，可以做出立體效果，也可以使邊框很炫酷

　語法：

box-shadow: h-shadow v-shadow blur spread color inset;    
h-shadow:水平陰影位置
v-shadow:垂直陰影位置
blur:模糊距離
spread：陰影尺寸
color：陰影顏色
inset：內部陰影 默認為outset

　效果

　代碼

box-shadow: 10px 10px 4px #A5A5A5;

用在input上

代碼

box-shadow:0 0 8px 2px #9668db;

3.text-overflow(文本溢出隱藏）

設置div的寬高固定，文字太多時會超出div的邊框

我們要實現下面效果，以三個點號代替省略的文字

代碼

        text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;

　４.transform（動畫）

鼠標移入時動畫：

樣式

    .di{
            
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: #E0e0e0;
            transition:width 1s, height 1s;
            -moz-transition:width 1s, height 1s, -moz-transform 1s; /* 可以支持Firefox 4 */
            -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* 可以支持Safari and Chrome */
            -o-transition:width 1s, height 1s, -o-transform 1s; /* 可以支持Opera */
    }

鼠標移入時

    .di:hover{
        width:200px;
        height:200px;
        transform:rotate(180deg); /*旋轉180度*/
        -moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
        -webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
        -o-transform:rotate(180deg); /* 可以支持Opera */
    }

未完待續。。

GPU云服務器云服務器 css3 css3氣泡 css3動畫 JS+CSS3

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111959.html

Jdk1.8新特性學習（Optional）

摘要：它的出現是為我們解決空指針異常的，以前我們寫代碼如果不進行判斷，會經常出現異常。因為它本身就是個對象，不管放進去的對象為不為，始終不會返回，所以你也不需要在你的業務流程中進行一大堆的判斷，避免了程序運行時的空指針異常。想必大家已經在使用jdk1.8做項目開發，但是你對于它里面的一些性特性了解多少呢？有沒有在你的項目中運用呢？現在就和我來一起梳理一下吧。介紹它是java.util包...

liaosilzu2007 2019-08-19 11:33 評論0 收藏0
Es6新特性學習

摘要：基礎語法變量提升都可以個難點在編譯時執行并沒有報錯，執行結果如圖注意結果沒有變更改結果值變了參考新特性未完一直更新基礎語法變量提升 //es5 var arr = []; for(var i=0; i

AlphaWallet 2019-08-23 13:44 評論0 收藏0
Java8新特性學習筆記

摘要：雖然目前工作環境仍然以為主，不過目前已是大勢所趨了。標準函數式接口新的包定義旨在使用的廣泛函數式接口。這一改進使得擁有了類似于多繼承的能力。從Java8發布到現在有好幾年了,而Java9也提上發布日程了(沒記錯的話好像就是這個月2017年7月，也許會再度跳票吧，不過沒關系，穩定大于一切，穩定了再發布也行)，現在才開始去真正學習，說來也是慚愧。雖然目前工作環境仍然以Java6為主，不過...

wthee 2019-08-15 10:46 評論0 收藏0
JDK 1.8 新特性學習（Stream）

摘要：會在數據源內部隱式的遍歷進行處理。會并行遍歷數據，將數據分成若干段，同時進行處理，最終匯總結果一起輸出。結束操作會觸發實際計算，計算發生時會把所有中間操作積攢的操作以的方式執行，這樣可以減少迭代次數。為函數式編程而生。 Stream實現了對數據源的流式處理，它可以并行操作，提高數據處理效率。什么是流流不是集合，它不對數據做保存，只是最數據進行算法處理，比如最大值，最小值，排序等操作...

yhaolpz 2019-08-19 11:33 評論0 收藏0
[ ES6 ] 一. ECMAScript 6 相關學習資源

摘要：瀏覽器兼容性列表可以看到還是全線飄紅的和支持特新列表據此在和上使用這些新特新待補充二相關教程最重要的產品規格書，什么教程也脫離不了這里的標準，英文好的還是多看點。一. ES6新特性相關 es6features : 經典的ES6新特性預覽，github 逼近 10k star . ES6新特性概覽：同樣也很全面的特性介紹的中文版。瀏覽器兼容性列表：可以看到還是全線飄紅的~~~ ...

Towers 2019-08-21 10:40 評論0 收藏0