css3新屬性運用

阿新 • • 發佈：2018-05-23

for 技術分享屬性 nbsp ati bottom box sca pad

1、動畫效果

技術分享圖片 ===》===》》》

<style> 
.star {
    position: absolute;
    width: 80px;
    height: 80px;
}
.point {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    background: transparent;
    background-clip: padding-box;
    border 
-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.star .point-dot {
    z-index: 1;
    background-color: #74E0F1;
    border: 1px solid #74E0F1;
}
.pa-10 {
    width: 100%;
    height: 100%;
}
.star .pa-10:after {
    position: absolute;
    content: ‘‘;
    display: block;
    left:  
0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    border: 2px solid #74E0F1;
    -webkit-animation: ripple 3s linear 0ms infinite;
    -moz-animation: ripple 3s linear 0ms infinite;
     
-o-animation: ripple 3s linear 0ms infinite;
    animation: ripple 3s linear 0ms infinite;
}
.star .pa-20:after {
    position: absolute;
    content: ‘‘;
    display: block;
    left: 0;
    bottom: 0;
    top: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    border: 2px solid #74E0F1;
    -webkit-animation: ripple 3s linear 1.5s infinite;
    -moz-animation: ripple 3s linear 1.5s infinite;
    -o-animation: ripple 3s linear 1.5s infinite;
    animation: ripple 3s linear 1.5s infinite;
}
@keyframes ripple {
    0% {transform: scale(0);opacity:0;}
    70% {transform: scale(0.7);opacity:1;}
    100% {transform: scale(1);opacity:0;}
}}
}
</style>
</head>
<body>

    <span class="star">
          <i class="point point-dot"></i>
          <i class="pa-10 point"></i>
          <i class="pa-20 point"></i>
    </span>

</body>

css3新屬性運用

for 技術分享屬性 nbsp ati bottom box sca pad 1、動畫效果 ===》===》》》 <style> .star { position: absolute; width: 80px; height:

CSS3 新屬性相容性測試

css一些新屬性得相容性測試以及IE低版本瀏覽器怎麼相容得一些寫法(一些用法得具體方法，不做具體說明) 記錄下來，方便自己以後使用和檢視 1. border-radius:50%;（圓角） border-shadow:10px 10px 5px #000;（陰影）谷

css3新屬性box-orient

前言 box-orient屬性經常與display：box屬性結合使用 div { width:350px; height:100px; border:1px solid black; /* Firefox */ display:-moz-box;

CSS3 新屬性篇(五)：background-size屬性

目錄：一、background-size屬性介紹 CSS3 的 background-size 屬效能調整背景圖片的大小，從而替代了用原始大小顯示圖片的預設行為。你可以隨意的縮放背景圖。用法：b

CSS3新屬性

1、CSS3邊框 border-radius：圓角邊框 border-shadow：邊框陰影 border-image：邊框圖片 2、CSS3背景 background-size：屬性規定背景圖片的尺寸。 background-origin：屬性規定背景圖片的定位區域。 3、

CSS3新屬性box-flex移動端利器

水平有限，不周之處歡迎指正、交流！ box-flex{value}屬性規定框的子元素是否可伸縮其尺寸。可伸縮元素能夠隨著框的縮小或擴大而縮寫或放大。只要框中有多餘的空間，可伸縮元素就會擴充套件來填充這些空間。相容性：目前沒有瀏覽器支援 box-flex 屬性。

css3 的新屬性

back gpu transform courier nac -s down font near 1，動畫，animate------>//動畫-名稱-動畫的時間間隔-以什麽方式播放-循環 .right{ animate:dropdown 8s linear

解鎖css3新姿勢之transform3D各屬性及transform相容之矩陣寫法

閒來無事，整理一下可以打造炫酷網站的一些transform的屬性 1. 矩陣transform:matrix() 這個矩陣哥們是有些厲害的，不得不多說兩句，這哥們可以同時寫上縮放，旋轉，拉伸，位移等變形；詳細內容見下面 2.trans

h5新屬性

arc earch content 1.0 width num list user col <!DOCTYPE html> <html lang="en"> <head> <meta id="viewport" name=

css3常用屬性

cor pos ott file ani pla 書簽 iteration break CSS3 動畫屬性（Animation） @keyframes //規定動畫。 animation //所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。

CSS3動畫屬性：動畫(animation)

遞推 text tee 數值技術 tel time ani 效果一：動畫(animation)的參數詳解由於上面用到了animation動畫，這裏詳細介紹下這個animation的參數。簡介 CSS動畫(Animations)簡單說就是在一段固定的動畫時間內暗

css3計算屬性(calc)

自適應 cal 寬度瀏覽器 css 用法 element nth calc 如果有固定頭部高度和底部高度，內容的高度或者寬度想要根據瀏覽器屏幕自適應的話，可以用到css3的計算屬性,即calc。用法如下：內容區域高/寬 = calc(100% - 頭部高寬 -

vue 添加對象的新屬性的方法

添加屬性必須但是執行新的 div obj 創建 bject 和數組一樣，Vue 不能檢測到對象屬性的添加或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是

CSS3常用屬性及用法

rip watch code java ash nbsp chrom tran 替代 1.transition: 過渡屬性，可以替代flash和javascript的效果兼容性：Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

css3新增屬性02

無效置1 中一層次選擇器 checked r+ -o rst before CSS3 選擇器基礎選擇器通配符選擇器 * ID選擇器 #Id class選擇器 .classname 元素選擇器 tagName 群組選擇器 slecter,selecter 層次選

css3新特性

字號簡寫形式 between 兩端對齊 alternate hid 行級元素 chm 持續時間 CSS3 新屬性一、【 CSS3新增屬性前綴】　　1、-webkit-:chrome/safari 　　2、-moz-:火狐　　3、-mo-:IE 　　4、-o-: O

css3 resize屬性

vertical 尺寸 body 高度 chrome sch pre borde height http://www.w3school.com.cn/cssref/pr_resize.asp 實例規定可以由用戶調整 div 元素的大小： div { resize:both

常用的css3新特性總結

rip splay 插件 ash 500px line 對象 cal 投影 1:CSS3陰影 box-shadow的使用和技巧總結：基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiusc

css3新特性選擇器（補充）

last inpu child 一行標簽 after 第一個 ren 得到 1.選擇p標簽中的第一個字符 p:first-letter{ color:red; font-size:25px; } 2.選擇p標簽中的第一行 p:first-line{ 　　color:red

HTML5按鈕元素新屬性formaction,formenctype等簡介（轉載）

過去什麽事 oval 選擇效果 multipart 實用點擊 urlencode 一、<button>等元素新增HTML5屬性 – form 在過去，表單元素<form>和表單提交需要的一些控件元素（如<input>，

css3新屬性運用

相關推薦