本当の完成カスタムcssです@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); body { font-family: 'New Tegomin', serif; } .icon { animation: 0.5s linear rotation2; } body { animation: 0.5s linear rotation3; } .ti { animation: 0.5s linear rotation3; } .xyfXN._button { animation: 0.5s linear rotation4; } body { animation: 0.5s linear rotation4; } .body { animation: 0.5s linear rotation1; } .x6ccQ { animation: 0.5s linear rotation2; } .xkr7J { animation: 0.5s linear rotation4; } .x5yeR { animation: 0.5s linear rotation5; } .xBwhh { animation: 0.5s linear rotation5; } .xD2mX.xCFgx { animation: 0.5s linear rotation5; } .xeHR5.xxPg1{ animation: 0.5s linear rotation2; } ._button.xArFY { display: inline-block; animation: rotation6 .1s infinite; } ._button.xDRXD { display: inline-block; animation: rotation6 .1s infinite; } @keyframes rotation1 { 0%{ transform: translateX(-50px); opacity: 0; } 100%{ opacity: 100; } } @keyframes rotation2 { 0%{ transform: translateY(-50px); opacity: 0; } 100%{ opacity: 100; } } @keyframes rotation3 { 0%{ opacity: 0; -ms-filter: blur(6px); filter: blur(6px); } 100%{ opacity: 100; } } @keyframes rotation4 { 0%{ transform: translateY(50px); opacity: 0; } 100%{ opacity: 100; } } @keyframes rotation5 { 0%{ transform: translateX(50px); opacity: 0; } 100%{ opacity: 100; } } @keyframes rotation6 { 0% {transform: translate(0px, 0px) rotateZ(0deg)} 25% {transform: translate(2px, 2px) rotateZ(1deg)} 50% {transform: translate(0px, 2px) rotateZ(0deg)} 75% {transform: translate(2px, 0px) rotateZ(-1deg)} 100% {transform: translate(0px, 0px) rotateZ(0deg)} }
遂にカスタムCSSが完成!!
使い難いがなんとか使える不思議なCSS@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
body {
font-family: 'New Tegomin', serif;
}
.icon {
animation: 0.5s linear rotation2;
}
body {
animation: 0.5s linear rotation3;
}
.ti {
animation: 0.5s linear rotation3;
}
.xyfXN._button {
animation: 0.5s linear rotation4;
}
body {
animation: 0.5s linear rotation4;
}
.body {
animation: 0.5s linear rotation1;
}
@keyframes rotation1 {
0%{
transform: translateX(-50px);
opacity: 0;
}
100%{
opacity: 100;
}
}
@keyframes rotation2 {
0%{
transform: translateY(-50px);
opacity: 0;
}
100%{
opacity: 100;
}
}
@keyframes rotation3 {
0%{
opacity: 0;
-ms-filter: blur(6px);
filter: blur(6px);
}
100%{
opacity: 100;
}
}
@keyframes rotation4 {
0%{
transform: translateY(50px);
opacity: 0;
}
100%{
opacity: 100;
}
}
マトモに使える頭のおかしいカスタムcss@import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap'); body { font-family: 'New Tegomin', serif; } .icon { animation: 0.5s linear rotation2; } @keyframes rotation2 { 0%{ transform: translateY(-1000px); opacity: 0; } 100%{ opacity: 100; } } .ti { animation: 0.5s linear rotation3; } @keyframes rotation3 { 0%{ font-size: 0px; transform: rotateX(180deg); opacity: 0; } 100%{ opacity: 100; } }
GNU social JP is a social network, courtesy of GNU social JP管理人. It runs on GNU social, version 2.0.2-dev, available under the GNU Affero General Public License.
All GNU social JP content and data are available under the Creative Commons Attribution 3.0 license.