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

Эффект морской волны css

На чтение 10 мин
Содержание
  1. Эффект волны на CSS
  2. Создаем волны в квадратном блоке
  3. Создаем волны в круглом вращающемся блоке
  4. 39+ CSS Wave Animation Examples
  5. CSS Wave Animation
  6. Latest Updates
  7. Category
  8. CodeWithRandom
  9. 16 CSS Water Effects
  10. Author
  11. Links
  12. Made with
  13. About a code
  14. Water Wave CSS Effect
  15. Author
  16. Links
  17. Made with
  18. About a code
  19. Sunrise Over Still Lake
  20. Author
  21. Links
  22. Made with
  23. About a code
  24. Octocat Sprite Swimming in the Ocean with CSS
  25. Author
  26. Links
  27. Made with
  28. About a code
  29. Pure CSS Rain
  30. Author
  31. Links
  32. Made with
  33. About a code
  34. Simple CSS Waves
  35. Author
  36. Links
  37. Made with
  38. About a code
  39. Underwater Pure CSS Animation
  40. Author
  41. Links
  42. Made with
  43. About a code
  44. Outline. Pure CSS
  45. Author
  46. Links
  47. Made with
  48. About the code
  49. Waves
  50. Author
  51. Links
  52. Made with
  53. About the code
  54. Pure CSS Random Rain with SVG and CSS Variables
  55. Author
  56. Links
  57. Made with
  58. About a code
  59. CSS Water Effect
  60. Author
  61. Links
  62. Made with
  63. About a code
  64. Cup Filling with Water CSS Animation
  65. Author
  66. Links
  67. Made with
  68. About the code
  69. Water Drop
  70. Author
  71. Links
  72. Made with
  73. About the code
  74. Drip Drop Animation
  75. Author
  76. Links
  77. Made with
  78. About the code
  79. Water Droplets on Window
  80. Author

Эффект волны на CSS

Анимация на CSS способна преобразить страницу и задержать внимание пользователя эффектной подачей. Предлагаю потренироваться и создать CSS анимацию, имитирующую эффект волны! Приготовление этой «вкусняшки» из мира веб-строительства займет совсем немного времени: около 10-15 минут. А принцип, лежащий в основе её создания, позволит воплотить в жизнь фантазии дизайнеров о развевающихся на ветру вуалях, флагах и прочих элементах прекрасного. Итак, не будем больше тратить время на описательную базу, приступим к конкретике.

Цель: имитировать движение волн посредством анимации на CSS. В результате должны получиться два анимированных блока, представленных в начале статьи.

Инструменты: HTML, CSS

Основной принцип заключается в бесконечном процессе поворота скругленных блоков на 360 градусов. Каждый из скругленных блоков окрашен в цвет волны и является дочерним по отношению к фоновому блоку. Из-за того, что область видимости родительского блока ограничена свойством overflow: hidden, пользователь видит лишь отдельные сегменты вращающихся скругленных блоков. Благодаря этому создается имитация набегающих волн.

Создаем волны в квадратном блоке

Следуя описанному выше принципу, в html-файле создадим блок для «хранения» с классом «waves». В созданном блоке расположим 2 дочерних блока с классами «wave1» и «wave2»:

Теперь откроем CSS файл и добавим стили для фонового блока с классом «waves»: размеры, относительное позиционирование, цвет фона и тень.

Позже мы вернемся к селектору «.waves», чтобы дополнить список свойств значением overflow: hidden. А пока я предлагаю не сокращать область наблюдения за создаваемыми блоками, чтобы насладиться обзором всех частей анимации.

Приступим к стилизации селекторов «.wave1» и «.wave2»:

1. Увеличим эти блоки относительно фонового до 200% и зададим им абсолютное позиционирование:

2. Определим расположение блоков. Затем окрасим и закруглим их. После этого каждому блоку зададим анимацию «wave» с разной периодичностью:

Пришло время добавить динамики нашим блокам! Для этого в CSS-файле мы опишем анимацию «wave» — за одну итерацию анимированный элемент будет поворачиваться на 360 градусов:

Читайте также:  Char array to int in cpp

На этом этапе остановимся и посмотрим в браузере, что получилось:

Это наглядная демонстрация принципа создания эффекта волн в CSS: мы видим, что закругленные блоки действительно способны имитировать движение волн, но только на ограниченной области обзора. Поэтому сейчас самое время вернуться к редактированию селектора «.waves» и добавить CSS-свойство overflow:hidden:

Действительно, сейчас наши блоки больше похожи на волны. Поставленной цели мы достигли! Самое время пофантазировать и преобразовать наш код для получения другого интересного результата.

Создаем волны в круглом вращающемся блоке

Давайте внесем небольшие изменения в наши файлы с кодом и заключим волны не в квадрат, а в круг. Да не в простой, а с вращающимся волнистым бочком! Такой прием эффектно смотрится на темном фоне. Поэтому эксперимента ради закрасим элемент разметки, в котором будет располагаться круглый в темно-синий цвет. Так как под этот эксперимент я выделила целую страницу, то окрашу в темно-синий цвет body:

Так как в данном примере движутся не только синие волны, но и белый фон, то предлагаю в html-файл добавить дополнительный блок с классом «wave0». Позже мы окрасим этот блок в белый цвет и зададим ему вращение:

Для селекторов «.wave1» и «.wave2» стили останутся прежними. Нужно внести небольшие корректировки в список свойств для селектора «.waves», а также добавить свойства для вновь созданного блока с классом «wave0». Ниже я размещу весь код CSS-файла с внесенными изменениями. В союзе с предоставленным выше html-кодом, этот код будет создавать вращающийся круг с эффектом набегающих волн. Копируйте код и проверяйте работоспособность в браузере!
body < background: #172b3c; >.waves < width: 160px; height: 160px; position: relative; margin:40px; border-radius: 300px; box-shadow: 0px 0px 20px #0c121b; background: #172b3c; overflow: hidden; >.wave0 < position: absolute; width: 100%; height: 100%; left: 0.5%; top: 1%; background-color: #fff; border-radius: 45%; animation: wave 10s linear infinite; >.wave1, .wave2 < position: absolute; width: 200%; height: 200%; >.wave1 < left: -7%; top: 32%; background-color: #a0e9ff; border-radius: 45%; animation: wave 10s linear infinite; >.wave2 < left: -40%; top: 56%; background-color: #57d0ff; border-radius: 45%; animation: wave 8s linear infinite; >@keyframes wave < 100% < transform: rotate(360deg); >>

Таким образом, описанный выше принцип создания анимации в CSS можно использовать не только для создания эффекта движущихся волн, но и после небольших модификаций преобразовать, например в развевающийся на ветру флаг. Однако, об этом я расскажу в одной из следующих статей.

Источник

39+ CSS Wave Animation Examples

CSS Wave Animation

Hello Coder! Welcome to Codewithrandom with a new blog. Today we share 40+ Wave Animation Using Pure CSS. Here is a Trending Collection of Pure CSS Wave Animation Examples with Free Code.

CSS Wave Animation

Waves are a simple and calming animation that can be embedded or displayed on our site using basic play in CSS animation components. Here we will discuss many ways in which the wavey effect can be added to an element on our HTML document either by setting the SVG path or directly using it within the CSS code shared as we proceed further in the blog.

Читайте также:  Вставить значок в css

Using CSS we present CSS Wave Animation Examples projects with source code available for you to copy and paste directly into your own project.

In this blog post, we will discuss Wave Animation Using CSS with complete source code so you can just copy and paste them into your own project. Happy exploring and learning !!

master frontend development ebook cover

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

1. CSS Wave Border

Form Validation Using HTML, CSS, and JavaScript

Master Frontend Development Zero to Hero E-Book

Latest Updates

Master Frontend Development Zero to Hero E-Book

Category

  • 3d card
  • 3d cube slider
  • 3D Image Gallery
  • 50 project
  • add background video
  • animation
  • api
  • automatic image slider
  • automatic image slider using html css and javascript
  • Autoplay Carousel
  • back-end
  • bank management system
  • Bootstrap
  • Bootstrap Card
  • Box Shadow
  • button
  • C++
  • C++ Game
  • C++ Programming
  • C++ Project
  • Calculator
  • card
  • chat box
  • Claymorphism Design
  • clone project
  • code with random
  • Codewithrandom
  • coding with random
  • codinggyan
  • Color Game
  • Complete CSS Guide
  • Countdown Timer
  • Counter
  • Create Form using html css only
  • create verticle timeline using html css js
  • CSS
  • CSS & JavaScript
  • CSS Backgrounds and Borders
  • CSS Box Models
  • css card
  • CSS Colors
  • css course
  • Css Effect
  • css float
  • Css floating button
  • CSS Fonts
  • css grid
  • CSS Icons
  • CSS Introduction
  • CSS Links
  • CSS Lists
  • css loding animation
  • CSS Margins and CSS Padding
  • CSS Paper Effect
  • css project
  • css projectTask Management Ui
  • CSS Syntax and Selectors
  • CSS Text
  • css tooltip
  • CSS Width and Height
  • cursor
  • Custom Button
  • dark mode
  • diwali
  • dropdown menu
  • Dropmorphism
  • Ecommerce Website
  • em vs rem
  • flexbox
  • footer
  • Front-end
  • Front-end vs Back-end
  • Game
  • game project
  • grid
  • hamburger menu
  • header
  • heart icon css
  • Hover effect
  • HOW TO ADD PRODUCT IMAGE ZOOM ON HOVER
  • How to Create 3D Image Gallery using HTML
  • how to create Automatic Image slider
  • How to create HORIZONTAL TIMELINE
  • How to create verticle timeline
  • HTML
  • HTML & CSS
  • Html & CSS Project
  • HTML & CSSr
  • html tag
  • Image Css
  • Input html tags
  • Java
  • javascript
  • JavaScript Framework
  • JavaScript Game
  • JavaScript Keywords
  • JavaScript Libraries
  • javascript project
  • jquery
  • json
  • JSON Basics
  • Keyboard
  • Learn Coding
  • learn how to create form
  • Learn JavaScript
  • Learn Web Development
  • loading animation
  • login form
  • Main
  • Media query
  • menu
  • Modal Popup
  • navbar
  • new year project
  • nodejs
  • Number validation
  • Paraphrasing Tool
  • password
  • portfolios
  • Product Quick View animation
  • Programming
  • progress bar css
  • Project
  • Project Ideas
  • Project Management Dashboard UI
  • pure hamburger menu
  • Python
  • range slider
  • Responsive Menu
  • Ribbon
  • sass
  • Scroll Down Button
  • search bar
  • Shopping cart
  • Sidebar Menu
  • social media icons
  • svg
  • tab bar
  • Tailwind
  • tailwind css
  • Theme Swith
  • tic tac toe C++
  • Tic tac toe game
  • Toggle Button
  • Ul tag
  • Uncategorized
  • web design
  • web developer
  • Web Development
  • Web Development project
  • xml
  • Youtube Channel
Читайте также:  Java system exit method

Master Frontend Development Zero to Hero E-Book

CodeWithRandom

Thanks for visiting CodeWithRandom! Join Telegram (Click the Telegram Icon below) for source code files, pdf, etc.

For ANY Promotion queries, you can contact us at this email — [email protected]

Источник

16 CSS Water Effects

Collection of hand-picked free HTML and CSS water and waves effect code examples from Codepen, GitHub and other resources. Update of April 2021 collection. 4 new items.

Author

Made with

About a code

Water Wave CSS Effect

Pure CSS water wave text animation effect using CSS clip-path .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Sunrise Over Still Lake

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Octocat Sprite Swimming in the Ocean with CSS

This is a simple animation of Github’s logo, Octocat, swimming in the ocean to show how to animate sprites with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Pure CSS Rain

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Simple CSS Waves

Lightweight animation between header & content. Easy to customize and apply to any website! Works with all devices and screen sizes.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Underwater Pure CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Outline. Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Waves

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Pure CSS Random Rain with SVG and CSS Variables

Using randomly generated CSS variables cuts down the CSS and gives droplets random positioning and animation properties.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Made with

About a code

CSS Water Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Cup Filling with Water CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Water Drop

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Drip Drop Animation

Water dripping and dropping. Using bezier curve to get the correct speed.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

Water Droplets on Window

Focusing effect on either first translucent layer or the layer behind.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

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