CSS畫出乙個可愛神奇的多啦A夢

2022-09-25 23:09:16 字數 746 閱讀 1823

小叮噹簡單顏色單一,操作起來也很容易上手。接下來的乙個例項就是用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...