I have the following code for background clip using css3. I am trying to use animation so that the text eventually turns white and background simultaneously gets revealed. But I can't get it right. Is it even possible to do this with just css?
.text {
background-image: url('images/car.jpg');
font-size: 90px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-fill-color: transparent;
background-clip: text;
animation-name: flip;
animation-duration: 4s;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes flip {
0% {
background-image: url('images/car.jpg');
font-size: 250px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-fill-color: transparent;
background-clip: text;
}
100% {
color: #fff;
background-image: url('images/car.jpg');
font-size: 200px;
}
}
<div class="text"><b>Lorem Ipsum</b>
</div>
You may take a look at mix-blend-mode:
body {margin:0;}
.text {
min-height:100vh;
background-image: url('http://blog.hdwallsource.com/wp-content/uploads/2015/05/toy-car-wallpaper-39199-40102-hd-wallpapers.jpg');
background-size:cover;
font-size: 20vw;
}
b {
display:inline-block;
box-shadow:inset 0 0 0 1000px white, 0 0 0 1000px white;
mix-blend-mode:screen;
animation: flip 4s linear forwards;
}
#keyframes flip {
75% {
color: #fff;
}
100% {
color: #fff;
font-size: 15vw;
box-shadow:inset 0 0 0 1000px rgba(255,255,255,0), 0 0 0 2000px rgba(255,255,255,0);
}
}
<div class="text"><b>Tiny mini</b>
</div>
pen to play with: http://codepen.io/gc-nomade/pen/rWrvKP
Related
I'm trying to create shine effect on my text like here: https://codepen.io/avstorm/pen/WNrMqjG
My problem is that my text is colorized and the shine in the codepen above is working only when the text is in one color.
I tried my best but got here so far:
https://codepen.io/naoranhaisy/pen/RwZQeeN
HTML:
<span class="shine logoText">
<span>Peer</span>
<span>Anfon</span>
<span>infrustructre</span>
</span>
CSS:
.logoText span:first-child {
color: #4361ad;
font-size: 30px;
}
.logoText span:nth-child(2) {
color: #dfdfdf;
font-size: 29px;
}
.logoText span:nth-child(3) {
font-size: 16px;
color: #dfdfdf;
margin-right: 5px;
}
.shine {
text-align: center;
background: linear-gradient(to right, #222, #fff);
background-size: 15px 100%;
background-clip: border-box;
background-clip: initial;
background-repeat: no-repeat;
background-position: 0 0;
animation: shimmer 2s infinite ease-in-out;
-webkit-animation: shimmer 2s infinite ease-in out;
}
#keyframes shimmer {
0% {
background-position: top left;
}
100% {
background-position: top right;
}
}
(As you can see it's not really good...)
Can any css master can help me? Thank you!
I need to make a lazyload that actually works like one that is in Facebook. I created a css class that has this.
#keyframes placeholder {
0% { background-position: -600px 0 }
100% { background-position: 600px 0 }
}
.text-loader{
color: transparent !important;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeholder;
animation-timing-function: linear;
background: #eeeeee;
background: linear-gradient(to right, #eee 8%, #419AF3 18%, #eee 33%);
background-size: 1200px 100px;
min-height: 30px;
width: 100%;
margin: 5px 0 5px 0;
border-radius: 3px;
&::selection{
color: transparent;
}
}
And wrote some scripts to make it look like it actually works.
var agalar = $("span, p, h1, h2, h3");
$(".contents").find(agalar).each(function(){
$(this).addClass("text-loader");
});
$(window).on("load",function(){
$(agalar).removeClass("text-loader");
});
Everything "seems" to work but I am not sure if it actually works. (I am making an infinite scrolling section so I guess will need to pull content from back-end), the thing is how can I make this a real lazyload?
I have some text that I want to animate. The text should change color from white to green from top to bottom. I want the new color to basically drop from the top.
body{
background-color: lightblue;
}
#test {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 5s;
font-size: 40px;
color:white;
}
#keyframes changeColor {
0% {
color: linear-gradient(to bottom, white, #2E7D32 50%) bottom;
}
100% {
color: green;
}
}
<div id="test">The</div>
An Example
Source for the below snippet. The following animation occurs on hover, however this is just an example to demonstrate what I wish to achieve. Some changes I require are that the font colour should change from top to bottom and it should use keyframes(animation).
#import url("https://fonts.googleapis.com/css?family=Barlow:800&display=swap");
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Barlow", sans-serif;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
}
a {
position: relative;
display: inline-block;
font-size: 2em;
font-weight: 800;
color: royalblue;
overflow: hidden;
background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
background-position: 100%;
transition: background-position 275ms ease;
text-decoration: none;
}
a:hover {
background-position: 0 100%;
}
Link Hover
background + background-clip might be what you look for:
because of a demo (below) it could not be just a comment :) .
reset the gradient to your needs if you need a sharp color transition
body{
background:lightblue;
}
#test {
animation: changeColor infinite linear 5s forwards;
font-size: 40px;
color:transparent;
background:linear-gradient(to bottom, #2E7D32 , white, #2E7D32 ) bottom left/ 100% 600% ;
background-clip:text;
}
#keyframes changeColor {
to { background-position: top left;
}
}
<div id="test">The</div>
I figured out how to accomplish, so I'm answering my own question.
let titleIDThe = document.getElementById("titleIDThe");
titleIDThe.classList.add("animateColor");
.animateColor {
animation: changeColor infinite;
animation-timing-function: ease-out;
animation-duration: 10s;
background-image: linear-gradient(to bottom, red 50%, #2E7D32 50%);
background-position: 0% 0%;
background-size: 100% 200%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
width: 50vw;
height: 50vh;
font-size: 30px;
}
#keyframes changeColor {
0% {
background-position: 0% 0%;
}
20% {
background-position: 0% -100%;
}
30% {
background-position: 0% -100%;
}
50% {
background-position: 0% 0%;
}
100% {
background-position: 0% 0%;
}
}
<span id="titleIDThe">The</span>
I'm currently developing a website for a group, and I'm trying to animate some dots in the word "Loading..." so they blink. I've got the animation working, but for some reason the dots aren't showing up unless I highlight the text with my cursor.
#keyframes blink {
0% {
opacity: .2;
}
20% {
opacity: 1;
}
100% {
opacity: .2;
}
}
.text span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
.text {
width: 300px;
height: 70px;
font-size: 30px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
The "Loading" part of the text is showing up fine though. Any ideas?
Thanks
You need a color to fall back on for the transparency.
As it stands now, it's already transparent, so the opacity does nothing. If you have a color to go to (not just transparent), it'll show that the relevant percentage, mixed with the gradient. I've done that in the example below using black as the "background".
#keyframes blink {
/* changes the values here */
0% {
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
20% {
-webkit-text-fill-color: rgba(0, 0, 0, 1);
}
100% {
-webkit-text-fill-color: rgba(0, 0, 0, 0.2);
}
}
.text span {
animation-name: blink;
animation-duration: 1.4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
.text span:nth-child(2) {
animation-delay: .2s;
}
.text span:nth-child(3) {
animation-delay: .4s;
}
.text {
width: 300px;
height: 70px;
font-size: 30px;
background: -webkit-linear-gradient(#ffffff, rgb(183,183,183));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
color: white;
}
<div class="text">Loading<span>.</span><span>.</span><span>.</span></div>
I have a progress element like so:
body {
background: grey;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
height: 25px;
width: 95%;
position: relative;
top: 10px;
right: 50%;
left: 2.5%;
}
progress[value]::-webkit-progress-bar {
background-color: rgba(255,255,255,0.2);
border-radius: 50px;
border: solid;
border-width: 0px;
border-color: rgba(255,255,255,0.1);
}
progress[value]::-webkit-progress-value {
background-image: repeating-linear-gradient(
45deg,
#fff,
#fff 10px,
#f9f9f9 10px,
#f9f9f9 20px
);
border-radius: 50px;
-moz-animation-name: move;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-duration: 0.4s;
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: move;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 0.4s;
animation-delay: 1.5s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 1.5s;
animation-play-state: running;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<progress max="100" value="80"></progress>
And I have used CSS animations, however for some reason they do not work. I want the stripes to move horizontally, infinitely. Is there any reason to why this doesn't work?
Note - <progress> is not well supported by IE. See this for a complete guide to make it work across browsers. Below demo is the simplified animation without <progress> element.
body {
background-color: #666;
}
div {
background-color: #999;
border-radius: 30px;
height: 30px;
}
div > div {
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
background-size: 28px 30px;
animation: progress 2s linear infinite;
width: 50%;
}
#keyframes progress {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
<div><div></div></div>