How can I combine this border with my slideshow?
Question
Basically, I have created this rotating border and slideshow. I would like the rotating border to go around the slideshow, however, I have not figured out a way on completing this task. I have tried moving the div's from the border to the slideshow code, but the border gets all messed up. How can I implement my border so it goes around the slideshow? Thanks. Here is my code.
body { display: flex; justify-content: center; align-items: center; height: 100vh; } *, *::before, *::after { box-sizing: border-box; } /* Border */ @keyframes rotate { 100% { transform: rotate(1turn); } }.rainbow { position: relative; z-index: 0; width: 400px; height: 300px; border-radius: 10px; overflow: hidden; padding: 2rem; }.rainbow::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #399953; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); animation: rotate 4s linear infinite; }.rainbow::after { content: ''; position: absolute; z-index: -1; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: white; border-radius: 5px; } /* Slideshow */.slidershow { width: 700px; height: 400px; overflow: hidden; }.middle { position: relative; top: 200px; left: 50%; transform: translate(-50%, -50%); }.navigation { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; }.bar { width: 50px; height: 10px; border: 2px solid #3F69CA; margin: 6px; cursor: pointer; transition: 0.4s; }.bar:hover { background: #3F69CA; } input[name="r"] { position: absolute; visibility: hidden; }.slides { width: 500%; height: 100%; display: flex; }.slidess { width: 20%; transition: 0.6s; }.slidess>h2 { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); text-align: center; padding: 15px; background: rgba(255, 255, 255, .6); color: rgb(24, 23, 23); font-size: 18px; border-radius: 5px; visibility: hidden; opacity: 0; transition: all.5s ease; z-index: 2; }.slides.slidess:hover>h2 { visibility: visible; opacity: 1; }.slidess img { width: 100%; height: 100%; } #r1:checked~.s1 { margin-left: 0; } #r2:checked~.s1 { margin-left: -20%; } #r3:checked~.s1 { margin-left: -40%; } #r4:checked~.s1 { margin-left: -60%; } #r1:checked~.navigation [for="r1"] { background: #fff } #r2:checked~.navigation [for="r2"] { background: #fff } #r3:checked~.navigation [for="r3"] { background: #fff } #r4:checked~.navigation [for="r4"] { background: #fff } @media (min-width: 200px) and (max-width: 899px) {.slidershow { width: 300px; height: 201px; overflow-x: hidden; position: relative; top: 90px; } }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width" name="viewport"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <:--Border--> <div class="rainbow"></div> <.--Slideshow--> <div id="outside"> <div class="slidershow middle"> <div class="slides"> <input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio"> <div class="navigation"> <label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label> </div> <div class="slidess s1"> <h2>Slide 1.</h2><img src="https.//images?pexels.com/photos/842711/pexels-photo-842711:jpeg.auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> <div class="slidess"> <h2>Slide 2.</h2><img src="https.//images?pexels.com/photos/1643409/pexels-photo-1643409:jpeg.auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> <div class="slidess"> <h2>Slide 3.</h2><img src="https.//images?pexels.com/photos/2246476/pexels-photo-2246476:jpeg.auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> <div class="slidess"> <h2>Slide 4.</h2><img src="https.//images?pexels.com/photos/1452701/pexels-photo-1452701.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> </div> </div> </div> <script src="script.js"> </script> </body> </html>
1 answers
solution1
1 ACCPTED 2021-03-18 13:38:12
You can try this.
body { display: flex; justify-content: center; align-items: center; height: 100vh; } *, *::before, *::after { box-sizing: border-box; } /* Border */ @keyframes rotate { 100% { transform: rotate(1turn); } }.rainbow { position: relative; z-index: 0; border-radius: 10px; overflow: hidden; padding: 6px; }.rainbow::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #399953; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); animation: rotate 4s linear infinite; }.rainbow::after { content: ''; position: absolute; z-index: -1; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: white; border-radius: 5px; } /* Slideshow */.slidershow { width: 700px; height: 400px; overflow: hidden; }.middle { position: relative; top: 200px; left: 50%; transform: translate(-50%, -50%); }.navigation { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; }.bar { width: 50px; height: 10px; border: 2px solid #3F69CA; margin: 6px; cursor: pointer; transition: 0.4s; }.bar:hover { background: #3F69CA; } input[name="r"] { position: absolute; visibility: hidden; }.slides { width: 500%; height: 100%; display: flex; }.slidess { width: 20%; transition: 0.6s; }.slidess>h2 { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 30px); text-align: center; padding: 15px; background: rgba(255, 255, 255, .6); color: rgb(24, 23, 23); font-size: 18px; border-radius: 5px; visibility: hidden; opacity: 0; transition: all.5s ease; z-index: 2; }.slides.slidess:hover>h2 { visibility: visible; opacity: 1; }.slidess img { width: 100%; height: 100%; } #r1:checked~.s1 { margin-left: 0; } #r2:checked~.s1 { margin-left: -20%; } #r3:checked~.s1 { margin-left: -40%; } #r4:checked~.s1 { margin-left: -60%; } #r1:checked~.navigation [for="r1"] { background: #fff } #r2:checked~.navigation [for="r2"] { background: #fff } #r3:checked~.navigation [for="r3"] { background: #fff } #r4:checked~.navigation [for="r4"] { background: #fff } @media (min-width: 200px) and (max-width: 899px) {.slidershow { width: 300px; height: 201px; overflow-x: hidden; position: relative; top: 100px; } }
<div class="rainbow"> <div id="outside"> <div class="slidershow middle"> <div class="slides"> <input checked id="r1" name="r" type="radio"> <input id="r2" name="r" type="radio"> <input id="r3" name="r" type="radio"> <input id="r4" name="r" type="radio"> <div class="navigation"> <label class="bar" for="r1"></label> <label class="bar" for="r2"></label> <label class="bar" for="r3"></label> <label class="bar" for="r4"></label> </div> <div class="slidess s1"> <h2>Slide 1.</h2><img src="https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> <div class="slidess"> <h2>Slide 2.</h2><img src="https://images.pexels.com/photos/1643409/pexels-photo-1643409.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> <div class="slidess"> <h2>Slide 3.</h2><img src="https://images.pexels.com/photos/2246476/pexels-photo-2246476.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> <div class="slidess"> <h2>Slide 4.</h2><img src="https://images.pexels.com/photos/1452701/pexels-photo-1452701.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></div> </div> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I make my slideshow fade?
How can I add descriptions to my slideshow?
how can i remove my slideshow width? and how can i add more number of picture in my slideshow
How can I edit my slideshow to make it responsive?
How can I insert slide indicator dots in my slideshow?
How can I make my html slideshow responsive?
How can I make all the pictures in my slideshow the same size?
How can I make my specific slideshow resize with the window?
How can I make the slides in my jQuery slideshow fade smoothly?
How can I combine my controllers AngularJS?
Related Tags