【HTML,CSS】HTML,CSSで写真を虹色に変化させる方法
どうも管理人のよういちです。今回はHTML,CSSを使って写真を七色に変化させる方法を紹介します。
完成サンプルはこちら↓
JMY
使用する写真は何でもおっけーです。また写真の上に文字を入れるのも同時に試してみましょう。
【HTML】
test.html
<html>
<head>
<title>JMY official site</title>
<link rel="stylesheet" href="text.css">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch:400,700|Fredericka+the+Great|Mystery+Quest" rel="stylesheet">
</head>
<body>
<div class="graphic">
<h1>JMY</h1>
</body>
</html>
text.css
.graphic
{
height: 70vh;
width:auto;
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;;
mix-blend-mode: multiply;
animation: huerotator 6s infinite alternate;
}
@keyframes huerotator
{
0%{
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100%{
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
/* JMY の位置調整 */
.graphic h1
{
font-size: 10vw;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fredericka the Great', cursive;
letter-spacing: 3vw;
z-index: 2;
color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
コメント
コメントを投稿