Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

CSSのみアニメーション-境界線の半径と透明な背景で円を描く

背景が透明でborder-radiusの円を描くには、次のCSSを使用します-

body {
   background: repeating-linear-gradient(45deg, white 0px, green 100px);
   height: 400px;
   background-size: 400px 400px;
   background-repeat: no-repeat;
}
html {
   height: 100%;
}
#box {
   position: absolute;
   width: 400px;
   height: 400px;
   border: solid blue 2px;
   animation: colors 5s infinite;
}
#demo {
   width: 50%;
   height: 100%;
   right: 0px;
   position: absolute;
   overflow: hidden;
   transform-origin: left center;
   animation: cliprotate 18s steps(2) infinite;
   -webkit-animation: cliprotate 18s steps(2) infinite;
}
.circlehalf {
   box-sizing: border-box;
   height: 100%;
   right: 0px;
   position: absolute;
   border: solid 20px transparent;
   border-top-color: blue;
   border-left-color: blue;
   border-radius: 50%;
}
#clipped {
   width: 200%;
   animation: rotate 8s linear infinite;
   -webkit-animation: rotate 8s linear infinite;
}
#fixed {
   width: 100%;
   transform: rotate(145deg);
   animation: showfixed 18s steps(2) infinite;
   -webkit-animation: showfixed 18s linear infinite;
}
@-webkit-keyframes cliprotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@keyframes cliprotate {
   0% {transform: rotate(0deg);}
   100% {transform: rotate(360deg);}
}
@-webkit-keyframes rotate {
   0% {transform: rotate(-45deg);}
   100% {transform: rotate(135deg);}
}
@keyframes rotate {
   0% {transform: rotate(-45deg);}
   100% {transform: rotate(135deg);}
}
@-webkit-keyframes showfixed {
   0% {opacity: 0;}
   49.9% {opacity: 0;}
   50% {opacity: 1;}
   100% {opacity: 1;}
}
以下はHTML5キャンバスです-

<div id = "box">
   <div id = "demo">
      <div class = "circlehalf" id = "clipped">
      </div>
   </div>
   <div class = "circlehalf" id = "fixed">
   </div>
</div>

  1. JavaScriptでCSS変数を取得および設定する

    getComputedStyle（）メソッドは、ターゲット要素に適用されたすべてのスタイルを含むオブジェクトを提供します。 getPropertyValue（）メソッドは、計算されたスタイルから目的のプロパティを取得するために使用されます。 setProperty（）は、CSS変数の値を変更するために使用されます。 例 次の例は、JavaScriptを使用してCSS変数を取得および設定する方法を示しています。 <!DOCTYPE html> <html> <head> <style> :root {    --outerCo

  2. CSSを使用して透明な背景テキストで画像を作成するにはどうすればよいですか？

    以下は、CSS-を使用して透明な背景テキストで画像を作成するためのコードです。 例 <!DOCTYPE html> <html> <head> <meta name="viewport" imageContent="width=device-width, initial-scale=1"> <style> * {    box-sizing: border-box; } body {    font-family: Arial;