Главная » Языки программирования

CSS Infinity Dots Animation Effects

Содержание
  1. How do I solve a problem with a CSS file?
  2. Question: How do I solve a problem with a CSS file?
  3. Total Answers: 3
  4. Answers 1: of How do I solve a problem with a CSS file?
  5. Ошибка: ожидается двоеточие css (css-colonexpected)
  6. Ответы 2
  7. Другие вопросы по теме
  8. Похожие вопросы
  9. Html – Error: colon expected css(css-colonexpected)
  10. Best Solution
  11. Related Solutions
  12. How do I solve a problem with a CSS file?
  13. Question: How do I solve a problem with a CSS file?

How do I solve a problem with a CSS file?

Question: How do I solve a problem with a CSS file?

I am a new user and this is my first post on StackOverflow.
I wanted to try to code an Infinity RGB animation using HTML and CSS and to get the work done, I followed this video’s instructions (https://youtu.be/dxquAfnHhqg).
When I ended coding, in my CSS file appeared 2 errors at line 3 margin 0; and line 4 padding 0; , where both «0s» are underlined and with the message colon expectedcss(css-colonexpected) and I don’t know how to fix them even if I perfectly copied the source code shown in the video (the CSS coding in the video starts at 1:00).
I also searched here on StackOverflow, I tried to change my file extension from .css to .sass but I didn’t manage to solve this problem.
Also when I run my program, it only shows me a full-screen multicolor gradient background, while there should be the Infinity animation.
It would be very helpful if you tried to explain to me what is the problem and how to solve it.
Thank you guys for your time and for your help.

* < margin: 0; padding: 0; box-sizing: border-box; >section < display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #042104; animation: animateColor 8s linear infinite; >@keyframes animateColor < 0% < filter: hue-rotate(0deg); >100% < filter: hue-rotate(360deg); >> section.container < display: flex; >section.container.circle < position: relative; width: 150px; height: 150px; margin: 0 -7.5px; >section.container.circle span < position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); /* 360 / 20 = 18deg */ >section.container.circle span::before < content: ''; position: absolute; right: 0; top: calc(50% - 7.5px); width: 15px; height: 15px; background-color: #00ff0a; border-radius: 50%; box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a; transform: scale(0.1); animation: animate 4s linear infinite; animation-delay: calc(0.1 * var(--i)); >@keyframes animate < 0% < transform: scale(1); >50% , 100% < transform: scale(0.1); >> section.container.circle:nth-child(2) < transform: rotate(-180deg); >section.container.circle:nth-child(2) span::before

Total Answers: 3

Answers 1: of How do I solve a problem with a CSS file?

The main reason why the results weren’t showing, is that you wrote the CSS in an incorrect way.

Читайте также:  List type variable in java

To summarize, section.container.circle is not the same as section .container .circle .

Could you address the difference? It’s the spaces between each class/tag name

Please refer to this https://www.w3schools.com/cssref/css_selectors.asp to understand how CSS selectors work.

Also, as Kip answered, you had an error with margin: 0; and some minor incorrectly written CSS within your original code that I fixed.

Here’s the final working code:

* < margin: 0; padding: 0; box-sizing: border-box; >section < display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #042104; animation: animateColor 8s linear infinite; >@keyframes animateColor < 0% < filter: hue-rotate(0deg); >100% < filter: hue-rotate(360deg); >> section .container < display: flex; >section .container .circle < position: relative; width: 150px; height: 150px; margin: 0 -7.5px; >section .container .circle span < position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); /* 360 / 20 = 18deg */ >section .container .circle span::before < content: ''; position: absolute; right: 0; top: calc(50% - 7.5px); width: 15px; height: 15px; background-color: #00ff0a; border-radius: 50%; box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a; transform: scale(0.1); animation: animate 4s linear infinite; animation-delay: calc(0.1s * var(--i)); >@keyframes animate < 0% < transform: scale(1); >50% , 100% < transform: scale(0.1); >> section .container .circle:nth-child(2) < transform: rotate(-180deg); >section .container .circle:nth-child(2) span::before

Источник

Ошибка: ожидается двоеточие css (css-colonexpected)

Я пытаюсь создать . Простой угловой проект. В файле css /src/styles.css при написании кода я сталкиваюсь с отображением синтаксических ошибок.

body < margin: 0; background: #F2F2F2; font-family: 'Montserrat', sans-serif; height: 100vh; >#container < display: grid; grid-template-columns: 70px auto; height: 100%; #content < padding: 30px 50px; ul ul < margin-top: 20px; li < padding:0; a < font-size: 1em; font-weight: 300; >//Error highlight saying: at-rule or selector expected css(css-ruleselectorexpected) > > > > > >

Сообщение об ошибке отображается в виде комментариев

Отображаемые синтаксические ошибки: -colon ожидаемый css (css-colonexpected)

-at-rule или селектор ожидаемый css (css-ruleselectorexpected)

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в.

Чтобы выровнять элемент

по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов.

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим.

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -.

Toor — Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут.

Ответы 2

Вы используете допустимый SASS или SCSS с вложенными классами в файле .css , и поэтому отображается ошибка. Эквивалент css будет:

body < margin: 0; background: #F2F2F2; font-family: "Montserrat", sans-serif; height: 100vh; >#container < display: grid; grid-template-columns: 70px auto; height: 100%; >#container #content < padding: 30px 50px; >#container #content ul < list-style-type: none; margin: 0; padding: 0; >#container #content ul li < background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 8px; >#container #content ul li a < font-size: 1.5em; text-decoration: none; font-weight: bold; color: #00A8FF; >#container #content ul li ul < margin-top: 20px; >#container #content ul li ul li < padding: 0; >#container #content ul li ul li a

Вы используете дерзкий в файле CSS. Итак, эта ошибка отображается. Его расширение файла должно быть .sass или таблица стилей должна быть закодирована в соответствии с синтаксисом CSS.

В CSS это будет выглядеть так:

 body < margin: 0; background: #F2F2F2; font-family: "Montserrat", sans-serif; height: 100vh; >#container < display: grid; grid-template-columns: 70px auto; height: 100%; >#container #content < padding: 30px 50px; >#container #content ul < list-style-type: none; margin: 0; padding: 0; >#container #content ul li < background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 8px; >#container #content ul li a < font-size: 1.5em; text-decoration: none; font-weight: bold; color: #00A8FF; >#container #content ul li ul < margin-top: 20px; >#container #content ul li ul li < padding: 0; >#container #content ul li ul li a

Другие вопросы по теме

Похожие вопросы

Находите ответы на сложные технические вопросы по программированию, с которыми сталкиваются инженеры по всему миру в своей ежедневной практике на сайте RedDeveloper.

Источник

Html – Error: colon expected css(css-colonexpected)

I’m trying to create a. Simple angular project.
In the css file /src/styles.css ,while writing the code, I’m facing being shown syntax errors.

body < margin: 0; background: #F2F2F2; font-family: 'Montserrat', sans-serif; height: 100vh; >#container < display: grid; grid-template-columns: 70px auto; height: 100%; #content < padding: 30px 50px; ul ul < margin-top: 20px; li < padding:0; a < font-size: 1em; font-weight: 300; >//Error highlight saying: at-rule or selector expected css(css-ruleselectorexpected) > > > > > >

Error msg shown as comments

Syntax errors being shown are:
-colon expected css(css-colonexpected)

-at-rule or selector expected css(css-ruleselectorexpected)

Best Solution

You are using a valid SASS or SCSS with nested classes in a .css file and hence the error is shown. The equivalent css would be:

body < margin: 0; background: #F2F2F2; font-family: "Montserrat", sans-serif; height: 100vh; >#container < display: grid; grid-template-columns: 70px auto; height: 100%; >#container #content < padding: 30px 50px; >#container #content ul < list-style-type: none; margin: 0; padding: 0; >#container #content ul li < background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 8px; >#container #content ul li a < font-size: 1.5em; text-decoration: none; font-weight: bold; color: #00A8FF; >#container #content ul li ul < margin-top: 20px; >#container #content ul li ul li < padding: 0; >#container #content ul li ul li a
Html – Set cellpadding and cellspacing in CSS

For controlling «cellpadding» in CSS, you can simply use padding on table cells. E.g. for 10px of «cellpadding»:

For «cellspacing», you can apply the border-spacing CSS property to your table. E.g. for 10px of «cellspacing»:

This property will even allow separate horizontal and vertical spacing, something you couldn’t do with old-school «cellspacing».

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you’re almost out of luck. I say «almost» because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you’re trying to eliminate cellspacing (that is, cellspacing=»0″ ) then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn’t have it defined already), you can use border-collapse:collapse .

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Html – How to give text or an image a transparent background using CSS

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5);

Источник

How do I solve a problem with a CSS file?

Question: How do I solve a problem with a CSS file?

I am a new user and this is my first post on StackOverflow.
I wanted to try to code an Infinity RGB animation using HTML and CSS and to get the work done, I followed this video’s instructions (https://youtu.be/dxquAfnHhqg).
When I ended coding, in my CSS file appeared 2 errors at line 3 margin 0; and line 4 padding 0; , where both «0s» are underlined and with the message colon expectedcss(css-colonexpected) and I don’t know how to fix them even if I perfectly copied the source code shown in the video (the CSS coding in the video starts at 1:00).
I also searched here on StackOverflow, I tried to change my file extension from .css to .sass but I didn’t manage to solve this problem.
Also when I run my program, it only shows me a full-screen multicolor gradient background, while there should be the Infinity animation.
It would be very helpful if you tried to explain to me what is the problem and how to solve it.
Thank you guys for your time and for your help.

* < margin: 0; padding: 0; box-sizing: border-box; >section < display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #042104; animation: animateColor 8s linear infinite; >@keyframes animateColor < 0% < filter: hue-rotate(0deg); >100% < filter: hue-rotate(360deg); >> section.container < display: flex; >section.container.circle < position: relative; width: 150px; height: 150px; margin: 0 -7.5px; >section.container.circle span < position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(18deg * var(--i))); /* 360 / 20 = 18deg */ >section.container.circle span::before < content: ''; position: absolute; right: 0; top: calc(50% - 7.5px); width: 15px; height: 15px; background-color: #00ff0a; border-radius: 50%; box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 0 0 80px #00ff0a, 0 0 100px #00ff0a; transform: scale(0.1); animation: animate 4s linear infinite; animation-delay: calc(0.1 * var(--i)); >@keyframes animate < 0% < transform: scale(1); >50% , 100% < transform: scale(0.1); >> section.container.circle:nth-child(2) < transform: rotate(-180deg); >section.container.circle:nth-child(2) span::before

Источник

Оцените статью