前提・実現したいこと
はじめまして。検索してもわからなかったため利用させていただきます。
添付した動画を見ていただいたほうがわかりやすいのですが、再読み込みするたびに消しているリストや虫眼鏡がちらついてしまいます。
また、ホバーした時の動作をもっとゆっくりにしたいのですがアニメーションをつける動作がわかりません。
実現したいこととしましては、
・ページの再読み込みをする度にナビバーの項目が動かないようにしてほしい。
・フォームの虫眼鏡が動かないようにしてほしいが、クリックしたときに動画のようにゆっくり伸びるようにしてほしい。
ホバーした時に0.5秒遅らせて表示が出るようにしたい。
これらをすべてHTMLとCSSで作りたいのですが可能でしょうか。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ind2</title> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/custom.css"> 9</head> 10<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> 11<body> 12 <header> 13 <div class="container"> 14 <div class="header__title"> 15 <h1><a href="">Write</a></h1> 16 <p class="name">書くためのテーマ</p> 17 </div> 18 <nav class="header__nav"> 19 <ul class="menu"> 20 <li><a href="" class="after">ホーム</a> 21 <ul> 22 <li><a href="">→カスタマイズ</a></li> 23 </ul> 24 </li> 25 <li><a href="" class="after">ページ</span></a> 26 <ul> 27 <li><a href="">アイキャッチ画像なしのページ</a></li> 28 <li><a href="">ページ(全幅テンプレート)</a></li> 29 </ul> 30 </li> 31 <li><a href="">タイポグラフィー</a></li> 32 <li><a href="">お問い合わせ</a></li> 33 </ul> 34 </nav> 35 <div class="search-list"> 36 <form action=""> 37 <input class="search" name="" type="text" placeholder="検索…"> 38 </form> 39 </div> 40 </div> 41 </header> 42 <img src="img/cropped-nicole-honeywill-730102-unsplash.jpg"> 43</body> 44</html> 45 46
CSS
1*{box-sizing: border-box} 2 3body{ 4 max-width:1040px; 5 margin: 0 auto; 6 font-family: Georgia, '游明æœ', YuMincho, 'Hiragino Mincho ProN', Meiryo, serif; 7 line-height: 1.8; 8} 9 10h1 a{ 11 font-weight: 700; 12 font-size: 36px; 13 line-height: 1.3; 14} 15 16p{font-size: 18px;} 17 18.container{ 19 height: 100px; 20 width: 1040px; 21 margin-top: 50px; 22 margin-bottom: 60px; 23 display: flex; 24 justify-content: space-between; 25} 26 27.header__title{ 28 vertical-align: middle; 29 margin-top: 10px; 30} 31 32 33a{ 34 color: #111111; 35 font-family: Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif;; 36 text-decoration: none; 37 display: block; 38 line-height: 52px; 39 font-size: 17px; 40 text-align: left; 41 cursor: pointer; 42} 43 44a:hover{ 45color: #c49029; 46} 47 48nav{ 49 padding-top: 40px; 50 margin-left: 156px; 51} 52 53 54ul{ 55 display: flex; 56 list-style: none; 57 padding: 0; 58 margin: 0; 59} 60 61ul.menu li{ 62 padding-right:30px; 63 display: inline-block; 64 list-style-type: none; 65 position:relative; 66} 67 68.after::after{ 69 display: inline-block; 70 font: normal 14px Georgia, 游明朝, YuMincho, "Hiragino Mincho ProN", Meiryo, serif; 71 -webkit-font-smoothing: antialiased; 72 font-family: "Font Awesome 5 Free"; 73 font-weight: 900; 74 content: "\f107"; 75 position: relative; 76 right: -8px; 77 bottom: 1px; 78} 79 80ul.menu ul{ 81 display: none; 82 margin: 0; 83 padding: 0; 84 position:absolute; 85} 86 87ul.menu ul li{ 88 padding: 10px 20px 0px 20px; 89 width: 188px; 90 background-color: #fff; 91 border: solid 1px gray; 92} 93 94ul.menu li:hover ul{ 95 display: block; 96} 97 98.search:focus{ 99 width:200px; 100 height: 34px; 101 border:1px solid #e0e0e0; 102 background-color: white; 103 cursor: text; 104} 105 106.search{ 107 height: 34px; 108 width: 0; 109 background: url(../img/search.jpeg) no-repeat left center ; 110 background-size: 26px; 111 padding-left: 36px; 112 font-size: 16px; 113 border:1px solid #e0e0e0; 114 z-index:5; 115 position: absolute; 116 right:0; 117 top: -5px; 118 outline: none; 119 border: none; 120 cursor: pointer; 121 transition: all 0.5s; 122} 123 124.search-list{ 125 height: 40px; 126 display: inline; 127 float:right; 128 position:relative; 129}
試したこと
初心者なのでどれを試せばいいのかわかりませんでした。
補足情報(FW/ツールのバージョンなど)
Visual Studio Codeのバージョン: 1.52.1を使用しています。
Chromeで動作確認をしています。
[追記]サーバーには繋いでおらず、ローカルのみで動作確認をしていますが関係があるのでしょうか。
以上、よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー