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

Css плавная заливка background

На чтение 7 мин
Содержание
  1. Сборник анимированных градиентов
  2. Плавная смена цветов по горизонтали
  3. Результат:
  4. Плавная смена цветов по вертикали
  5. Результат:
  6. Плавная смена цветов по диагонали
  7. Результат:
  8. Бегущие полоски
  9. Результат:
  10. Бегущие полоски 2
  11. Результат:
  12. Комментарии
  13. Другие публикации
  14. Fill Background Animation using CSS
  15. 35+ CSS Animated Backgrounds for Any Website Style
  16. Pure CSS background animation
  17. Author
  18. Made With
  19. Demo
  20. Links
  21. -webkit-background-clip:text CSS effect
  22. Author
  23. Made With
  24. Demo
  25. Links
  26. Animate Background
  27. Author
  28. Made With
  29. Demo
  30. Links
  31. Rotation & background experiment
  32. Author
  33. Made With
  34. Demo
  35. Links
  36. Parallax Star background in CSS
  37. Author
  38. Made With
  39. Demo
  40. Links
  41. Cloudy Spiral CSS animation
  42. Author
  43. Made With
  44. Demo
  45. Links
  46. pure CSS twinkling stars background
  47. Author
  48. Made With
  49. Demo
  50. Links
  51. Background Effect
  52. Author
  53. Made With
  54. Demo
  55. Links
  56. Pure CSS Particle Animation
  57. Author
  58. Made With
  59. Demo
  60. Links
  61. CSS Fireflies
  62. Author
  63. Made With
  64. Demo
  65. Links
  66. infinite SVG Triangle Fusion
  67. Author
  68. Made With
  69. Demo
  70. Links
  71. Animated Ripples background
  72. Author
  73. Made With
  74. Demo
  75. Links
  76. Cool Mountain Background with animations – slightly responsive
  77. Author
  78. Made With
  79. Demo
  80. Links
  81. Chameleon background
  82. Author
  83. Made With
  84. Demo
  85. Links
  86. Animation Background-Clip Text Effect – Using Only HTML & CSS
  87. Author
  88. Made With
  89. Demo
  90. Links
  91. CSS3 Animation: Background Color Cycle
  92. Author
  93. Made With
  94. Demo
  95. Links
  96. Animation background #1
  97. Author
  98. Made With
  99. Demo
  100. Links
  101. Animated Background Gradient
  102. Author
  103. Made With
  104. Demo
  105. Links
  106. CSS3 Animation – Background colour
  107. Author
  108. Made With
  109. Demo
  110. Links
  111. CSS Animated Background Landing Page
  112. Author
  113. Made With
  114. Demo
  115. Links
  116. Hearts animation background
  117. Author
  118. Made With
  119. Demo
  120. Links
  121. CSS Animation – Background-image-scroll
  122. Author
  123. Made With
  124. Demo
  125. Links
  126. SVG Animation Background
  127. Author
  128. Made With
  129. Demo
  130. Links
  131. Foundation 6 Animated Background
  132. Author
  133. Made With
  134. Demo
  135. Links
  136. Animated CSS mask-image gradient
  137. Author
  138. Made With
  139. Demo
  140. Links
  141. Parallax Background Image
  142. Author
  143. Made With
  144. Demo
  145. Links
  146. Canva moving background effect
  147. Author
  148. Made With
  149. Demo
  150. Links
  151. Parallax Background Effect
  152. Author
  153. Made With
  154. Demo
  155. Links
  156. CSS background effect
  157. Author
  158. Made With
  159. Demo
  160. Links
  161. Animated CSS mask-image gradient
  162. Author
  163. Made With
  164. Demo
  165. Links
  166. Everything “random()” 😛
  167. Author
  168. Made With
  169. Demo
  170. Links
  171. Simple Parallax Background Effect ( Only Css )
  172. Author
  173. Made With
  174. Demo
  175. Links
  176. background effect
  177. Author
  178. Made With
  179. Demo
  180. Links
  181. Sliding Diagonals Background Effect
  182. Author
  183. Made With
  184. Demo
  185. Links
  186. Text Clip background effect
  187. Author
  188. Made With
  189. Demo
  190. Links
  191. Psychedelic animated background
  192. Author
  193. Made With
  194. Demo
  195. Links
  196. Similar Posts
  197. The Best 10+ CSS SELECT BOX – GSCODE
  198. 50+ Best CSS Timeline Examples (Creation, Design & Inspiration)
  199. Creative CSS Grid Layouts: 40+ Inspiring Examples from CodePen
  200. 10+ Tailwind Cards
  201. 20+ Examples Of Great Tab Bar Menu Animations (For Your Inspiration)
  202. Best 30+ Pure CSS Forms That Help to create Form
Читайте также:  Java classpath program files x86

Сборник анимированных градиентов

Сборник анимированных градиентов c использованием CSS keyframes.

Плавная смена цветов по горизонтали 

body < background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradient 10s ease infinite; transform: translate3d(0, 0, 0); >@keyframes gradient < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >>

Результат:

Плавная смена цветов по вертикали 

body < background: linear-gradient(180deg, #641e39, #98749b, #ddf810, #8f4ff4); background-size: 400% 400%; animation: gradient 10s ease infinite; >@keyframes gradient < 0% < background-position: 50% 0%; >50% < background-position: 50% 100%; >100% < background-position: 50% 0%; >>

Результат:

Плавная смена цветов по диагонали 

body < background: linear-gradient(-45deg, #ed193b, #a98055, #f286e2, #681d7a); background-size: 400% 400%; animation: gradient 10s ease infinite; >@keyframes gradient < 0% < background-position: 0% 50%; >50% < background-position: 100% 50%; >100% < background-position: 0% 50%; >>

Результат:

Бегущие полоски

Результат:

Бегущие полоски 2

Результат:

Комментарии

Другие публикации

Сборник CSS градиентов

Не стандартный СSS градиент

Полупрозрачный градиент поверх картинки

Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с.

Рамки блоков с градиентом

Преобразование цветов в PHP

Источник

Fill Background Animation using CSS

From the code above, I set background with linear-gradient(to right, #000 50%, #fff 50%) , because I want the background move from left to right with black-white color. And I set background-size to 200% width and 100% height. When the width is bigger than 100% it will not fill the button with black, instead will be filled with white background. Then, I set the animation stop at right position of the button so I put background-position: bottom right; . After that, because I want the animation start when hover I put background-position: bottom left; on hover state. Now let’s see the result:
It works 🙂
Let’s add and modify linear-gradient , background-size and background-position to make other buttons have similar animation with different directions. 

/* RIGHT TO LEFT */ .button__right-left  border: 2px solid black; background: linear-gradient(to left, #000 50%, #fff 50%); background-size: 200% 100%; background-position: bottom left; transition: all .7s ease-out; > .button__right-left:hover  border: 2px solid limegreen; background-position: bottom right; color: #fff; > /* TOP TO BOTTOM */ .button__top-bottom  border: 2px solid black; background: linear-gradient(to bottom, #000 50%, #fff 50%); background-size: 100% 200%; background-position: bottom left; transition: all .5s ease-out; > .button__top-bottom:hover  border: 2px solid limegreen; background-position: top left; color: #fff; > /* BOTTOM TO TOP */ .button__bottom-top  border: 2px solid black; background: linear-gradient(to top, #000 50%, #fff 50%); background-size: 100% 200%; background-position: top left; transition: all .5s ease-out; > .button__bottom-top:hover  border: 2px solid limegreen; background-position: bottom left; color: #fff; >

Источник

35+ CSS Animated Backgrounds for Any Website Style

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Pure CSS background animation

Author

Made With

Demo

-webkit-background-clip:text CSS effect

Author

Made With

Demo

Animate Background

Author

Made With

Demo

Rotation & background experiment

Move your mouse around, see the result. No SVG/canvas/anything else! I really like the effect

More rotational objects can be added easily, just add the appropriate HTML structure (including the necessary classes)

This could also be combined with a CSS-only square container and made responsive very easily. For an example of the technique, check here http://codepen.io/Zeaklous/pen/ImGaH

Author

Made With

Demo

Parallax Star background in CSS

Using a very simple sass function, and CSS animation key frames, built parallax scrolling stars in space. The sass function creates a random star field on each load.

Author

Made With

Demo

Cloudy Spiral CSS animation

Author

Made With

Demo

pure CSS twinkling stars background

Author

Made With

Demo

Background Effect

Author

Made With

Demo

Pure CSS Particle Animation

Author

Made With

Demo

CSS Fireflies

An elegant HTML/CSS only solution for adding a tranquil fireflies effect to you page.

Author

Made With

Demo

infinite SVG Triangle Fusion

Author

Made With

Demo

Animated Ripples background

Author

Made With

Demo

Cool Mountain Background with animations – slightly responsive

Author

Made With

Demo

See the Pen Chameleon background by Roland Warmerdam (@Rowno) on CodePen.

Chameleon background

Author

Made With

Demo

Animation Background-Clip Text Effect – Using Only HTML & CSS

Author

Made With

Demo

CSS3 Animation: Background Color Cycle

Author

Made With

Demo

Animation background #1

Author

Made With

Demo

Animated Background Gradient

Author

Made With

Demo

CSS3 Animation – Background colour

Author

Made With

Demo

CSS Animated Background Landing Page

Cover page with an animated background CSS and background pattern overlay

Author

Made With

Demo

Hearts animation background

Author

Made With

Demo

CSS Animation – Background-image-scroll

Author

Made With

Demo

SVG Animation Background

Author

Made With

Demo

Foundation 6 Animated Background

Author

Made With

Demo

Animated CSS mask-image gradient

Author

Made With

Demo

Parallax Background Image

Author

Made With

Demo

Canva moving background effect

Author

Made With

Demo

Parallax Background Effect

Author

Made With

Demo

CSS background effect

Author

Made With

Demo

Animated CSS mask-image gradient

Author

Made With

Demo

Everything “random()” 😛

Author

Made With

Demo

Simple Parallax Background Effect ( Only Css )

Author

Made With

Demo

See the Pen background effect by Mert Köseoğlu (@mksglu) on CodePen.

background effect

Author

Made With

Demo

Sliding Diagonals Background Effect

Author

Made With

Demo

Text Clip background effect

Author

Made With

Demo

Psychedelic animated background

Author

Made With

Demo

Similar Posts

The Best 10+ CSS SELECT BOX – GSCODE

The Best 10+ CSS SELECT BOX – GSCODE

See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen. Title:-Completely CSS: Custom checkboxes, radio buttons, and select boxesAuthor:-Kenan YusufMade With:-HTML,CSS See the Pen Select-Boxes by Nipun Paradkar (@radiantshaw) on CodePen. Title:-Select-BoxesAuthor:-Nipun ParadkarMade With:-HTML,CSS,JS See the Pen Custom select box (with jQuery) by Masterov (@Masterov) on CodePen….

50+ Best CSS Timeline Examples (Creation, Design & Inspiration)

50+ Best CSS Timeline Examples (Creation, Design & Inspiration)

This is a collection of 50+ CSS Timeline Examples that are suitable for your web projects In this article, you’ll find 50+ best CSS Timeline Examples. See the Pen CSS Timeline by Nils Wittler (@NilsWe) on CodePen. Title:- CSS TimelineAuthor:- Nils WittlerMade With:- HTML CSS See the Pen CSS Timeline by Darcy Voutt (@darcyvoutt) on…

Creative CSS Grid Layouts: 40+ Inspiring Examples from CodePen

Creative CSS Grid Layouts: 40+ Inspiring Examples from CodePen

CSS Grid is a powerful layout tool that can be used to create creative and inspiring websites. This article showcases 40+ examples of CSS Grid layouts from CodePen, a popular website for sharing code snippets. Image Mosaic Effect with CSS Grids & Blend Modes Author Dudley Storey Made With HTML,CSS(SCSS) Demo Check Out Demo Links…

10+ Tailwind Cards

10+ Tailwind Cards

See the Pen Tailwind – Cards by Andi Grether (@handplant) on CodePen. Title :- Tailwind – CardsAuthor:- Andi GretherMade With :- HTML CSS JS See the Pen Calcite Tailwind Cards by Erich Rainville (@TheBlueDog) on CodePen. Title :- Calcite Tailwind CardsAuthor:- Erich RainvilleMade With :- HTML CSS JS See the Pen Tailwind – Cards by…

20+ Examples Of Great Tab Bar Menu Animations (For Your Inspiration)

20+ Examples Of Great Tab Bar Menu Animations (For Your Inspiration)

See the Pen mobile navigation concept by Tobias Glaus (@tobiasglaus) on CodePen. Title:- mobile navigation conceptAuthor:- Tobias GlausMade With:- HTML CSS JAVASCRIPT See the Pen Fancy tab bar active animation by Aaron Iker (@aaroniker) on CodePen. Title:- Fancy tab bar active animationAuthor:- Aaron IkerMade With:- HTML CSS JAVASCRIPT See the Pen Tab bar active animation…

Best 30+ Pure CSS Forms That Help to create Form

Best 30+ Pure CSS Forms That Help to create Form

Login & Sign Up Form Concept Author Dany Santos Made With HTML,CSS,JS Demo Check Out Demo Links Download Credit Card Payment Form Author Jade Preis Made With HTML,CSS,JS Demo Check Out Demo Links Download Payment card checkout Author Simone Bernabè Made With HTML,CSS,JS Demo Check Out Demo Links Download Bullet Journal/Sketch Style Elements Author Olivia…

Источник

Оцените статью
© 2023 Программирование