How do I fix the edges (top, right, bottom, left) on the second picture that they appear round?
Every other browser on the left side; Safari on the right side.
The code is the same as this CodePen:
.glow-on-hover {
width: 90%;
height: 0;
border: none;
z-index: 0;
outline: none;
background: #111;
cursor: pointer;
padding-bottom: 90%;
border-radius: 50%;
color: white;
position: relative;
height: 50px !important;
}
.glow-on-hover img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0.7;
transition: opacity .3s ease-in-out;
border-radius: 50%;
}
.glow-on-hover:active:after {
top: +2px;
left: +2px;
height: calc(100% - 4px);
}
.glow-on-hover:hover:before {
opacity: 1;
width: calc(100% + 12px);
height: calc(100% + 12px);
top: -6px;
left: -6px;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
color: white;
border-radius: 50%;
}
<div style="height:200px; width: 200px;">
<button class="glow-on-hover">
</div>
I have tried changing the margin, padding and size but none of these worked. Also overflow: visible does not work. Thanks in advance!
I have tried changing the margin, padding and size but none of these worked. Also overflow: visible does not work. Thanks in advance!
Related
here is the shape i want to do enter link description here
P.S.I am still learning the front-end stuff so could you pls help me with this assignment.
Here is the HTML code <div>Elzero</div>
here is the CSS code i tried to do with
* {
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: #eee;
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
}
::after {
content: "";
width: 200px;
height: 200px;
background-color: #03a9f4;
margin: 80px auto;
border-radius: 50%;
position: absolute;
transform: translate(-190px, -80px);
z-index: -1;
}
::before {
content: "";
width: 200px;
height: 200px;
background-color: #e91e63;
margin: 80px auto;
border-radius: 50%;
position: absolute;
top: 0px;
z-index: -2;
}
div:hover {
transition: all 0.5s;
transform: rotate(180deg);
}
As you are constrained to use just one div, this snippet builds on your idea of having the pseudo elements but creating them with conic-gradient backgrounds and the 'main' div having the light gray circular background created using a radial gradient. That way it creates these 3 shapes.
and overlays them to give the impression of 3/4 circles. It then uses CSS animation to rotate them on hover.
Obviously you will want to play with the dimensions, the animations timings and directions to get exactly what you want but this should give a start.
* {
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-image: radial-gradient(#eee 0 55%, transparent 55% 100%);
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
position: relative;
}
div::after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -2;
background-image: conic-gradient(#03a9f4 0deg 45deg, white 45deg 135deg, #03a9f4 135deg 360deg);
}
div::before {
content: "";
width: calc(100% - 10%);
height: calc(100% - 10%);
position: absolute;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
z-index: -1;
background-image: conic-gradient(#e91e63 0, #e91e63 225deg, white 225deg, white 315deg, #e91e63 315deg, #e91e63 360deg);
}
div:hover::after {
animation: rot .4s linear;
}
div:hover::before {
animation: rot .4s linear;
animation-delay: .1s;
animation-direction: reverse;
}
#keyframes rot {
0% {
transform: rotate(0);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(0);
}
100% {}
}
<div>Elzero
</div>
also here is example in less:
https://codepen.io/nikitahl/pen/XooBXd
if you want to use css here is a converter:
https://jsonformatter.org/less-to-css
I want to move the blue container around the circle (with it's bottom margin if possible). What I succeded until now is to move it by it's center(still not so smooth).
Does css has any option to translate & rotate in a circle direction? What I tried was to translate and rotate at the same time by using this three points (top, right, and top-right) of the circle, because I only need it to rotate 90 deg.
#mainContent{ position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle{
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container{
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 60px;
background: blue;
transform-origin: center;
transform: translate(-50%, -50%);
animation: orbit 3s linear infinite;
}
#keyframes orbit{
0% {
transform-origin: center;
transform: translate(-50%, calc(-50% - 50px)) rotate(0deg);
}
50%{
transform-origin: center;
transform: translate(calc(-50% + 35.35px), calc(-50% - 35.35px)) rotate(45deg);
}
100% {
transform-origin: center;
transform: translate(calc(-50% + 50px), -50%) rotate(90deg);
}
}
*{
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
You have to play with the transform-origin
#mainContent {
position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: 50%;
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: top center;
animation: orbit 3s linear infinite;
}
#keyframes orbit {
to {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
If i understand right, you need to set the translate-origin to the side which the blue rectangle reach the center of the red circle, check the snipet:
(hover the red circle to hide the blue rectangle)
div {
position: relative;
width: 200px;
height: 200px;
margin: 10em auto;
}
.round {
border-radius: 100%;
background: red;
}
.round:hover + .rectangle{background:transparent;}
.rectangle {
width: 100%;
height: 20px;
background: blue;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
margin: auto;
transform-origin: right;
transform: rotate(0deg);
animation: orbit 3s linear infinite;
}
.moon{
width:50px;height:50px;
background:white;
border:1px solid gray;
border-radius:100%;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#keyframes orbit {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(359deg);
}
}
<div>
<div class="round"></div>
<div class="rectangle">
<div class="moon"></div>
</div>
</div>
Don't center the element but put it on the top side and then adjust the transform-origin to make it at the center of the circle:
#mainContent {
position: relative;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: calc(50% - 80px); /* 80 = (60 + 100)/2*/
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: 50% calc(100% + 20px); /* 20 = (100 - 60)/2 */
animation: orbit 3s linear infinite;
}
#keyframes orbit {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
I'm making a HTML program where I want to have two circles traveling on a circular path, in opposite directions. That's the main idea. Here's my code so far (I followed this tutorial on circular movement coding, and stopped right at 8:35 when it's just the red circle in motion):
styles.css:
body{
margin: 0;
padding: 0;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line{
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Two Circles in Circular Motion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "circle">
<div class = "line"></div>
</div>
</body>
</html>
Right now I only have 1 circle. I want to create another one, and animate it so that it travels in the same circular path but in the opposite direction. I'm relatively new to CSS and HTML, so can someone please help? Thanks!
You can optimize your code and use only one div and its pseudo element for the small circles:
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #262626;
/* place both item to the center */
display:grid;
align-content:center;
justify-content:center;
}
.circle::before,
.circle::after {
content: '';
grid-area:1/1; /* both will overlap */
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
transform:rotate(0deg) translate(200px) rotate(0deg);
animation:animate 2s linear infinite;
}
.circle::after {
animation-direction:reverse; /* the opposite animation for the after */
background:blue;
}
#keyframes animate {
100% {transform:rotate(360deg) translate(200px) rotate(-360deg);}
}
<div class="circle">
</div>
Another solution is you could have made another line and used
animation-direction: reverse; on it.
Example;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line, .line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
.line2 {
animation-direction: reverse;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
You also could have created another line (like I did in my example (line2)), and bound a different animation keyframe to it like below;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate2 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
There are many possibilities to achieve what you are looking for :)
Because you say you are new to HTML and CSS I figured I'd show you some alternatives.
I am trying to create a pure CSS design of a sphere revolving(orbiting) around another sphere. Like a moon orbiting the sun to be precise. The image of the earth fits in properly into the sphere of earth. But the image of moon does not fit into the sphere of moon.
The image attached might help to understand my question better
Below is my CSS script
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: url(moon.jpg);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spin {
100% {
background-position: 100%;
}
}
Make this change content: "";
to background-image: url(moon.jpg);
and remove background: #fff from classname .center .earth .moon::before
body {
background: black;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: "";
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spin {
100% {
background-position: 100%;
}
}
<div class="center">
<div class="earth">
<div class="moon">
</div>
</div>
</div>
Please see the code in the code pen in this link.
I wasted two or three hours on this and decided to not to waste anymore.
I already tried the code right here and it is not working.
.coin {
background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
background-size: 100% 100%;
border-radius: 100%;
height: 100px;
margin: 50px auto;
position: relative;
width: 100px;
-webkit-transition: .5s linear;
-webkit-transform-style: preserve-3d;
}
.coin:after {
background-color: #a37131;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 45px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
-webkit-transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
}
.coin:before {
background-color: #a37131;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px;
-webkit-transform: translateZ(-5px);
}
.coin:hover {
-webkit-transform: rotateY(90deg);
}
All I want to know is how to apply thickness to the door visible to a user.
You need to add -webkit-transform-style: preserve-3d; to 'div.thumb' element.