I want to do when I hover square. It will do rainbow border animation
html:
<div class="contanier">
<div id="contect1" class="contect">
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
</div>
<div id="contect2" class="contect">
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
</div>
<div id="contect3" class="contect">
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
</div>
<div id="contect4" class="contect">
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
</div>
<div id="contect5" class="contect">
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
</div>
</div>
css:
*{
font-family: "Bebas Neue";
margin: 0px;
}
p {
font-size: 70px;
padding-left: 10px;
/*text-shadow: -2px 5px 15px #C2C2C2;*/
padding-bottom: 10px;
color: #F1F6F9;
}
.menu {
background-color: #212A3E;
width: 100%;
}
.games{
width: 100%;
height: 1800px;
position: relative;
overflow: hidden;
}
.tabs {
display: flex;
/*border-bottom: 2px solid #000000;*/
}
.tabs button{
background: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 35px;
padding: 5px 10px;
/*text-shadow: -2px 5px 15px #C2C2C2;*/
transition: 0.2s;
color: #F1F6F9;
}
.tabs button:hover {
color: #9BA4B5!important;
transform: scale(1.1);
}
.tabs button:active {
color:#767d8a!important;
}
#sqaure {
width: 360px;
height: 450px;
/*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
align-content: center;
border: 3px solid #9BA4B5;
margin-top: 35px;
margin-left: 35px;
margin-right: 35px;
transition: 0.2s;
background-color: #212A3E;
border-radius: 15px;
position: relative;
}
#sqaure:after {
}
#sqaure:hover {
transform: scale(1.05);
border-radius: 15px;
}
h1 {
text-align: center;
margin-top: 20px;
/*text-shadow: 4px 3px 14px rgba(0,0,0,0.35);*/
font-weight: normal;
font-size: 40px;
background-color: transparent;
color: #F1F6F9;
}
.contect {
grid-template-columns: 1fr 1fr 1fr 1fr;
display: none;
align-items: center;
background-color: #394867;
}
#contect1 {
display: grid;
}
#dst{
color: #F1F6F9;
}
.tabs button:focus {
outline: none;
}
html{
scroll-behavior: smooth;
}
I want something with this gradient:
background: conic-gradient(
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
Thank you very much for all your help. You really helped me.
background: conic-gradient(
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
I’d need to know what effect you want but here’s a start.
2 Likes
Like a 3px rounded border of moving rainbow animtion
Just on my way out so back this afternoon.
I’m not sure this is what you meant either
1 Like
https://youtu.be/cJillURnY2U like this but only when i hover square and like 3px border
My demo looks much the same as that example. I’ve just changed the background colors to match.
I’m not sure what you mean by 3px border as you won’t see much of that rainbow effect over 3px.
What is it that you need that’s different?
1 Like
Its cool!
Everything seems to be in place for that to happen.
Is that what you meant?
1 Like
ron122
May 15, 2023, 4:46pm
10
Yes, Thank You very much!
1 Like
ron122
May 15, 2023, 6:59pm
11
Its cool but there a small problem its cuts and the its not override the original border
#sqaure {
width: 360px;
height: 450px;
/* box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px; */
align-content: center;
border: 3px solid #9BA4B5;
margin-top: 35px;
margin-left: 35px;
margin-right: 35px;
transition: 0.2s;
background-color: #212A3E;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#sqaure:before {
content: "";
position: absolute;
left: -10rem;
right: -10rem;
top: -10rem;
bottom: -10rem;
z-index: -2;
pointer-events: none;
}
#sqaure:hover:before {
animation: rotate 2s linear infinite forwards;
background: conic-gradient(
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
}
#sqaure:hover {
transform: scale(1.05);
border-radius: 20px;
}
#sqaure:after {
content: "";
position: absolute;
left: 3px;
top: 3px;
right: 3px;
bottom: 3px;
background: #212A3E;
z-index: -2;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
PaulOB
May 15, 2023, 8:19pm
12
If you want it on your tabs layout then it could be done like this.
The border-radius needs to go on the after element as well to allow some of the border to show. The 3px border is removed from the square but placed as a background-color on the :before element. You can see it in action in the demo above.
.square {
border-radius: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
padding: 10px;
overflow:hidden;
position:relative;
}
.square:before {
content: "";
position: absolute;
left: -10rem;
right: -10rem;
top: -10rem;
bottom: -10rem;
margin: auto;
background:#9BA4B5;
z-index: -2;
pointer-events: none;
}
.square:hover:before {
animation: rotate 2s linear infinite forwards;
background: conic-gradient(
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
}
.square:after {
content: "";
position: absolute;
left: 3px;
top: 3px;
right: 3px;
bottom: 3px;
background: white;
z-index: -2;
pointer-events: none;
border-radius:15px;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
1 Like
ron122
May 16, 2023, 6:57am
14
Thank you verg much i will check when i come home
1 Like
PaulOB
May 16, 2023, 12:54pm
15
This should really be a new topic but if you are talking about this library then you can just download it and link to the js and css in any normal way that you would for any other files. Then use the class as directed in the documentation.
Or you could just ink to the dns files and use straight away from anywhere.
CSS:
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
JS
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
1 Like
ron122
May 16, 2023, 1:15pm
16
Its not working I don’t know why
PaulOB
May 16, 2023, 1:28pm
17
The codepen is working? Or did you mean your page is not working?
I’d need to see your full code to work out why.
In my codepen All i did was add the link to the CDN files.
i.e. these 2: scripts go in your page.
CSS: In the head of the page.
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
JS: Preferably just before the closing body tag at the bottom of the page.
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Then initialise the script after that last one.
<script>
AOS.init();
</script>
Then ad the data attributes for the effect you want.
e.g.
<div class="test" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000">Testing
</div>
Then style the box as you want.
I just did this for example.
.test {
width: 40%;
min-height: 200px;
background: red;
color: #fff;
border-radius: 2px;
margin: 12vh auto;
padding: 10px;
}
That more or less all you have to do as a basic start.
1 Like
ron122
May 16, 2023, 3:27pm
18
I do all what u said and its still not working the aos the site is working but animations not working
PaulOB
May 16, 2023, 3:36pm
19
You will have to show a link to the problem page as I can’t really guessed what you have missed. It will be one of the above things but I can’t guess which one
If you don’t have a link then please show the full code (html and css) that you are using or set up a codepen with all the assets required.
1 Like
ron122
May 16, 2023, 3:46pm
20
html:
<!DOCTYPE html>
<html>
<head>
<title>Guide Collection</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="games">
<div class="menu">
<p>Guide Collection</p>
<div class="tabs">
<button id="dst" onclick="openDST()">DST</button>
<button id="ds" onclick="openDS()">DS</button>
<button id="oni" onclick="openONI()">ONI</button>
<button id="cc" onclick="openCC()">Cookie Clicker</button>
<button id="ba" onclick="openBA()">Big Ambitions</button>
</div>
</div>
<div class="contanier">
<div id="contect1" class="contect">
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
<div id="sqaure">
<h1>Find Base Location</h1>
</div>
</div>
<div id="contect2" class="contect">
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
<div id="sqaure">
<h1>Sun Cool Emote</h1>
</div>
</div>
<div id="contect3" class="contect">
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
<div id="sqaure">
<h1>Klei Blei Glei</h1>
</div>
</div>
<div id="contect4" class="contect">
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right" data-aos-delay="100" data-aos-doration="1000">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
<div id="sqaure" data-aos="fade-right">
<h1>Very Golden Cookie</h1>
</div>
</div>
<div id="contect5" class="contect">
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
<div id="sqaure">
<h1>Very Large Buinsess</h1>
</div>
</div>
</div>
</div>
</div>
<script>
const elements = [
{ id: 'contect1', color: '#9BA4B5' },
{ id: 'contect2', color: '#F1F6F9' },
{ id: 'contect3', color: '#F1F6F9' },
{ id: 'contect4', color: '#F1F6F9' },
{ id: 'contect5', color: '#F1F6F9' },
];
const tabs = [
{ id: 'dst', displayIndex: 0 },
{ id: 'ds', displayIndex: 1 },
{ id: 'oni', displayIndex: 2 },
{ id: 'cc', displayIndex: 3 },
{ id: 'ba', displayIndex: 4 },
];
function openTab(displayIndex) {
elements.forEach((obj, index) => {
const element = document.getElementById(obj.id);
element.style.display = index === displayIndex ? 'grid' : 'none';
});
tabs.forEach((obj, index) => {
const tab = document.getElementById(obj.id);
tab.style.color = index === displayIndex ? '#9BA4B5' : '#F1F6F9';
});
}
tabs.forEach((tab, index) => {
const element = document.getElementById(tab.id);
element.addEventListener('click', () => openTab(index));
});
AOS.init();
</script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
css:
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:wght@100;300;400;500;700;900&display=swap');
*{
font-family: "Bebas Neue";
margin: 0px;
}
p {
font-size: 70px;
padding-left: 10px;
/*text-shadow: -2px 5px 15px #C2C2C2;*/
padding-bottom: 10px;
color: #F1F6F9;
}
.menu {
background-color: #212A3E;
width: 100%;
}
.games{
width: 100%;
height: 1800px;
position: relative;
overflow: hidden;
}
.tabs {
display: flex;
/*border-bottom: 2px solid #000000;*/
}
.tabs button{
background: transparent;
border: none;
outline: none;
cursor: pointer;
font-size: 35px;
padding: 5px 10px;
/*text-shadow: -2px 5px 15px #C2C2C2;*/
transition: 0.2s;
color: #F1F6F9;
}
.tabs button:hover {
color: #9BA4B5!important;
transform: scale(1.1);
}
.tabs button:active {
color:#767d8a!important;
}
#sqaure {
width: 360px;
height: 450px;
/* box-shadow: rgba(100, 100, 111, 0.3) 0px 7px 29px 0px; */
align-content: center;
border: 3px solid #9BA4B5;
margin-top: 35px;
margin-left: 35px;
margin-right: 35px;
transition: 0.2s;
background-color: #212A3E;
border-radius: 15px;
position: relative;
overflow: hidden;
}
#sqaure:before {
content: "";
position: absolute;
left: -10rem;
right: -10rem;
top: -10rem;
bottom: -10rem;
z-index: -2;
pointer-events: none;
margin: auto;
background:#212A3E;
}
#sqaure:hover:before {
animation: rotate 4s linear infinite forwards;
background: conic-gradient(
#fd004c,
#fe9000,
#fff020,
#3edf4b,
#3363ff,
#b102b7,
#fd004c
);
}
#sqaure:hover {
transform: scale(1.05);
border-radius: 20px;
}
#sqaure:after {
content: "";
position: absolute;
left: 3px;
top: 3px;
right: 3px;
bottom: 3px;
background: #212A3E;
z-index: -2;
pointer-events: none;
border-radius:15px;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
h1 {
text-align: center;
margin-top: 20px;
/*text-shadow: 4px 3px 14px rgba(0,0,0,0.35);*/
font-weight: normal;
font-size: 40px;
background-color: transparent;
color: #F1F6F9;
}
.contect {
grid-template-columns: 1fr 1fr 1fr 1fr;
display: none;
align-items: center;
background-color: #394867;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
#contect1 {
display: grid;
}
#dst{
color: #F1F6F9;
}
.tabs button:focus {
outline: none;
}
html{
scroll-behavior: smooth;
}
