検索
ホームページウェブフロントエンドhtmlチュートリアルエレガントな特殊効果を備えたメモとカレンダー_html/css_WEB-ITnose

我知道,没有图片你们是不会来的

date2.png

声明

这个效果是从 这里.看见的,原文使用的angularJs实现的。html代码使用了 haml,css 使用了scss。如果你喜欢,你也可以用 jade,less 来重写。我重新使用 js 实现了一遍。包括css,html代码均为重新写的。目前只在chrome下面跑~

示例

这里是一个Demo.

准备材料

  1. sublime text3 编辑器
  2. google浏览器 chrome 或者其他对css3兼容性比较好的浏览器。不要万恶的IE...

整体思想

1. 布局

很明显的看的出来这是一个左右布局,(既然是一个整体,那我们就把它装到一个盒子里面。就是body下面最外层的div呐)。左右布局,我们再来左边来一个div,右边来一个div。分别为 div.left(emmet的快捷方式写法),div.right 。剩下的内部的就看个人的喜欢了。可以是 上下,也可以是上中下。

2. 动画效果

每一单个日期的我点击事件是使用了一个弹动效果,原理就是一开始很小,然后变大,最后再缩小到一定程度停止。使用css3的 animation 的100%很容易就能做到的。动画的过程,就是速度使用贝塞尔曲线自定义就好了,怎么好看怎么来。右侧的动画效果同理。不过是使用了 2d 转换。

3. 默认样式的更改以及需要注意的地方。

I: 首先是盒子模型,其中有一段css的代码是这样的...

.left .week-title{ margin-top: 15px; width: 100%; display: -webkit-box; display: -webkit-flex; display: flex; height: 34px; font-family: 'Open Sans'; } .left .week-title li{ float: left; list-style: none; display: block; text-align: center; line-height: 34px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }

这里的三个display是一个兼容性写法,貌似还有另外一种兼容写法,百度一下,你就知道。我就不贴出来了。盒子模型的好处是横向布局的容器,内部的标签的占用宽度是计算机自动计算的结果,肯定精确。 例如:我有一个div 用了一个盒子模型,他的宽度固定是500px;里面如果有5个标签并排,我已知其中一个为130px; 剩下4个的宽度一样,那么我剩下的四个只需要设置 flex: 1; 即可。如果有一天父级的宽度发生了改变,我这四个div的宽度也会自动重新计算,不怕装不满整个盒子了。

II : placeholder与滚动条的样式自定义。

/ placeholder 颜色自定义 / input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #ddd; } input:-moz-placeholder, textarea:-moz-placeholder { color: #ddd; } input::-moz-placeholder, textarea::-moz-placeholder { color: #ddd; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ddd; } / 浏览器滚动条,前景色,背景色,滚动条颜色 ... / .right .list::-webkit-scrollbar { width: 10px; } .right .list::-webkit-scrollbar-track { background-color: #007fb0; } .right .list::-webkit-scrollbar-thumb { background-color: #00A8E8; } .right .list::-webkit-scrollbar-button { background-color: #007fb0; } .right .list::-webkit-scrollbar-corner { background-color: black; }

III: css3动画的触发机制

其实html中有动画会产生的根本原因是标签的某一个属性发生了改变,例如:背景颜色,长度,宽度,透明度等等...。那么,为什么他的属性会发生改变呢?只有一个原因,添加或者移除了 class,或者id 或者...。。那么我们要实现一个动画,只需要更改它不同class下面的状态不就好了么? 至于过程,那就是你自己定义的了,动画从开始到结束需要多久,匀速,减速,加速?等等.....

html代码

March

  • Sun
  • Mon
  • Tue
  • Wed
  • Thu
  • Fri
  • Sat
      CSSコード

      コードはここにあります Css code.

      JS code

      コードはここにあります Js code.

      エラーを見つけたら、修正は大歓迎です。気に入っていただけましたら、プライベートメッセージをお送りください。

      声明
      この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
      テキストからウェブサイトへ:HTMLの力テキストからウェブサイトへ:HTMLの力Apr 13, 2025 am 12:07 AM

      HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1)htmlは、などのタグを介してドキュメント構造を整理します。 2)ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3)マルチメディア関数を強化するなど、HTML5の新機能。 4)一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5)最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

      HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

      webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

      HTMLの役割:Webコンテンツの構造HTMLの役割:Webコンテンツの構造Apr 11, 2025 am 12:12 AM

      HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

      HTMLとコード:用語を詳しく見るHTMLとコード:用語を詳しく見るApr 10, 2025 am 09:28 AM

      htmlisaspecifictypeofcodefocuseduructuringwebcontent

      HTML、CSS、およびJavaScript:Web開発者に不可欠なツールHTML、CSS、およびJavaScript:Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

      HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

      HTML、CSS、およびJavaScriptの役割:コアの責任HTML、CSS、およびJavaScriptの役割:コアの責任Apr 08, 2025 pm 07:05 PM

      HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

      HTMLは初心者のために簡単に学ぶことができますか?HTMLは初心者のために簡単に学ぶことができますか?Apr 07, 2025 am 12:11 AM

      HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

      HTMLでの開始タグの例は何ですか?HTMLでの開始タグの例は何ですか?Apr 06, 2025 am 12:04 AM

      Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

      See all articles

      ホットAIツール

      Undresser.AI Undress

      Undresser.AI Undress

      リアルなヌード写真を作成する AI 搭載アプリ

      AI Clothes Remover

      AI Clothes Remover

      写真から衣服を削除するオンライン AI ツール。

      Undress AI Tool

      Undress AI Tool

      脱衣画像を無料で

      Clothoff.io

      Clothoff.io

      AI衣類リムーバー

      AI Hentai Generator

      AI Hentai Generator

      AIヘンタイを無料で生成します。

      ホットツール

      mPDF

      mPDF

      mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

      WebStorm Mac版

      WebStorm Mac版

      便利なJavaScript開発ツール

      VSCode Windows 64 ビットのダウンロード

      VSCode Windows 64 ビットのダウンロード

      Microsoft によって発売された無料で強力な IDE エディター

      EditPlus 中国語クラック版

      EditPlus 中国語クラック版

      サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

      MantisBT

      MantisBT

      Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。