I make my project in Bootstrap 4.
I have this code:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
justify-content: center;
padding-top: 5px;
position: fixed;
bottom: 25px;
right: 15px;
display: none;
z-index: 999;
transition: opacity .5s;
}
.back-to-top::before {
padding-top: 15px;
animation-name: animation-arrow;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
#keyframes animation-arrow {
0% {
padding-top: 0px
}
50% {
padding-top: 5px
}
100% {
padding-top: 10px
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button"><img src="images/back.png" class="img-fluid"> </a>
I'd like to move the images / back.png up / down arrow.
(I would like the picture to move slightly up / down) - but it doesn't work
How can I repair it?
check this out:
.back-to-top {
width: 36px;
height: 36px;
border-radius: 50%;
text-align: center;
border: 3px solid #c1c1c1;
position: fixed;
bottom: 25px;
right: 15px;
z-index: 999;
transition: opacity .5s;
}
.back-to-top > i {
width: 15px;
height: 15px;
margin-top: 15px;
display: inline-block;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDkwLjY4OCA0OTAuNjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0OTAuNjg4IDQ5MC42ODg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsOiNGRkMxMDc7IiBkPSJNNDcyLjMyOCwxMjAuNTI5TDI0NS4yMTMsMzQ3LjY2NUwxOC4wOTgsMTIwLjUyOWMtNC4yMzctNC4wOTMtMTAuOTktMy45NzUtMTUuMDgzLDAuMjYyDQoJYy0zLjk5Miw0LjEzNC0zLjk5MiwxMC42ODcsMCwxNC44MmwyMzQuNjY3LDIzNC42NjdjNC4xNjUsNC4xNjQsMTAuOTE3LDQuMTY0LDE1LjA4MywwbDIzNC42NjctMjM0LjY2Nw0KCWM0LjIzNy00LjA5Myw0LjM1NC0xMC44NDUsMC4yNjItMTUuMDgzYy00LjA5My00LjIzNy0xMC44NDUtNC4zNTQtMTUuMDgzLTAuMjYyYy0wLjA4OSwwLjA4Ni0wLjE3NiwwLjE3My0wLjI2MiwwLjI2Mg0KCUw0NzIuMzI4LDEyMC41Mjl6Ii8+DQo8cGF0aCBkPSJNMjQ1LjIxMywzNzMuNDE1Yy0yLjgzMSwwLjAwNS01LjU0OC0xLjExNS03LjU1Mi0zLjExNUwyLjk5NCwxMzUuNjMzYy00LjA5My00LjIzNy0zLjk3NS0xMC45OSwwLjI2Mi0xNS4wODMNCgljNC4xMzQtMy45OTIsMTAuNjg3LTMuOTkyLDE0LjgyLDBsMjI3LjEzNiwyMjcuMTE1bDIyNy4xMTUtMjI3LjEzNmM0LjA5My00LjIzNywxMC44NDUtNC4zNTQsMTUuMDgzLTAuMjYyDQoJYzQuMjM3LDQuMDkzLDQuMzU0LDEwLjg0NSwwLjI2MiwxNS4wODNjLTAuMDg2LDAuMDg5LTAuMTczLDAuMTc2LTAuMjYyLDAuMjYyTDI1Mi43NDQsMzcwLjI3OQ0KCUMyNTAuNzQ4LDM3Mi4yODEsMjQ4LjAzOSwzNzMuNDA4LDI0NS4yMTMsMzczLjQxNXoiLz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K) no-repeat;
}
.bounce {
animation: bounce 2s infinite;
}
#keyframes bounce {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(-10px);
}
}
<a id="back-to-top" href="#" class="back-to-top" role="button">
<i class="arrow bounce"></i>
</a>
Related
I've created two animations with CSS a clock and a bouncing ball. Separately they both work as intended, but once I put them in the same file the bouncing ball disappeared.
If I delete #keyframes rotation the clock stops working but the bouncing ball appears. Is there any way how to make both animations work?
.clock {
position: relative;
width: 400px;
height: 400px;
border: 10px solid;
border-radius: 50%;
}
#second {
position: absolute;
background: black;
width: 2px;
height: 180px;
margin: 20px 199px;
animation: rotation 60s infinite linear;
transform-origin: bottom left;
}
#minute {
position: absolute;
background: black;
width: 6px;
height: 140px;
margin: 60px 197px;
animation: rotation 3600s infinite linear;
transform-origin: bottom right;
}
#hour {
position: absolute;
background: black;
width: 10px;
height: 120px;
margin: 80px 195px;
animation: rotation 43200s infinite linear;
transform-origin: bottom left;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
.box {
position: relative;
}
.ball {
position: absolute;
height: 100px;
width: 100px;
border: 3px solid pink;
border-radius: 50%;
animation: bounce 2s infinite;
background: pink;
}
.step1 {
position: absolute;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
.step2 {
position: absolute;
top: 150px;
left: 220px;
margin-top: 20px;
height: 10px;
width: 220px;
background: cyan;
}
.step3 {
margin-top: 40px;
position: absolute;
left: 440px;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
#keyframes bounce {
from {margin: 100pxz 0px;}
to{margin: 50px 500px;}
0% {
transform: translateY(-30%);
}
12% {
transform: translateY(33%);
}
24% {
transform: translateY(-66%);
}
36% {
transform: translateY(33%);
}
48% {
transform: translateY(-20%);
}
100% {
transform: translateY(33%);
}
<div class="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div class="box">
<div class="step1"></div>
<div class="step2"></div>
<div class="step3"></div>
<div class="ball"></div>
</div>
It works fine, you're/were missing the closing brackets on your keyframes
.clock {
position: relative;
width: 400px;
height: 400px;
border: 10px solid;
border-radius: 50%;
}
#second {
position: absolute;
background: black;
width: 2px;
height: 180px;
margin: 20px 199px;
animation: rotation 60s infinite linear;
transform-origin: bottom left;
}
#minute {
position: absolute;
background: black;
width: 6px;
height: 140px;
margin: 60px 197px;
animation: rotation 3600s infinite linear;
transform-origin: bottom right;
}
#hour {
position: absolute;
background: black;
width: 10px;
height: 120px;
margin: 80px 195px;
animation: rotation 43200s infinite linear;
transform-origin: bottom left;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.box {
position: relative;
}
.ball {
position: absolute;
height: 100px;
width: 100px;
border: 3px solid pink;
border-radius: 50%;
animation: bounce 2s infinite;
background: pink;
}
.step1 {
position: absolute;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
.step2 {
position: absolute;
top: 150px;
left: 220px;
margin-top: 20px;
height: 10px;
width: 220px;
background: cyan;
}
.step3 {
margin-top: 40px;
position: absolute;
left: 440px;
top: 150px;
height: 10px;
width: 220px;
background: cyan;
}
#keyframes bounce {
from {
margin: 100pxz 0px;
}
to {
margin: 50px 500px;
}
0% {
transform: translateY(-30%);
}
12% {
transform: translateY(33%);
}
24% {
transform: translateY(-66%);
}
36% {
transform: translateY(33%);
}
48% {
transform: translateY(-20%);
}
100% {
transform: translateY(33%);
}
}
<div class="clock">
<div id="hour"></div>
<div id="minute"></div>
<div id="second"></div>
</div>
<div class="box">
<div class="step1"></div>
<div class="step2"></div>
<div class="step3"></div>
<div class="ball"></div>
</div>
So I know that two transforms don't apply at the same time. But at hover, they can replace each other?! Following is the code for a button I am trying to make, but when I hover, the properties don't seem to work! Also, the down-arrow I am trying to insert in there is also not exactly at the center. So due to which I have to use padding to center it!
.btn__bg {
position: absolute;
display: inline-block;
opacity: 0;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: 60px;
background-color: #000;
border-radius: 50%;
text-align: center;
animation: fadeInTop 1.2s forwards ease-out 1.5s;
transition: all .2s;
box-shadow: 0 4px 40px rgba(0,0,0,.3);
}
.btn__content {
font-size: 30px;
color: #fff;
font-weight: 100;
text-decoration: none;
line-height: normal;
}
.btn__down--text {
display: inline-block;
vertical-align: middle;
}
.btn__bg:hover {
transform: translate(-50%, -50%) scale(1.5);
}
.btn__bg:hover ~ .btn__down--text {
vertical-align: middle;
}
<div class="header__main--text">
<h1 class="header__heading--primary usr-res">welcome</h1>
<a href="#" class="btn btn__bg btn__content usr-res">
<span class="btn__down--text">↓</span>
</a>
</div>
Any help would be appreciated!
It's not really clear what you mean: The scaling works (?)
The vertical position of the arrow can be adjusted with a margin-top on the span which contains it.
.btn__bg {
position: absolute;
display: inline-block;
opacity: 1;
top: 75%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: 60px;
background-color: white;
border-radius: 50%;
text-align: center;
animation: fadeInTop 1.2s forwards ease-out 1.5s;
transition: all .2s;
box-shadow: 0 4px 40px rgba(0,0,0,.3);
}
.btn__content {
font-size: 30px;
color: #000;
font-weight: 100;
text-decoration: none;
line-height: normal;
}
.btn__down--text {
display: inline-block;
margin-top:0.3em;
}
.btn__bg:hover {
transform: translate(-50%, -50%) scale(1.5);
}
.btn__bg:hover ~ .btn__down--text {
vertical-align: middle;
}
<div class="header__main--text">
<h1 class="header__heading--primary usr-res">welcome</h1>
<a href="#" class="btn btn__bg btn__content usr-res">
<span class="btn__down--text">↓</span>
</a>
</div>
I started creating a code pen with the effect I want here: https://codepen.io/oli_js/pen/KKPGZLm?editors=1100
However, this pulse effect radiates out from the centre point, but I want the inner circle to be transparent and just have the effect radiate just from the border.
Does anyone know of any any magical CSS wizardry to do this?!
.pulse {
border-radius: 50px;
height: 80px;
left: 50%;
letter-spacing: 0.05em;
line-height: 50px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 80px;
}
.pulse:after {
-webkit-animation: pulse 2s infinite linear;
background: red;
border-radius: 50px;
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.button {
background: transparent;
border-radius: 100% 100%;
width: 40px;
height: 40px;
left: 50%;
border:2px solid red;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
#-webkit-keyframes pulse{
0% {transform:scale(0.5);
opacity:0;}
33% {transform:scale(0.8);
opacity:1;}
100% {transform:scale(1);
opacity:0;}
}
<div class="pulse">
<div class="button"> </div>
</div>
You can do it with shadow effect too like this..
.ripple{
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
border:2px red solid;
animation: pulse 2s infinite;
}
#-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(255,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255,0,0, 0);
}
}
<div class="ripple"></div>
My animation works but after one turn, the square rotate of 45 deg,
I don't understand why.
https://codepen.io/igamanstudio/pen/ZPYWWO
.card {
/* Add shadows to create the "card" effect */
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 300px;
height: 300px;
margin: 150px auto;
}
.anim-square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: spin 20s linear infinite;
}
.losange-wrap {
position: relative;
}
.losange-1 {
position: absolute;
overflow: hidden;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
transform: rotate(45deg);
transform-origin: center;
background: red;
border: 2px solid blue;
animation: invert-spin 22.5s linear infinite;
}
.losange-1 .img {
position: relative;
width: 30px;
height: 30px;
}
.losange-1 .img:before {
position: absolute;
content: '';
display: block;
z-index: 999;
top: -15px;
left: -15px;
width: 60px;
height: 60px;
background: url("https://loremflickr.com/60/60/girl/all") center center;
transform: rotate(-45deg);
transform-origin: center;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes invert-spin {
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
<div class="card">
<img src="http://placekitten.com/300/200" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
<div class="anim-square">
<div class="losange-wrap">
<div class="losange-1">
<div class="img"></div>
</div>
</div>
</div>
</div>
transform: rotate(45deg);
transform-origin: center;
background: red ;
border: 2px solid blue;
animation: invert-spin 22.5s linear infinite;
First you need to set the same duration for both animation then you need to use rotate(-315deg) for the image since you are setting rotate(45deg). The difference should be 360deg like the main container that will animate from 0deg to 360deg
.card {
/* Add shadows to create the "card" effect */
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 300px;
height: 300px;
margin: 150px auto;
}
.anim-square {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
//background: rgba(0,0,0,0.3);
animation: spin 5s linear infinite;
}
.losange-wrap {
position: relative;
}
.losange-1 {
position: absolute;
overflow: hidden;
top: -15px;
left: -15px;
width: 30px;
height: 30px;
transform: rotate(45deg);
transform-origin: center;
background: red;
border: 2px solid blue;
animation: invert-spin 5s linear infinite;
}
.losange-1 .img {
position: relative;
width: 30px;
height: 30px;
}
.losange-1 .img:before {
position: absolute;
content: '';
display: block;
z-index: 999;
top: -15px;
left: -15px;
width: 60px;
height: 60px;
background: url('https://loremflickr.com/60/60/girl/all') center center;
transform: rotate(-45deg);
transform-origin: center;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
.container {
padding: 2px 16px;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes invert-spin {
100% {
-webkit-transform: rotate(-315deg);
transform: rotate(-315deg);
}
}
<div class="card">
<img src="http://placekitten.com/300/200" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
<div class="anim-square">
<div class="losange-wrap">
<div class="losange-1">
<div class="img"></div>
</div>
</div>
</div>
</div>
I have already created the modal in css, but when I try changing the transition so that it pops more like a modal instead of fading in, it doesn't work. I've tried changing the duration and the transition type but it doesn't seem to apply. Am I using the wrong transition?
See fiddle: https://jsfiddle.net/mtbh24uL/
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
My goal: to have more of a pop up effect like a real javascript modal. I basically need to create a modal like you see in the following picture. I'm not sure what the best approach is or the best plugin.
You could define a CSS animation for that and call this animation when you are clicking on the button. You can achieve this with adding the following CSS code. This is only an example to give you a rough idea of how your effect could look like. From this point you can even optimize and finetune the animation.
CSS
.overlay:target .popup{
animation: popup 0.7s;
}
#keyframes popup {
0%{
transform: scale(1);
}
50%{
transform: scale(1.4);
}
60%{
transform: scale(1.1);
}
70%{
transform: scale(1.2);
}
80%{
transform: scale(1);
}
90%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
/* transition: all 0.3s ease-out; */
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup:after {
content: '';
position: absolute;
bottom: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent white transparent;
}
.overlay:target .popup {
animation: popup 0.7s;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px) {
.box {
width: 70%;
}
.popup {
width: 70%;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(1.4);
}
60% {
transform: scale(1.1);
}
70% {
transform: scale(1.2);
}
80% {
transform: scale(1);
}
90% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
In answer to getting the curved arrow, you can use the :after or :before pseudo element. Something like this will achieve the desired effect:
CSS
.popup:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-left: 24px solid white;
border-radius: 33px 0;
top: -18px;
left: 20px;
width: 30px;
height: 34px;
}