ラベル

【HTML,CSS】HTML,CSSで写真を虹色に変化させる方法




どうも管理人のよういちです。今回はHTML,CSSを使って写真を七色に変化させる方法を紹介します。
完成サンプルはこちら↓


JMY




使用する写真は何でもおっけーです。また写真の上に文字を入れるのも同時に試してみましょう。

【HTML】
test.html
  1.  
  2. <html>
  3. <head>
  4. <title>JMY official site</title>
  5. <link rel="stylesheet" href="text.css">
  6.  
  7. <meta name="viewport" content="width=device-width">
  8.  
  9. <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700|Fredericka+the+Great|Mystery+Quest" rel="stylesheet">
  10.       
  11. </head>
  12. <body>
  13.     <div class="graphic">
  14.     <h1>JMY</h1>    
  15. </body>
  16. </html>
  17.  
【CSS】
text.css
  1.  
  2. .graphic
  3.  {
  4.   height: 70vh;
  5.   width:auto;
  6.   background: linear-gradient(to bottom, rgba(166,217,0,0.15) ,rgba(255,68,84,0.15))1000% no-repeat, url(background.jpg) 0 0 / cover no-repeat;;
  7.   mix-blend-mode: multiply;
  8.   animation: huerotator 6s infinite alternate;  
  9.  }
  10.  
  11.  
  12. @keyframes huerotator 
  13. {
  14.   0%{
  15.       -webkit-filter: hue-rotate(0deg);
  16.       filter: hue-rotate(0deg);
  17.  }
  18.  100%{
  19.       -webkit-filter: hue-rotate(360deg);
  20.       filter: hue-rotate(360deg);
  21.    }
  22. }
  23.  
  24. /* JMY の位置調整 */
  25.  .graphic h1
  26. { 
  27.  font-size: 10vw;
  28.  display: flex;
  29.  align-items: center;
  30.  justify-content: center;
  31.  font-family: 'Fredericka the Great', cursive;
  32.  letter-spacing: 3vw;
  33.  z-index: 2;
  34.  color: #fff;
  35.  position: absolute;
  36.  top: 0;
  37.  left: 0;
  38.  bottom: 0;
  39.  right: 0;
  40. }
  41.  
ラベル:

コメント

コメントを投稿

人気の投稿