Close

CSS Carousel Animation

This is an example of a bootstrap web form with an animated CSS carousel feature, designed using HTML, CSS, and bootstrap framework 4. The emoji icons are imported to the code with their URLs. The carousel is implemented in CSS. The five items in the carousel are given five different Unicodes and an animation time of 24s. The body of the form is given the styles of font-family as 'Work Sans', sans-serif, font-weight as 400, and height as 100vh. The body is given a linear gradient background color of linear-gradient (60deg, #420285, #08BDBD). The carousel items are given a filter as of drop-shadow(0 2px 2px #555), whereas the item heads are given a border-radius of 50% to get the circular shape, background color as #d7f7fc, width and height as 90px, and font-size as 50px. The carousel body is given the background color #fff, border-radius as 8px, and padding as 16px 20px 16px 70px. The title of the carousel item has the styles of text-transform as uppercase to automatically convert the text to uppercase, font-size as 20px, and margin-top as 10px. Source: https://codepen.io/Hannah314/pen/BayxjOp

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.