it's been a long time I've last coded in html and css, that was before that lovely html5 and css3. So, in the early 2000's we made a logo in gif, what was so cool, and I've just found it on my PC. It would be nice to convert to pure css, instead of limited-size-gif but I have no idea how to start it.
Here is my animated gif
Could you give me first impressions, which css3 attributes should I choose for it?
Thanks
You will want to use the animation property with custom keyframes probably. Here is a rough example. I didn't spend much time on the animation. Thats your job ;)
https://codepen.io/bygrace1986/pen/POypXX
HTML
<div class="logo" data-logo="wp"></div>
CSS
.logo {
position: relative;
width: 2em;
height: 2em;
font-size: 5em;
font-family: arial;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
.logo::before, .logo::after {
content: attr(data-logo);
position: absolute;
z-index: -1;
left: 0;
}
.logo::before {
color: red;
animation: rotate 1s infinite;
}
.logo::after {
color: black;
animation: rotate 1s infinite reverse;
}
#keyframes rotate {
0% {
left: 0;
top: 0;
}
25% {
left: 10%;
}
50% {
top: 10%;
}
75% {
left: 0;
}
100% {
top: 0;
}
}
Related
thanks for reading and offering help.
I assume my CSS code shouldn't be too complicated, however, it does not behave the way I want.
Expected result: when hovering over the button, there is a background area "folding up" (no background color to dark background color).
Actual results:
Works in Chrome (Version 88.0.4324.146), however, there is a flicker to it, like it is rebuilding again and again. This happens especially when hovering coming from the top. Looks alright when doing it from the bottom and rather slow.
I also saw that it seems to not really work in FF (Dev Edition 86.0b9). Sometimes it pops up, but if it does, it only does so once. Refreshing the browser window is not helping either.
I already tried to have a <div> around it and apply the hover animation to it, to fix it with prefixes... so far I couldn't make it work (smoothly), the issue always persisted.
So, this is the code now, which can also be found in this codepen example
html:
<button class="btn">
click
</button>
CSS:
.btn {
height: 48px;
width: 200px;
text-align: center;
text-transform: uppercase;
border: none;
border-bottom: 1px solid steelblue;
position: relative;
color: steelblue;
background: transparent;
::before {
bottom: 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: -1;
}
&:hover,
&:focus {
animation: one 0.25s linear;
background-color: steelblue;
color: whitesmoke;
opacity: 1;
transform-origin: 50% 100%;
}
#keyframes one {
0% {
transform: perspective(1000px) rotateX(90deg);
}
100% {
transform: perspective(1000px) rotateX(0);
}
}
}
If this is a duplicate, it means I didn't find the helping answer yet, will be happy for any solutions and hints.
The problem also happens in Chrome. It happens because you are changing the perspective of the button, which will change its "bounding box".
So when you mouse over the bounding box the animation will change the bounding box, and then the mouse is not over the bounding box, so the animation stops, but then the mouse is over the bounding box again, so the animation starts, and so on.
To fix this, create a container around the button, and make the countainer change the button perspective, instead of the button changing the perspective itself. The container will retain its bounding box when yo do this:
.bcg {
display: flex;
justify-content: center;
align-items: center;
background: whitesmoke;
height: 100vh;
}
.btncontainer {
display: inline-block;
}
.btncontainer:hover .btn, .btncontainer:focus .btn {
animation: one 0.25s linear;
background-color: steelblue;
color: whitesmoke;
opacity: 1;
transform-origin: 50% 100%;
}
#keyframes one {
0% {
transform: perspective(1000px) rotateX(90deg);
}
100% {
transform: perspective(1000px) rotateX(0);
}
}
.btn {
height: 48px;
width: 200px;
text-align: center;
text-transform: uppercase;
border: none;
border-bottom: 1px solid steelblue;
position: relative;
color: steelblue;
background: transparent;
}
.btn::before {
bottom: 0;
content: "";
height: 100%;
left: 0;
opacity: 0;
position: absolute;
right: 0;
z-index: -1;
}
<div class="bcg">
<div class="btncontainer">
<button class="btn">
click
</button>
</div>
</div>
I come back here looking for your wisdom. I have been working on a website and I did some css to make a width transform animation effect behind some text, and it works fine using hover, buuut I would like to have the same effect only with an automatic animation (with some delay that works with the scroll), but saddly I don't know how.
Any ideas ?
Thanks so much !
here the website:
http://231e47.com/accueil-cf/
The hover effect is on the text "we are here!"
Here my CSS:
<style>
.highlight { display: inline-block;
color: #343434;
text-decoration: none;
position: relative;
z-index: 0;
}
.highlight::after {
position: absolute;
z-index: -1;
bottom: 10px;
left: 0%;
transform: translateX(0%);
content: '';
width: 0px;
height: 43%;
background-image: linear-gradient(120deg, #48d1de 0%, #84fab0 180%);
transition: all 250ms;
}
.highlight:hover {
color: #343434;
}
.highlight:hover::after {
height: 43%;
width: 108%;
}
</style>
THANKS A LOT !
I have a CSS marquee, and it runs good, but is not 100% smooth.
Can I edit the code below to run more smooth?
I have tried different animation: marquee Xs linear infinite speeds, but no luck.
<style>
/* Make it a marquee */
.marquee {
width: 100%;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
background-color: #000000;
bottom: 0px;
}
.marquee span {
display: inline-block;
padding-left: 100%;
text-indent: 0;
animation: marquee 15s linear infinite;
background-color: #000000;
color: white;
bottom: 0px;
}
/* Make it move */
#keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
/* Make it pretty */
.scroll {
padding-left: 1.5em;
position: fixed;
font: 50px 'Verdana';
bottom: 0px;
left: 0px;
height: 10%;
}
</style>
HTML
<p class="scroll marquee"><span id="scrolltext"></span></p>
add id="marquee" to your span. remove the animation line from css and add this javascript at the end of your code:
var marqueePosition = 0;
var speed = 10; //smaller number means faster movement
var e = document.getElementById('marquee');
function moveMarquee() {
marqueePosition--;
if(marqueePosition < (-1*e.offsetWidth)) marqueePosition = 0;
e.style["-webkit-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["-moz-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["-ms-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["-o-transform"] = "translate("+marqueePosition+"px, 0px)";
e.style["transform"] = "translate("+marqueePosition+"px, 0px)";
window.setTimeout(function() {
requestAnimationFrame(moveMarquee);
}, speed);
}
moveMarquee();
it is because of a long time setted in animation. you need to change the time to make it smoother. but it depends on the width of the marquee too. I suggest to you using the javascript to do this.
if you set that it should ride for example 200px in 10 seconds it cant be smooth as there is a small framerate :D in JS you can set the speed independently on the marquee width
I want to display content on mouse enter with a flip effect as shown in this sample site http://www.taboola.com/
When you hover to the Drive Traffic section a blue colored div is flipped over. How can I do this with CSS3?
The answer is right there in the code. Use your browser's inspection tools to find the relevant code per element. Here on StackOverflow we normally don't give freebies, i.e. we expect you to do some effort and not simply come here asking for this or that. Now that you know this, I extracted the relevant code from the source code. It's up to you to make it fit your needs.
.cta3 li {
perspective: 1000;
padding: 0;
display: block;
width: 33.3%;
text-align: center;
float: left;
position: relative;
}
.cta3 li .cta3 {
opacity: 0;
transform-origin: bottom;
transform: rotateX(90deg);
transition: 400ms;
width: 100%;
position: absolute;
bottom: 0;
background: #3570CC;
text-align: center;
z-index: 2000;
font-size: 15px;
padding: 20px;
}
.cta3 li:hover .cta3 {
bottom: -10px;
opacity: 1;
transform: rotateX(0deg);
}
I'm working on a site with a knotted rope-style bar that expands to show more information on hover, and I'm having issues getting the animation to look right. (Here's a staging link: http://couchcreative.co/tcc/).
Currently, the bar for the first step will move down to the bottom of the box before it animates upwards to its new position, while I want it to just move up to its new position on hover without starting at the bottom of the hover box. Can anyone help explain why this is happening? The relevant CSS starts with the ".look" class.
Apologies if I'm not explaining this right, but hopefully when you visit the site you'll see what I mean about the animation looking a bit… off. Thanks for the help!
I would rework your HTML structure to make it more semantic and less repetitious.
Demo: http://jsfiddle.net/krmn4/5/
HTML:
<a href="/testicularcancer/" class="look">
<figure><img src="http://couchcreative.co/tcc/img/look.png" /></figure>
<div class="bar"></div>
<div class="off">
<h4>Look</h4>
</div>
<div class="on">
<h4>Relax your scrotum.</h4>
<p>Check your testicles just after you’ve had a bath or shower, when the muscles in the scrotum are relaxed, making it easier for you to feel any lumps, growths or tenderness. Stand in front of the mirror. Look for any swelling on the skin of your scrotum.</p>
<span>Learn More</span>
</div>
</a>
CSS:
.look {
position: absolute;
bottom: 0;
left: 0;
width: 235px;
overflow: hidden;
/* optional styling */
color: #000;
text-align: center;
text-decoration: none;
}
.look h4 {
/* optional styling */
line-height: 48px;
font-size: 20px;
font-weight: bold;
}
.look .bar {
height: 48px;
background: url(http://couchcreative.co/tcc/img/step_1.png) 0 0 repeat-x;
margin: -24px 0 0; /* half of height */
/* necessary so figure img doesn't overlap */
position: relative;
z-index: 1;
}
.look figure,
.look .off,
.look .on {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
transition: all 300ms linear;
height: 0;
opacity: 0;
overflow: hidden;
}
.look figure {
/* optional styling */
background-color: #b2d5e6;
padding: 12px;
margin: 0;
}
.look .off {
height: 48px;
opacity: 1;
}
/* hover state */
.look:hover .off {
height: 0;
opacity: 0;
}
.look:hover figure {
height: 120px; /* or however tall it needs to be */
opacity: 1;
}
.look:hover .on {
height: 220px; /* or however tall it needs to be */
opacity: 1;
}