2015 CodePen トップ 100 コード スニペット_html/css_WEB-ITnose

CodePen には、多くの優れたフロントエンド コード スニペットがあり、デザイナーやフロントエンドが好きな人は、インスピレーションを求めたり、コード アプリケーションを学習したりすることができます。最近、CodePen は 2015 年に最も人気のあるコード スニペット 100 を発表しました。その多くは本当に素晴らしいものですので、ぜひお楽しみください。

Top18 のスクリーンショット

注: 次のコード コンテンツは iframe フォームに埋め込まれているため、RSS 購読ユーザーは実際の効果を確認できない場合があります。デザイン エキスパートの Web サイトにアクセスして確認してください。 。

読み込みが少し遅いので、良いものを見たい方は気長にお待ちください。

トップ 1: ライオンを冷やす

とてもかわいいふるい、マウスの左ボタンを押すと風車が回転します。

トップ 2:pen#PwLXXP

コードで書かれた教育ビデオ チュートリアル。コードを書きながらハート型のパターンを描きます。

トップ 3: #DaftPunKonsole

小さなゲームですが、遊び方がわかりませんか?文に？

トップ 4: 伸縮性のある SVG サイドバー マテリアル デザイン

SVG サイドバー、伸縮性のあるアニメーションがとても素敵です。

トップ 5: 少ないスタイリッシュなホバー効果 10 個

10 テキスト HOVER 特殊効果、ツアーのような効果シーンは非常に適切です。

トップ 6: Gooey Menu

メニュー効果

トップ 7: ·● Web 用 MOTION ●·

テキストアニメーション、言葉が美しく、アニメーションも素敵です。

トップ 8: scss を使用した 10 の素晴らしいホバー効果

10 のテキスト アプリケーション エフェクト

トップ 9: バブル • レイアウト

トップ 10: フリップサイド

このポップアップ ウィンドウのインタラクションは素晴らしいです。

編集者は、TOP10 がベストではないと感じています。他のコード スニペットにも素晴らしい事例や実践的な事例がたくさんあります。Codepen の Web サイトにアクセスして確認してください。

ウェブサイト名: The most heart of 2015

ウェブサイトアドレス: http://codepen.io/2015/popular/pens/

あなた2014 年のトップ 100 コードもチェックできます: 「2014 年に Codepen で最も人気のある 100 のコードと CSS スニペット」

コミュニケーション: より才能のあるデザイナーと友達になりたいですか? (UI Design QQ Group) リストにアクセスして、50,000 人のデザイナーとデザインを交換してください。

デザイン ナビゲーション: 若い友人とマスターの両方にふさわしいデザイナー Web サイト ナビゲーション: http://hao.shejidaren.com