検索
ホームページウェブフロントエンドhtmlチュートリアル漫画のシーンの車のアニメーション効果を作成するための純粋な CSS3_html/css_WEB-ITnose

はじめに今日は、昨夜作成した CSS3 アニメーション効果、漫画のシーンの車のアニメーションを共有します。 CSS3 アニメーションに触れる前は、Flash を使用して簡単なアニメーション効果を実現していました。しかし、CSS3 の登場以来、CSS3 アニメーションはモバイル端末でますます使用されるようになりました。今日の共有はPCケースです。私がやったのは大規模なシーンであり、その理由は偶然漫画の絵を見たからです。そこで、突然ひらめき、鉄が熱いうちにCSS3アニメーションを使って自分のアイデア通りに実現してみました。次に、この楽しい共有を始めましょう。

プレビュー 症例を熱心に学習したい場合は、まず症例の効果を確認する必要があります。 したがって、下の写真は私が記録したGIF画像です。まず最初に:

はい、上の画像はすべて CSS3 を使用して作成されています。Flash で作成されているように感じますか (笑)。 ! !この画像にはまだフレームのドロップや遅れがあります。ここでオンライン表示アドレスを提供します: http://www.jr93.top/cartoonAnimation/index.html すべての主要なブラウザと互換性を持たせましたが、アニメーションが不安定になることがあります。すぐにぼやけてしまいますが、これはブラウザのレンダリングの問題だと暫定的に考えています。

要点OK、次にこのケースの各パーツの効果を注意深く分析しますが、実際にはシーンには窓や木などの小さなパーツが多数繰り返されていることがわかります。 、山など。そこで、そのうちの 1 つを今回の説明の対象として選びます。さらに、このケースの作業量はまだ多すぎるため、すべてのステップを詳細に説明することはしません。主なことは、誰もが自分で考えて学ぶことができるように私のアイデアを説明することです。記事の最後に、このケースの利用を容易にするための github アドレスをお知らせします。早速本題に入りましょう!まず、HTML 構造を構築する必要があります。そのためには、シーンの独自の分析に基づいてそれを知る必要があります。そうすれば、HTML 構造が自然に構築されます。この場合の HTML コードは次のとおりです。

<div class="container">    <!-- 山 -->    <div class="mountain">        <div class="part_one"></div>        <div class="part_two"></div>        <div class="part_three"></div>        <div class="part_four"></div>    </div>    <!-- 道路 -->    <div class="load"></div>    <!-- 石头 -->    <div class="stone"></div>    <!-- 太阳 -->    <div class="sun">        <div class="sunshine"></div>        <div class="center_sun"></div>    </div>    <!-- 云朵 -->    <div class="cloud"></div>    <!-- 房子 -->    <div class="house">        <!-- 旗子部分 -->        <div class="flag_whole">            <!-- 旗杆 -->            <div class="pole"></div>            <!-- 旗面 -->            <div class="flag">                <span class="star"></span>                <span class="littlestar star1"></span>                <span class="littlestar star2"></span>                <span class="littlestar star3"></span>                <span class="littlestar star4"></span>            </div>        </div>        <!-- 墙面 -->        <div class="wall"></div>        <!-- 房顶 -->        <div class="roof"></div>        <!-- 二楼 -->        <div class="secondFloor">            <!-- 窗户 -->            <div class="window w1">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window w2">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window w3">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window w4">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>        </div>        <div class="firstFloor">            <!-- 窗户 -->            <div class="window f-w1">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <div class="window f-w2">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>            <!-- 门 -->            <div class="door">                <!-- 门梁 -->                <div class="door_over"></div>                <!-- 门主体 -->                <div class="door_body">                    <div class="leftDoor"></div>                    <div class="rightDoor"></div>                </div>            </div>            <div class="window f-w3">                <!-- 窗户帐篷 -->                <div class="window_tent"></div>                <!-- 窗体 -->                <div class="window_body"></div>            </div>        </div>    </div>    <!-- 树 -->    <div class="trees">        <div class="leftTree"><span></span></div>        <div class="leftTree l2"><span></span></div>        <div class="rightTree"><span></span></div>        <div class="rightTree r2"><span></span></div>    </div>    <!-- 第一辆汽车 -->    <div class="car">        <div class="car_body">            <div class="car_top1"></div>            <div class="car_top2"></div>            <div class="car_win1"></div>            <div class="car_win2"></div>            <div class="car_bottom1"></div>            <div class="car_bottom2"></div>        </div>        <div class="frontWheel"></div>        <div class="endWheel"></div>        <div class="exhaust"></div>    </div>    <!-- 第二辆车(浅绿色) -->    <div class="car2">        <div class="car2_top"></div>        <div class="car2_win"></div>        <div class="car2_bottom">            <div class="car2_light1"></div>            <div class="car2_light2"></div>            <div class="car2_light3"></div>        </div>        <div class="car2_frontWheel"></div>        <div class="car2_endWheel"></div>    </div></div>

十分ですか? ブログ投稿が非常に長くなりそうな予感がするので、しばらくお待ちください。次のステップはすべて CSS3 によって行われるため、HTML 構造を詳しく見る必要があります。まず、最も外側のコンテナのスタイルを設定しましょう:

.container{    width: 800px;    height: 450px;    margin: 20px auto;    position: relative;    background: rgb(187,235,255);    border:1px solid #ddd;    box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1);    overflow: hidden;}

次に、ステップごとに説明します。 : パート 1: 空、陸 この部分は単純すぎるため、一番外側のコンテナですでに空の背景色が設定されているため、陸の部分のみを描画する必要があります:

.load{    position: relative;    top:290px;    background: rgb(27,121,160);    height: 160px;}

見てください。効果:

パート 2: 山、太陽、白い雲 最初に行うことは山を描くことです。上のアニメーションからわかるように、山です。角度を含む三角形の形状はすべて異なります。実際に作成するときは、長方形を描いてからそれを回転させて完成させる必要はありません。最も重要な点は角度です。このために、skew() メソッドを使用しました。最初の山脈のコードは次のとおりです。

.mountain .part_one{    width:300px;    height: 300px;    background: rgb(106,207,255);    position: absolute;    -webkit-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    -moz-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    -o-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    -ms-transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);    transform:rotate(30deg) skew(-20deg) translate3d(120px,200px,0);}

Baiyun の場合、これは簡単です。 1 つの div と 2 つの疑似要素を追加するだけです。コードは次のとおりです。

.cloud{    display: inline-block;    width: 40px;    height: 40px;    border-radius: 50%;    background: #fff;    position: absolute;    left:-60px;    top:20px;}.cloud:before{    content: '';    display: inline-block;    width: 40px;    height: 16px;    border-radius: 16px 0 0 16px;    background: #fff;    position: absolute;    bottom:0;    left:-12px;}.cloud:after{    content: '';    display: inline-block;    width: 40px;    height: 28px;    border-radius: 0 28px 28px 0;    background: #fff;    position: absolute;    bottom:0;    right:-16px;}

ここでは、太陽の絞りを使用します。晴天を鮮やかに映し出すキュートなアプローチ。具体的には、グラデーションの背景を使用し、影を追加してアニメーション効果を実装しました。コードは次のとおりです。

.sun{    position: relative;}.sun .center_sun{    width:40px;    height:40px;    background: rgb(255,255,123);    border-radius: 50%;    position: absolute;    top:-120px;    right:160px;}.sun .sunshine{    width:60px;    height:60px;    background: #f67e28; /* Old browsers */    background: -moz-radial-gradient(center, ellipse cover, #f67e28 0%, #f67e28 50%, #f4bf9a 60%, #f4bf9a 100%); /* FF3.6+ */    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f67e28), color-stop(50%,#f67e28), color-stop(60%,#f4bf9a), color-stop(100%,#f4bf9a)); /* Chrome,Safari4+ */    background: -webkit-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* Chrome10+,Safari5.1+ */    background: -o-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* Opera 12+ */    background: -ms-radial-gradient(center, ellipse cover, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* IE10+ */    background: radial-gradient(ellipse at center, #f67e28 0%,#f67e28 50%,#f4bf9a 60%,#f4bf9a 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f67e28', endColorstr='#f4bf9a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    position: absolute;    top:-130px;    right:150px;    border-radius:50%;    box-shadow: 0 0 2px 4px rgba(246,126,40,0.3);}

レンダリングは次のとおりです。

パート 3: ハウスとツリーハウス このパートは基本的にレイアウトです。これは難しいことではありませんが、HTML 構造をより合理化するためのテクニックもたくさんあります。家を屋根、旗、壁、2 階、1 階に分けました。 1. 壁: これは家の基本的な部分であり、ここでは詳しく説明しません。 2. 屋根: これは枠のある小さな正方形を 45 度回転させたもので、単純なので詳細は説明しません。 3. 旗: 問題は実際には旗の五芒星ですが、シーン内では表示が比較的小さいため、五芒星の描画は正確である必要はありません。おおよそ五芒星の形をしており、特にその隣にある 4 つの小さな星がそうです。 4. 2 階: ここで 2 階の高さを設定し、次にその上部と下部の境界線を設定して、1 階と 2 階の遮蔽層を実現します。窓については、2 つの疑似要素、特に上の日よけを上手に使用する必要があります。ウィンドウ。4 つの白い垂直バーは、2 つの疑似要素の左右の境界線を使用して実装されます。 5. 1 階: 1 階も 2 階と基本的に同じです。ドアを描く原理は同じなので、詳細は説明しません。樹木については、白い雲を描くだけなので詳細は割愛します。レンダリングは次のとおりです。

この部分には多くのコードがあるため、アップロードしません。github にアクセスしてダウンロードしてください。パート 4: 2 台の車と石の車自体を描画する鍵となるのは、skew() メソッドを使用することです。その他はレイアウトの問題なので、コードを直接指定します。

.stone{    width:30px;    height: 16px;    background: #333;    border-radius: 16px 16px 5px 5px;    position: absolute;    top:410px;    left:550px;    box-shadow: 1px 1px 1px #333;}.car{    position: absolute;    left:900px;    top:340px;    z-index:12;}.car .car_body{    position: absolute;}.car .car_top1,.car .car_top2{    width:45px;    height: 35px;    border-top-left-radius:10px;    border-top-right-radius:10px;    background: rgb(246,126,40);    position: absolute;    left:0;    top:0;    -webkit-transform:skew(24deg);    -moz-transform:skew(24deg);    -o-transform:skew(24deg);    -ms-transform:skew(24deg);    transform:skew(24deg);}.car .car_top1{    left:-29px;    top:0px;    -webkit-transform:skew(-24deg);    -moz-transform:skew(-24deg);    -o-transform:skew(-24deg);    -ms-transform:skew(-24deg);    transform:skew(-24deg);}.car .car_win1,.car .car_win2{    width:24px;    height:24px;    background: #fff;    border-top-left-radius:10px;    position: absolute;    left:13px;    top:6px;    -webkit-transform:rotate(80deg) skew(-10deg);    -moz-transform:rotate(80deg) skew(-10deg);    -o-transform:rotate(80deg) skew(-10deg);    -ms-transform:rotate(80deg) skew(-10deg);    transform:rotate(80deg) skew(-10deg);}.car .car_win1{    left:-22px;    -webkit-transform:rotate(0deg) skew(-10deg);    -moz-transform:rotate(0deg) skew(-10deg);    -o-transform:rotate(0deg) skew(-10deg);    -ms-transform:rotate(0deg) skew(-10deg);    transform:rotate(0deg) skew(-10deg);}.car .car_win1:after,.car .car_win2:after{    content:'';    display:inline-block;    width:10px;    height: 24px;    background: #fff;    position: absolute;    left:16px;    top:0;    -webkit-transform:skew(10deg);    -moz-transform:skew(10deg);    -o-transform:skew(10deg);    -ms-transform:skew(10deg);    transform:skew(10deg);}.car .car_win2:after{    top:9px;    left:7px;    -webkit-transform:rotate(-90deg) skew(-10deg);    -moz-transform:rotate(-90deg) skew(-10deg);    -o-transform:rotate(-90deg) skew(-10deg);    -ms-transform:rotate(-90deg) skew(-10deg);    transform:rotate(-90deg) skew(-10deg);}.car .car_bottom1,.car .car_bottom2{    width:74px;    height:33px;    background: rgb(246,126,40);    border-top-left-radius: 24px 20px;    border-bottom-left-radius: 3px;    border-bottom:8px solid rgb(186,188,187);    position: absolute;    top:34px;    left:-66px;    -webkit-transform:skew(-4deg);    -moz-transform:skew(-4deg);    -o-transform:skew(-4deg);    -ms-transform:skew(-4deg);    transform:skew(-4deg);}.car .car_bottom2:before{    content: 'JR';    font-size:12px;    font-weight: bolder;    color:#fff;    position: absolute;    top:5px;left:45px;}.car .car_bottom1:after{    content: '';    display: inline-block;    background: rgb(247,244,111);    width:10px;    height: 16px;    border-radius: 6px/8px;    position: absolute;    top:11px;    left:6px;}.car .car_bottom2{    height: 36px;    border-top-left-radius: 0;    border-top-right-radius: 13px 17px;    border-bottom-right-radius: 3px;    left:0px;    top:31px;    -webkit-transform:skew(8deg);    -moz-transform:skew(8deg);    -o-transform:skew(8deg);    -ms-transform:skew(8deg);    transform:skew(8deg);}.car .frontWheel,.car .endWheel{    width:34px;    height:34px;    border-radius: 50%;    background:#333;    position: absolute;    top:55px;    left:-40px;}.car .endWheel{    left:20px;}.car .frontWheel:after,.car .endWheel:after{    content: '';    display: inline-block;    width:14px;    height: 14px;    background: #fff;    border-radius: 50%;    position: absolute;    top:50%;    left:50%;    margin-top: -7px;    margin-left: -7px;}.car .exhaust{    width:18px;    height:18px;    background: rgba(0,0,0,0.3);    border-radius: 8px 8px 8px 1px;    position: absolute;    left:80px;    top:55px;    opacity: 0;}.car2{    position: absolute;    left:900px;    top:250px;    z-index:10;}.car2 .car2_top{    width:55px;    height: 40px;    border-top-left-radius:15px;    border-top-right-radius:10px;    background: rgb(117,191,135);    position: absolute;    left:-29px;    top:0px;    -webkit-transform:skew(-20deg);    -moz-transform:skew(-20deg);    -o-transform:skew(-20deg);    -ms-transform:skew(-20deg);    transform:skew(-20deg);}.car2_top:after{    content: '';    display: inline-block;    width:12px;    height: 40px;    background: rgb(117,191,135);    -webkit-transform:skew(20deg);    -moz-transform:skew(20deg);    -o-transform:skew(20deg);    -ms-transform:skew(20deg);    transform:skew(20deg);    position: absolute;    left:48px;}.car2 .car2_win{    width:42px;    height:30px;    background: #fff;    border-top-left-radius:10px;    position: absolute;    top:5px;    left:-22px;    -webkit-transform:rotate(0deg) skew(-20deg);    -moz-transform:rotate(0deg) skew(-20deg);    -o-transform:rotate(0deg) skew(-20deg);    -ms-transform:rotate(0deg) skew(-20deg);    transform:rotate(0deg) skew(-20deg);}.car2_win:after{    content: '';    display: inline-block;    width:12px;    height: 30px;    background: #fff;    -webkit-transform:skew(20deg);    -moz-transform:skew(20deg);    -o-transform:skew(20deg);    -ms-transform:skew(20deg);    transform:skew(20deg);    position: absolute;    left:36px;}.car2 .car2_bottom{    width: 180px;    height: 56px;    background: rgb(117,191,135);    border-top-left-radius: 50px;    border-bottom-left-radius: 50px;    position: absolute;    top:39px;    left:-60px;}.car2 .car2_bottom .car2_light1{    width:14px;    height: 20px;    background: rgb(229,230,88);    border-radius: 20px/30px;    position: absolute;    left:-3px;    top:18px;}.car2 .car2_bottom .car2_light2,.car2 .car2_bottom .car2_light3{    width:12px;    height: 12px;    background: rgb(229,230,88);    border-radius: 50%;    position: absolute;    right:-8px;    top:12px;}.car2 .car2_bottom .car2_light3{    top:36px;}.car2 .car2_frontWheel,.car2 .car2_endWheel{    width:40px;    height:40px;    background: #333;    border-radius: 50%;    position: absolute;    top:75px;    left:-30px;}.car2 .car2_endWheel{    left:60px;}.car2 .car2_frontWheel:after,.car2 .car2_endWheel:after{    content: '';    display: inline-block;    width:20px;    height: 20px;    background: rgb(216,107,82);    border-radius: 50%;    position: absolute;    top:50%;    left:50%;    margin-left: -10px;    margin-top: -10px;}

主要还是讲解一下动画效果实现的原理:1.浅绿色货车就没什么好说的了,直接改变left值,一直开过去就行了。2.橙色汽车动画步骤分析:首先汽车比较快地从远处往餐厅方向开过来,不小心磕碰到路面上的石头,由于汽车速度有点快,惯性大,所以汽车后半身往上翘,同时汽车往前推行了一点点,当汽车掉下来的时候,由于重力的原因,车身会有缓动的效果,表现为掉落时车身向下压,然后回弹,此车司机撞懵了一下,然后重启汽车,开始汽车前行有点故障,然后过一小会就恢复正常,最后就开走了。大致思路就是这样,具体实现肯定是慢慢琢磨的过程了,要让动画效果合乎常理而又不失趣味性,才是真正考验的地方。

以上所有步骤完成了的话,那么久实现了最初预览时的效果了。如果想学习整个案例的话,可以前往我提供的github地址下载:https://github.com/JR93/cartoonAnimation

希望对大家学习CSS3有所帮助!

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

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ: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ページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

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ヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター