質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

479閲覧

バーを円形に動かしつつ、背後にグラデーションカラーをつけたい。

fjaiofjawiefjaw

総合スコア210

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/28 18:49

編集2018/03/28 19:21

動画のように、青いグラデーションとともにバーを円形に回転させたいです。
https://www.youtube.com/watch?v=u-BWupHzTnU

バーを回転させる所までは出来ました。
https://jsfiddle.net/ghost7492/gd6rLzcs/6/

グラデーションを付けるアイディア、
何かないでしょうか。

svg+cssで出来そうなので、今、試し中です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

svg+cssで出来そうなので、今、試し中です。

CSSやSVGにおいてもこの挙動は全くお手軽ではありません.

CSSやSVGでは線形グラデーションと放射状(円形)グラデーションしかサポートしないからです.そのため, 円弧に沿ったグラデーションを表現するには何らかの細工を要します.

  • 線形グラデーションを使ってグラデーション部をごまかす
  • グラデーションは別途ラスタ画像としておく

例えば前者であれば次のように.

HTML

1<svg width="200px" height="200px"> 2 <defs> 3 <linearGradient id="lg" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="200" y2="200"> 4 <stop offset=".3" stop-opacity="1"/> 5 <stop offset=".5" stop-opacity="0"/> 6 </linearGradient> 7 <mask id="mask" stroke="white"> 8 <circle id="base" cx="100" cy="100" r="80" transform="rotate(-90,100,100)" stroke-width="20" fill="none"/> 9 </mask> 10 </defs> 11 <rect width="100" height="200" fill="url(#lg)" mask="url(#mask)"/> 12 <use xlink:href="#base" stroke="var(--bar)" stroke-dasharray="3,1000"/> 13</svg>

CSS

1svg{ 2 animation: rotate 60s linear 0s infinite; 3 --bar: navy; 4 --stroke: blue; 5} 6stop{ 7 stop-color: var(--stroke); 8} 9@keyframes rotate{ 10 0%{transform: rotatea(0deg);} 11 100%{transform: rotate(360deg);} 12}

https://jsfiddle.net/defghi1977/qn34hLcp/

投稿2018/03/29 00:29

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fjaiofjawiefjaw

2018/03/29 18:51 編集

前回の質問に引き続き、ご回答いただき誠にありがとうございます。 自分なりに頂いたコード、いじってみました。 1番目の方法は、はっきりいって自分には、難しそうです。 2番目の方が簡単な気がしましたので、そちらでやりたいと思います。 下記サイトで画像の適用方法を知りましたので、頑張ってみます。 https://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa 蛇足ですが、 svgの書き方、大変勉強になりました。 ありがとうございました。
guest

0

ゴリ押css

rotateするとz-indexとかpositionの指定おかしくなるの初めて知った。

html

1<!doctype html> 2<html lang="jp"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7html, body { 8 height: 100%; 9 background: #ffd740; 10 position: relative; 11} 12 13.clock { 14 width: 192px; 15 height: 192px; 16 border-radius: 50%; 17 background: #fff; 18 position: absolute; 19 top: 50%; 20 left: 50%; 21 transform: translate(-50%, -50%); 22} 23 24#bar { 25 width: 192px; 26 height: 192px; 27 background: radial-gradient(farthest-side at top right, #07f, #FFF); 28 transform: translate(-50%, -50%); 29 background-size: 50% 50%; 30 background-repeat: no-repeat; 31 border-radius: 50%; 32 position: absolute; 33} 34#bar:before, #bar:after { 35 content: ""; 36 display: block; 37} 38#bar::before { 39 width: 2px; 40 height: 20px; 41 border-radius: 4px; 42 background: #0175ad; 43 position: absolute; 44 bottom: 89%; 45 left: 50%; 46 transform: translate(-50%, 0); 47} 48 49#bar::after { 50 width: 4px; 51 height: 4px; 52 background: red; 53 border: 2px solid red; 54 position: absolute; 55 top: 50%; 56 left: 50%; 57 margin-top: -4px; 58 margin-left: -4px; 59} 60 61.gra { 62 width: 153px; 63 height: 153px; 64 margin: 20px; 65 border-radius: 50%; 66 background: #f1f1f1; 67 position: absolute; 68 top: 0; 69 left: 0; 70} 71 72 73 </style> 74</head> 75<body> 76 <div class="clock"> 77 <div id="bar"> 78 <div class="gra"></div> 79 </div> 80 </div> 81<script> 82 //https://codepen.io/chrisota/pen/JoYWQM 83 84// Yay for SO - http://stackoverflow.com/questions/23847310/css-and-jquery-analog-clock-smooth-animation 85//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback) 86window.requestAnimFrame = (function () { 87 return window.requestAnimationFrame || 88 window.webkitRequestAnimationFrame || 89 window.mozRequestAnimationFrame || 90 function (callback) { 91 window.setTimeout(callback, 1000 / 60); 92 }; 93})(); 94 95//initialize the clock in a self-invoking function 96(function clock() { 97 const bar = document.getElementById("bar"); 98 const start = new Date(); 99 //set up a loop 100 (function loop() { 101 requestAnimFrame(loop); 102 draw(); 103 })(); 104 //position the hands 105 function draw() { 106 const now = new Date(); 107 const diffInMil = (now.getTime() - start.getTime());// difference in milliseconds 108 const h = (diffInMil / (1000 * 60 * 60));//hours 109 const m = (h * 60);//minutes 110 const s = (m * 60) * 3;//seconds 111 //rotate the hands accordingly 112 bar.style.webkitTransform = "rotate(" + (s * 6) + "deg)"; 113 } 114})(); 115 </script> 116</body> 117</html>

投稿2018/03/29 05:55

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fjaiofjawiefjaw

2018/03/29 18:08 編集

回答ありがとうございます。 cssのtransform rotateやscaleを設定すると、自動的に重なるので、びっくりしました。 上から目線の様で大変恐縮ですが、発想がすごいなと思いました。 ただ、影のグラデーション部分を円の半分以上までつけたいです。 ここからは、自分で試行錯誤してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問