css3 愛心情書

程式設計師的浪漫——乙個簡單的愛心情書網頁製作

效果圖如下：

**如下：

html:

<

div 
id="contain"
>
<
div 
class
="love"
>
<
div 
class
="right"
>
div>
<
div 
class
="left"
>
div>
div>
<
p id
="pmd"
>
<
span
>i
span
> love you
p>
div>

*#contain.love@keyframes love}

.love div
@keyframes shadow}
.love .left.love .right#pmd#pmd span

var opmd=document.getelementbyid('pmd');

var str='i love you';
var num=1;
var timer=setinterval(function
()    },1000);

1.愛心的製作，這個大家可以看我的 純css 製作簡單的愛心這篇文章

2.box-sizing:content-box(標準w3c盒子) | border-box （怪異ie盒子） | inherit

3.background-image:url();  背景；

4.background-repeat: repeat（在垂直和水平兩個方向重複） | repeat-x（水平方向重複）  | repeat-y （垂直方向重複） | no-repeat（不重複） | inherit；設定影象數量

5.background-size: length（設定寬高） | percentage （以父元素的百分百設定） | cover（背景完全覆蓋） |contain（擴充套件至最大，內容區域自適應）;調整影象大小

6.background-position:valuex（x座標）,valuey （y座標）;調整位置，若只有乙個值，則是橫座標，另乙個預設center;

7.animation:  css3動畫屬性，具體不寫，後面會有一篇關於animation的介紹。

8.box-shadow

9.setinterval（）

好了介紹完畢，該作品尚簡陋，還有很多細節沒弄到，像自適應什麼的。請大家多多見諒

CSS3 心情由晴雨表決定

雖然在國內使用 css3 距離還是有些遠,但是我們也要學習這些新技術,今天為大家分享一些很酷的 css3 特效案例,用 css3 的新特性製作7個很酷的晴雨表動畫。這篇文章需要一些掌握 css3 動效基礎的童鞋學習 科普一共7個動畫，就把它們都放在一塊兒，並成一排吧。html 首先，先讓contai...

css3新動 CSS3 動畫

注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...

CSS3 總結（二十） 彈性盒子（CSS3）

2.在彈性容器中可以設定min width max width屬性來限制彈性子元素的最小及最大縮放寬度。用在彈性容器 3.flex direction 屬性 用在彈性容器 指定了彈性子元素在父容器中的位置。值說明 row橫向從左到右排列 左對齊 預設的排列方式。row reverse 反轉橫向排列 ...