小叮噹簡單顏色單一,操作起來也很容易上手。接下來的乙個例項就是用css畫出乙個多啦a夢,首先將其分為頭部,和身體。然後,再根據身體各部分細節進行進一步的具體刻畫。
由於最近一直在學習j**aweb方面的東西,所以,我的這個小叮噹就是用jsp頁面進行映襯。
**如下:首先是寫jsp頁面,將其分成多個塊,然後再分塊操作:
xml/html code複製內容到剪貼簿
再接下來就是每乙個div的細緻描寫刻畫:
xml/html code複製內容到剪貼簿
程式設計客棧
這個是整體的描繪,接下來,我來根據自己的理解更加深刻地理解每乙個特效的**。
background:-webkit-radial-gradien :這個屬性是講顏色的漸變,比如哆啦a夢的藍色,從右上再到左下,顏色逐漸加深,線性漸變;
線性漸變例項:
border-radius:轉換為圓角;
z-index:指定該元素的層疊順序,比如說,若z-index為-1,覆蓋在上面的字就會顯示出來。
rgba(0,0,0,0.45):表示透明度的;
—overflow:設定當元素的內容溢位其區域時發生的事情,hidden,隱藏。
transform:轉換和旋轉;
這裡還有乙個動畫效果,目的是讓小叮噹的眼睛動起來~
css code複製內容到剪貼簿
最後再來看一看哆啦a夢的最終效果圖。
本文標題: css畫出乙個可愛神奇的多啦a夢
本文位址:
乙個神奇卻很簡單的css特效
在網上看到乙個前端大牛的主頁,覺得他有乙個特效特別酷,一開始還以為是要用什麼j ascript 來實現,但仔細看一下,發覺只是用幾行css 就搞定了,我覺得挺好的。他這個效果就是滑鼠放在左半部分和右半部分,整個網頁的布局顏色會相互變化,我貼上前後兩張圖來比較一下,你們就明白了。當滑鼠放在左半部分 當...
CSS畫出乙個三角形
今天做轉盤,需要有乙個三角形的指標,考慮到不想載入乙個,就想能不能自己畫乙個。開始還真沒畫對,老師給指點了以後,明白了怎麼畫。html 用css畫乙個三角形title charset utf 8 rel stylesheet type text css href css style.css head...
scanf 乙個神奇的函式
scanf函式,與printf函式一樣,都被定義在stdio.h裡,因此在使用scanf函式時要加上 include。它是格式輸入函式,即按使用者指定的格式從鍵盤上把資料輸入到指定的變數之中,其關鍵字最末乙個字母f即為 格式 format 之意。scanf 格式控制,位址表列 int scanf c...