css

问题 If a user does not search a url on the front end, I would like the design to appear as follows Currently, this my form, which is using the type="url" to provide the validation without having to make a regex. Here is a copy of my current form with a post request <form action="POST" id="Submit"> <div class="inner-form"> <div class="input-field first-wrap"> <div class="svg-wrapper"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-

问题 I'm using http://erikflowers.github.io/weather-icons/ to display weather icons on my page. However, after inserting the cdn. It doesn't work. https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css the icon has a class of "wi-wom-200" taken from http://erikflowers.github.io/weather-icons/api-list.html since I'm using openweathermap.com for my api. Any help on how to display this icon. Openweahtermap provides their own icons, but very low resolution. Thanks /*

问题 If a user does not search a url on the front end, I would like the design to appear as follows Currently, this my form, which is using the type="url" to provide the validation without having to make a regex. Here is a copy of my current form with a post request <form action="POST" id="Submit"> <div class="inner-form"> <div class="input-field first-wrap"> <div class="svg-wrapper"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-

问题 I have a background image on my homepage that correctly covers the entirety of the screen. However, on mobile, the image does not resize to fit properly. It instead only shows a portion of the image. The css is below: #hero { width: 100%; height: 50vh; overflow: auto; background: url("./hero.webp") no-repeat center center fixed; background-size: cover; } @media (min-width: 768px) { #hero { height: 100vh; } } Here is a link to the homepage. If you resize the browser to mimic a mobile screen

问题 I can't get Safari(11.1) to load font files via the FontFace interface, if those files font names begin with numbers. The same files that show an error in Safari load perfectly fine in Chrome and Firefox. Here is the most simplified version I could create that still produces the error. var fonty = new FontFace('0Test', 'url(fonts/0Test.woff)'); console.log('This will only show if the Font name does not begin with a number'); Checking the Safari(11.1 is the version I'm using) console, you'll

问题 I can't get Safari(11.1) to load font files via the FontFace interface, if those files font names begin with numbers. The same files that show an error in Safari load perfectly fine in Chrome and Firefox. Here is the most simplified version I could create that still produces the error. var fonty = new FontFace('0Test', 'url(fonts/0Test.woff)'); console.log('This will only show if the Font name does not begin with a number'); Checking the Safari(11.1 is the version I'm using) console, you'll

问题 Can I reverse transition animation on hover out by CSS? When I hover out "Menu" text, I need to slide to right blue line and after 400ms delay slide from left grey line. Is it possible? .menu { display: inline-block; position: relative; font-family: sans-serif; font-size: 32px; font-weight: bold; } .menu:before, .menu:after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 4px; background-color: blue; transform: scaleX(0); transform-origin: right

问题 I have this simple loading indicator https://jsfiddle.net/tcdLj0f9/ body { background: #1e263e; } .load { display: flex; position: fixed; align-items: center; justify-content: center; height: 100%; width: 100%; } .loadersp { border: 12px solid #f3f3f3; border-top: 12px solid #555!important; border-radius: 50%; width: 96px; height:96px; animation: sp-rotate 2s linear infinite; } @keyframes sp-rotate { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } <div class="load"> <div

问题 I have this simple loading indicator https://jsfiddle.net/tcdLj0f9/ body { background: #1e263e; } .load { display: flex; position: fixed; align-items: center; justify-content: center; height: 100%; width: 100%; } .loadersp { border: 12px solid #f3f3f3; border-top: 12px solid #555!important; border-radius: 50%; width: 96px; height:96px; animation: sp-rotate 2s linear infinite; } @keyframes sp-rotate { 0% { transform: rotate(0deg) } to { transform: rotate(1turn) } } <div class="load"> <div

问题 document.querySelector( 'style' ).innerHTML += ` div { width: 40rem; height: 1rem; background-color: #444; } .earth_orbit, .moon { width: 15rem; margin-left: 100%; background-color: #222;; } .earth_orbit::before { width: 5rem; height: 5rem; background-color: #08f; } .moon { width: 2.5rem; height: 2.5rem; background-color: #ddd; } section { right: 5%; width: 37.5%; height: 50%; font-size: 5rem; font-weight: bold; text-align: center; backdrop-filter: blur( 2rem ); -webkit-backdrop-filter: blur(