原文:CSS魔法堂:Transition就這么好玩

前言 以前說起前端動畫必須使用JS,而CSS 為我們帶來transition和 keyframes,讓我們可以以更簡單 聲明式代替命令式 和更高效的方式實現UI狀態間的補間動畫。本文為近期對Transition的學習總結,歡迎各位拍磚。 屬性介紹 首先先我們簡單粗暴了解transition屬性吧 另外我們可以一次性為多個CSS屬性啟動Transition效果 觸發方式 既然Transition是U ...

2018-06-06 03:53 0 1500 推薦指數:

查看詳情

CSS魔法堂:改變單選框顏色就這么吹毛求疵!

前言  是否曾經被業務提出"能改改這個單選框的顏色吧!讓它和主題顏色搭配一下吧!",然后苦於原生不支持換顏色,最后被迫自己手擼一個湊合使用。若拋開input[type=radio]重新開發一個,發現 ...

Thu Oct 04 15:16:00 CST 2018 0 804
CSS魔法堂:Flex布局

前言  Flex是Flexible Box的縮寫,就是「彈性布局」。從2012年已經面世,但由於工作環境的原因一直沒有詳細了解。最近工作忙到頭暈腦脹,是要學點新東西刺激一下大腦,打打雞血。 Flex就這么簡單 瀏覽器兼容性  一說到兼容性就是永遠的痛,不過幸運的是只要在IE10加-ms- ...

Tue Jun 05 00:48:00 CST 2018 1 981
CSS3魔法堂:背景漸變(Gradient)

一、前言                             很久之前就了解過CSS3的線性漸變(Linear-Gradient),這段時間決定進一步認知這一特性,以下筆記以便日后查閱。 二、CSS3的各種背景漸變                     1. 線性漸變 ...

Fri Nov 28 18:12:00 CST 2014 4 11605
CSS魔法堂:Box-Shadow沒那么簡單啦:)

前言  說起box-shadow那第一個想法當然就是用來實現陰影,其實它還能用於實現其他好玩的效果的,本篇就打算說說box-shadow的那些事。 二話不說看效果 3D小球 紙張陰影(來自@張鑫旭老師) 細讀屬性  看到上面這么絢麗的效果,是不是迫不及待想弄清 ...

Wed May 11 16:49:00 CST 2016 1 7840
CSS魔法堂:那個被我們忽略的outline

前言  在CSS魔法堂:改變單選框顏色就這么吹毛求疵!中我們要模擬原生單選框通過Tab鍵獲得焦點的效果,這里涉及到一個常常被忽略的屬性——outline,由於之前對其印象確實有些模糊,於是本文打算對其進行稍微深入的研究_ Spec是這樣描述它的 作用  用於創建可視對象的輪廓(元素 ...

Tue Oct 09 14:20:00 CST 2018 0 715
CSS魔法堂:hasLayout原來是這樣!

前言 過去一直聽說舊版本IE下很多詭異bug均由一個神秘角色引起的,那就是hasLayout。趁着最近突然發神經打算好好學習CSS,順便解答多年來的疑惑。 hasLayout到底是何方神聖? hasLayout可以簡單看作是IE5.5/6/7中的BFC(Block Formatting ...

Fri Mar 18 18:47:00 CST 2016 0 7877
CSS魔法堂:Position定位詳解

一、Position各屬性值詳解                     1. static :默認值,元素將按照正常文檔流規則排列。 2. relative :相對定位,元素仍然處於正常文檔流當中,但可以通過left、top、right和bottom的CSS規則來改變元素的位置 ...

Fri Sep 12 06:41:00 CST 2014 1 5527
CSS魔法堂:盒子模型簡介

本文討論的是塊級盒子(Block-level box)的盒子模型(Box Model) 一、W3C標准的盒子模型                             二 ...

Sat Sep 13 04:02:00 CST 2014 1 2992
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM