Давненько я ничего не публиковала. Но вот возник такой вопрос. Я пишу про достатчно интересную анимацию на CSS. Но как делать фигуры используя только CSS? То есть самая начальная точка создания анимации.  Размещаю здесь этот пост. Сначала делаем фигуры, потом анимируем.  Итак, коллекция: 

1. Круг 

 

.d1 {
width: 100px; height: 100px;
background: #83A7C9;
border-radius: 50%;}

2. Овал

 

.d2 {
width: 200px; height: 100px;
background: #9CD6C0;
border-radius: 100px/50px;}

3. Треугольник вершиной вверх 

 

.d3 {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;}

4. Треугольник вершиной вниз 

 

.d4 {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #79849B;}

5. Треугольник вершиной влево 

 

.d5 {
width: 0; height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #959FB0;
border-bottom: 50px solid transparent;}

6. Треугольник вершиной вправо 

 

.d6 {
width: 0; height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #D0D4DC;
border-bottom: 50px solid transparent;}

7. Верхний левый угол 

 

.d7 {
width: 0; height: 0;
border-top: 100px solid #68B8AE;
border-right: 100px solid transparent;}

8. Верхний правый угол 

 

.d8 {
width: 0; height: 0;
border-top: 100px solid #82C6BE;
border-left: 100px solid transparent;}

9. Нижний левый угол 

 

.d9 {
width: 0; height: 0; 
border-bottom: 100px solid #BBE1DE;
border-right: 100px solid transparent;}

10. Нижний правый угол 

 

.d10 {
width: 0; height: 0;
border-bottom: 100px solid #CDE5E1;
border-left: 100px solid transparent;}

11. Трапеция 

 

.d11 {
height: 0; width: 100px;
border-bottom: 100px solid #FFE344;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

12. Параллелограмм 

 

.d12 {
margin-left: 20px; width: 150px; height: 100px;
transform: skew(20deg);
background: #D4D5DA;}

13. Шестиугольная звезда 

 

.d13 {
width: 0; height: 0; margin-bottom: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #374F9C;
position: relative;}
.d13:after {
content: "";
width: 0; height: 0;
position: absolute; top: 30px; left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #374F9C;}

14. Пятиугольная звезда 

 

.d14 {
margin: 50px 0; height: 0; width: 0;
position: relative;
border-right: 50px solid transparent;
border-bottom: 35px solid #E7337A;
border-left: 50px solid transparent;
transform: rotate(35deg);}
.d14:before, .d14:after {
content: "";
height: 0; width: 0;
position: absolute;}
.d14:before {
top: -26px; left: -32px;
border-bottom: 40px solid #E7337A;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
transform: rotate(-35deg);}
.d14:after {
top: 2px; left: -53px;
border-right: 50px solid transparent;
border-bottom: 35px solid #E7337A;
border-left: 50px solid transparent;
transform: rotate(-70deg);}

15. Стрелка 

 

.d15 {
width: 60px; height: 20px; margin: 10px 0;
background: #B74388;
position: relative;}
.d15:after{
content: "";
width: 0; height: 0;
position: absolute; top: -10px; left: 100%;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent #B74388;}

16. Шестиугольник 

 

.d16 {
margin: 20px 0; width: 100px; height: 55px;
background: #F1CCAE;
position: relative;}
.d16:before, .d16:after {
content: "";
width: 0; height: 0;
position: absolute; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}
.d16:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;}
.d16:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;}

17. Восьмиугольник 

 

.d17 {
width: 100px; height: 100px;
background: #54999A;
position: relative;}
.d17:before, .d17:after {
content: "";
width: 42px; height: 0;
position: absolute; left: 0;
border-left: 29px solid white;
border-right: 29px solid white;}
.d17:before {
top: 0;
border-bottom: 29px solid #54999A;}
.d17:after {
bottom: 0;
border-top: 29px solid #54999A;}

18. Сердце 

 

.d18 {
position: relative;
width: 100px; height: 80px;}
.d18:before, .d18:after {
content: "";
position: absolute; left: 50px; top: 0;
width: 50px; height: 80px;
background: #EE4156;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg); transform-origin: 0 100%;}
.d18:after {
left: 0;
transform: rotate(45deg); transform-origin: 100% 100%;}

19. Ромб 

 

.d19 {
width: 0; height: 0;
border: 50px solid transparent;
border-bottom-color: #53BA88;
position: relative; top: -50px;}
.d19:after {
content: "";
width: 0; height: 0;
position: absolute; left: -50px; top: 50px;
border: 50px solid transparent;
border-top-color: #53BA88;}

20. Ромб 

 

.d20 {
margin-bottom: 20px; width: 0; height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #47002D;
position: relative; top: -50px;}
.d20:after {
content: "";
width: 0; height: 0;
position: absolute; left: -50px; top: 70px;
border: 50px solid transparent;
border-top: 70px solid #47002D;}

21. Символ Инь-Ян 

 

.d21 {
width: 100px; height: 50px;
background: white;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
position: relative;}
.d21:before, .d21:after{
content: "";
width: 12px; height: 12px;
position: absolute; top: 50%;
border-radius: 50%;}
.d21:before {
left: 0;
background: white;
border: 19px solid black;}
.d21:after {
left: 50%;
background: black;
border: 19px solid white;}

22. Пакман 

 

.d22 {
width: 0; height: 0;
border-right: 60px solid transparent;
border-top: 60px solid #F4B915;
border-left: 60px solid #F4B915;
border-bottom: 60px solid #F4B915;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;}

23. Домик с крышей

 

 

.d23 {
height: 55px; width: 100px; margin: 35px 20px 0 0;
background: #B1BA5C;
position: relative;}
.d23:before {
content: "";
height: 0; width: 0;
position: absolute; left: 0; top: -35px;
border-bottom: 35px solid #B1BA5C;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

24. Крест

 

 

.d24 {
background: #CD6D45;
height: 100px; width: 20px;
position: relative; left: 40px;}
.d24:after {
content: "";
height: 20px; width: 100px;
background: #CD6D45;
position: absolute; left: -40px; top: 40px;}

25. Сегмент

 

.d25 {
width: 0; height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 110px solid #2B2F6E;
border-radius: 50%;}

26. Полумесяц

 

.d26 {
width: 100px; height: 100px; margin: -20px 0 20px 0;
border-radius: 50%;
box-shadow: 15px 15px 0 0 #FEC712;}

27. Лупа

 

.d27{
font-size: 10em; /* задает размер иконки */
width: 0.3em; height: 0.3em; margin-bottom: 20px;
border: 0.1em solid #52C8E4;
position: relative;
border-radius: 50%;}
.d27:before {
content: "";
width: 0.3em; height: 0.08em;
position: absolute; right: -0.25em; bottom: -0.1em;
background: #52C8E4;
transform: rotate(45deg);}

28. Шеврон

 

.d28 {
height: 50px; width: 160px; margin: 6px;
position: relative;}
.d28:before, .d28:after {
content: "";
height: 100%; width: 50%;
position: absolute; top: 0;
background: #F45919;}
.d28:before {
left: 0;
transform: skew(0deg, 10deg);}
.d28:after {
right: 0;
transform: skew(0deg, -10deg);}

29. Ретро-телевизор

 

.d29 {
width: 100px; height: 80px;
background: #BDE2E0;
border-radius: 50%/10%;
position: relative;}
.d29:before {
content: "";
position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%;
background: inherit;
border-radius: 5%/50%;}

30. Ленточка

 

.d30 {
width: 0; height: 0; 
border-width: 50px 30px 20px;
border-style: solid;
border-color: #E95557 #E95557 transparent;}

31. Плоская восьмиконечная звезда

 

.d31 {
width: 80px; height: 80px; margin: 10px;
background: #82707C;
position: relative;
transform: rotate(20deg);}
.d31:before {
content: "";
height: 80px; width: 80px;
background: inherit;
position: absolute; top: 0; left: 0;
transform: rotate(135deg);}

32. Плоская двенадцатиконечная звезда

 

.d32 {
width: 80px; height: 80px; margin: 10px;
background: #D7695A;
position: relative;}
.d32:before, .d32:after {
content: "";
height: 80px; width: 80px;
background: inherit;
position: absolute; top: 0; left: 0;}
.d32:before {
transform: rotate(30deg);}
.d32:after {
transform: rotate(60deg);}

33. Облачко комментария

 

.d33 {
width: 150px; height: 80px; margin-left: 26px;
background: #B5DDD4;
position: relative;
border-radius: 10px;}
.d33:before {
content: "";
width: 0; height: 0;
position: absolute; right: 100%; top: calc(50% - 12px);
border-top: 12px solid transparent;
border-right: 24px solid #B5DDD4;
border-bottom: 12px solid transparent;}

34. Цветок

 

.d34 {
width: 80px; height: 80px; margin-top: 25px;
background: #EE5E4F; 
position: relative; top: -15px; left: 15px;
border-radius: 8px;}
.d34:before, .d34:after {
content: "";
position: absolute; top: 0; left: 0;
width: 80px; height: 80px; 
background: inherit;
border-radius: 8px;}
.d34:before {
transform: rotate(30deg);}
.d34:after {
transform: rotate(60deg);}

35. Тюльпан

 

.d35 {
height: 15px; width: 60px;
background: linear-gradient(45deg, #E5556B 50%, transparent 51%), linear-gradient(315deg, #E5556B 50%, transparent 51%);
background-size: 30px 30px;
border-bottom: 40px solid #E5556B;
border-bottom-left-radius: 60%;
border-bottom-right-radius: 60%;}

36. Тюльпан

 

.d36 {
width: 20px; height: 20px; margin: 0 0 30px 10px;
border: 3px solid #AD1E21;
background: #EB4E48;
position: relative;
transform: rotate(45deg);}  
.d36:before, .d36:after {
content: "";
position: absolute;
width: 30px; height: 50px;
border: 3px solid #AD1E21;
transform: rotate(-45deg);}
.d36:before {
background: #F8D9D1;
border-radius: 0 100% 50% 90%;}
.d36:after {
left: 10px; top: -10px;
background: #F09C9C;
border-radius: 100% 0  90% 50%;}

37. Лепесток

 

.d37 {
width: 5em; height: 5em; margin: 1em 1em;
background: #02C986;
border-radius: 100% 0;}

38. Цветок из лепестков

 

.d38 {
width: 2.5em; height: 2.5em; margin: 2em 4.5em 4em;
border-radius: 100% 0;
background: #32336B;
box-shadow: -3em 3em #32336B;
position: relative;}
.d38:before, .d38:after {
content: "";
width: 2.5em; height: 2.5em; margin: 1em 3em;
border-radius: 0 100%;
background: #32336B;
position: absolute; left: -6em; top: -1em;
box-shadow: 3em 3em #32336B;
transform-origin: 2.75em 2.75em;}
.d38:before {
transform: rotate(-30deg);}
.d38:after {
transform: rotate(30deg);}

39. Облако

 

.d39 {
position: relative;
width: 3em; height: 3em; margin: 2em;
background: #D5DEE9;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;
border-radius: 50% 50% 0 0;}
.d39:before, .d39:after {
content: "";
position: absolute; bottom: -0.25em;
background: inherit;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;}
.d39:before {
left: 80%; 
width: 60%; height: 60%;
border-left: none;
border-radius: 50% 50% 50% 0;}
.d39:after {
right: 80%;
width: 80%; height: 80%;
border-right: none;
border-radius: 50% 50% 0;}

40. Круг из четырех сегментов

 

.d40 {
width: 0; height: 0;
background: lightblue;
border-radius: 50%;
border-style: solid;
border-width: 50px;
border-top-color: salmon;
border-right-color: transparent;
border-bottom-color: salmon;
border-left-color: transparent;}

41. Прелоадер

 

.d41 {
width: 0; height: 0;
margin: 60px;
border: 13px solid transparent;
border-radius:50%;
box-shadow: -30px -30px 0 0 red,
30px 30px 0 0 blue,
-30px 30px 0 0 yellow,
30px -30px 0 0 grey,
0 -45px 0 0 orange,
0 45px 0 0 aqua,
45px 0 0 0 brown,
-45px 0 0 0 crimson;}

42. Прелоадер

 

.d42 {
width: 100px; height: 100px;
border-radius: 50%;
background: #BCD3DC;
position: relative;}
.d42:after {
content: "";
width: 60px; height: 60px;
position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);
background: #FFD646;
border-radius: 0 50% 50% 50%;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);}

43. Прелоадер

 

.d43 {
width: 100px; height: 100px;
border: 15px solid #497DDD;  
border-right-color: transparent;
border-radius: 50%;
border-left-color:transparent;
position: relative;}
.d43:after {
content: "";
width: 40px; height: 40px;
border-radius: 50%;
position: absolute; top: calc(50% - 20px); left: calc(50% - 20px);
background: -webkit-radial-gradient(#EF7D55, #F24012);
background: -o-radial-gradient(#EF7D55, #F24012);
background: radial-gradient(#EF7D55, #F24012);}

Последние статьи из раздела "Про Дизайн (CSS и анимация)":

Возможно Вам будут интересны другие статьи из разделов:

Интересно, полезно? Поделитесь у себя:



comments powered by HyperComments