css芝麻開門

2021-10-03 02:26:20 字數 1561 閱讀 4954

芝麻開門:把滑鼠放在門上,兩扇門同時開啟,而且角度是30度,門上的字型一直是倒立的。

思路:設定初始狀態:門關著的時候,字型是倒立的

設定結束狀態:門開啟角度30度,字型是倒立的

使用transition過渡效果,完成動畫。

難點:發現字型倒立要多寫一行**,原因是transform的值會把以前的覆蓋掉。

另外,解決**塊裡面的程式語言格式設定,直接在 ```後 面加上相應的語言來解決。

**如下:

>

>

>

芝麻開門案例title

>

type

="text/css"

>

.box

.box div

/*設定左邊門*/

.box:hover .left

/*設定右邊門*/

.box:hover .right

style

>

head

>

>

class

="box"

>

class

="left"

>

福div

>

class

="right"

>

福div

>

div>

body

>

html

>

效果圖如下:

後來發現,如果加上過渡transition,會出現問題,解決方法如下

>

>

>

芝麻開門案例title

>

type

="text/css"

>

.box

.box div

.box .left

.box .right

/*設定左邊門*/

.box:hover .left

/*設定右邊門*/

.box:hover .right

{transform-origin

:right center;

transform

:rotatex

(180deg)

rotatey

(60deg)

;style

>

head

>

>

class

="box"

>

class

="left"

>

福div

>

class

="right"

>

福div

>

div>

body

>

html

>

次芝麻 數學

小g和小x都是小次貨。身為小次貨,最重要的事情當然就是次啦!所以他們正在糾結如何分芝麻次。一開始,小g有n個芝麻,小x有m個芝麻。因為他們都想次更多芝麻,所以每次手中芝麻較少的人就會拿走另乙個人的芝麻,使得自己的芝麻變成原來的2倍那麼多。如果兩個人芝麻一樣多,那麼小g會拿走小x的芝麻使得他的芝麻變成...

芝麻開花節節高

今天一天都基本在筆試與面試忙碌,定下心來。好好總結今天的點滴。在下午剛筆試完收到了某網科的offer,30號之前給答覆。瞬間心情飛起來了,終於有個offer了,心情很愉快。接著心思都放在該不該籤的情緒上。之後宣講會完了默默坐在那裡等這家的初試,小磊第乙個。我以為接下來應該是我了,結果默默地等啊等,等...

Android仿芝麻信用分

1.先準備好 2.新建乙個creditscoreview類,繼承view public class creditscoreview extends view 各維度圖示 private int icons 各維度分值 private float data 資料最大值 private float ma...