Shihomemo

Keep learning everyday

[shihomemo-blog1]

BACK TO TOP (ページトップへ戻るボタン色々）

上下にゆらゆら揺れる矢印が、 クリックすると顔に変わり 1回バウンドしてから ページトップに戻る動きと同時に 上方向のページトップへ動くアニメーション。

[shihomemo-blog1]

SVGで波線

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none" id="svg-bg"> <path class="sp-on" d="M0,0 v40 q3,3 6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 v-40 Z" fill="rgb(255, 183, 20)"></path> <path class="pc-on" d="M0,0 v60 q3,9 6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 t6,0 v-60 Z" fill="rgba(255, 183, 20, 0.4)"></path> </svg>

html, body, #wrap { height: 100%; } #wrap { position: relative; } #svg-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }

※引用したものをラザニア用に編集したもの

[shihomemo-blog1]

Traversing （トラバース）

$(".clickArea").click(function (){ $(this).next().slideToggle(); });

[shihomemo-blog1]

もっと見るボタン

<script> $(function(){ //まずスイッチをOFFにする var flg = 'off'; //btnをクリックしたらON $('.btn').on('click',function(){ if(flg === 'off'){ $(this).text('閉じる'); flg = 'on'; }else{ $(this).text('もっと見る'); flg = 'off'; }; }); }); </script>

[shihomemo-blog1]

矢印CSS

.arrow {    display: inline-block;  position: relative;  padding: 10px 80px;  border: 1px solid #fff;  color: #fff;  text-decoration: none; }

.arrow::after {  content: "";  display: block;  position: absolute;  top: 0;  bottom: 0;  right: 10%;  margin: auto;    width: 45px;    height: 10px;    border-bottom: 1px solid #fff; } .arrow::before {  content: "";  display: block;  position: absolute;  top: 0;  bottom: -10px;  right: 10%;  margin: auto;    width: 20px;    height: 10px;    border-top: 1px solid #fff;    -webkit-transform: rotate(20deg);    transform: rotate(20deg); }

[shihomemo-blog1]

縦書きCSS

horizontal-tb横書き、かつ上から下に行が流れる。 vertical-rl縦書き、かつ右から左に行が流れる。 vertical-lr縦書き、かつ左から右に行が流れる。

[shihomemo-blog1]

meta refresh (リダイレクト)

<pre> <meta http-equiv="refresh" content="秒数;URL=URL"> </pre>

単純なサイト引っ越しの際に使う。 フィッシングと同じ動きのため、暫くしたら消した方が良い。

[shihomemo-blog1]

<hr> 水平線 境界線 ライン

hr { height: 5px; background-color: red; width: 60%; border: none; }

//自分で使った方

hr{ height: 2px; background-color: #ff4e00; width: 50%; margin:100px auto; border: 0; }

[shihomemo-blog1]

CSS アンダーライン(下線）

ストライプのアンダーライン(下線）

.stripe{  position: relative;  padding: 0.3em; } .stripe:after {  content: '';  position: absolute;  left: 0;  bottom: 0;  width: 100%;  height: 7px;  background: repeating-linear-gradient(-45deg, skyblue, skyblue 2px, white 2px, white 4px); }