| Kosten | Четверг, 25 Июня 2020 | Сообщение 1 |
| В этом уроке мы рассмотрим самую удивительную анимацию CSS, которая преобразует эффект трехмерной кнопки с помощью CSS3. В этой статье вы узнаете, как сделать простую и очень эффективную кнопку трехмерного преобразования с помощью CSS3. Мы создаем этот эффект, это когда пользователь наводит курсор на данную кнопку.
Есть тысячи анимации на эффекте наведения, но все же это самая удивительная по своим свойствам преобразования. Причина в его 3D-способности. Мы любим смотреть фильмы в 3d, любим смотреть виртуальную реальность в 3d.
1. В приведенном выше коде вы можете найти тег деления с именами классов сцена, куб, грань куба, лицевая грань и верхняя грань. Здесь класс сцены используют для добавления ширины и перспективы элемента. Где перспектива похожа на камеру, которая показывает расстояние от объекта до ваших глаз. Поэтому, когда элемент уменьшает его размер, кажется, что он далеко от вас.
2. Теперь давайте перейдем к другому классу, который является кубом. Где используем этот класс только для создания кнопки с некоторой высотой и шириной, где также берем свойство transform style, что свойство сделает ваш элемент 3d.
3. Класс кубического лица используется для указания высоты, ширины и положения кнопки. Это фактическая кнопка, показанная на картинке. Эта кнопка имеет две стороны. Спереди и сверху. Вы можете сделать больше, чем это. Но в этой статье мы создаем только две стороны этой кнопки.
4. Лицевая сторона и верхняя сторона — две стороны кнопки. Передняя поверхность представляет лицевую сторону, а верхняя сторона представляет верхнюю сторону.
Прежде чем потратить слишком много времени, давайте начнем и создадим эффект трансформации 3D-кнопки с помощью CSS3.
HTML
Код <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>3D Button</title> <link rel="stylesheet" href="Style.css"> </head> <body> <div class="scene"> <div class="cube"> <div class="cube-face front-face">GET A QUOTE</div> <div class="cube-face top-face">LET'S START</div> </div> </div> </body> </html>
CSS
Код html,
body {
background: #ffe259;
background: linear-gradient(
to right,
#ffa751,
#ffe259
);
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.scene {
width: 150px;
height: 50px;
perspective: 900px;
margin: 16.3em auto;
}
.cube {
width: 150px;
height: 50px;
position: relative;
transform: translateZ(-50px);
transition: transform 0.5s;
transform-style: preserve-3d;
}
.cube-face {
position: absolute;
width: 200px;
height: 50px;
text-align: center;
font-size: 25px;
padding-top: 20px;
cursor: pointer;
background: #041f1e;
color: whitesmoke;
}
.front-face {
transform: rotateY(0deg) translateZ(24px);
}
.top-face {
transform: rotateX(90deg) translateZ(35px);
background: #e01a4f;
color: whitesmoke;
}
.cube:hover {
transform: rotateX(-90deg);
}
Имейте в виду, что если вы хотите создать свои собственные имена классов, вы можете это сделать, но убедитесь, где вы изменили это имя и в других отраженных файлах. В приведенном выше коде мы просто добавляем свойство transform rotateX, чтобы повернуть кнопку вертикально, когда пользователь наводит на нее курсор.
CSS3 предоставляет нам отличную поддержку использования свойства transform. Это свойство позволяет нам преобразовывать элемент, вращать элемент, наклонять элемент и многое другое. Кроме того, вы также можете использовать @keyframes, чтобы оживить анимацию. @keyframes - это ключ к созданию анимации на протяжении многих лет.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Пятница, 26 Июня 2020 | Сообщение 2 |
|
| Это по тематике, а точнее по кнопке в 3d формате, где хотелось показать вам, как использовать некоторые из удивительных новых возможностей CSS3.
HTML
Код <button class="depth" type="button">✔</button>
CSS
Код html {
-webkit-tap-highlight-color: hsla(0,0,0,0);
tap-highlight-color: hsla(0,0,0,0);
}
body {
background-color: #363636;
background-image: linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)),
linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
background-position:0 0, 2px 2px;
background-size:4px 4px;
padding: 100px;
}
button {
left: 50%;
margin: -40px;
position: absolute;
top: 50%;
}
button:hover,
button:active {
outline: 0;
}
/* 3D Button */
button.depth {
background: #444;
border: none;
border-radius: 80px;
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 8px hsla(0,0%,0%,.5),
inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
inset 0 1px 1px 8px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 10px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
color: #303030;
cursor: pointer;
font: bold 40px/85px sans-serif;
height: 80px;
padding: 0;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
width: 80px;
}
button.depth:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
0 1px 1px hsla(0,0%,100%,.25),
0 -1px 1px hsla(0,0%,0%,.75);
}
button.depth:active {
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
inset 0 0 2px 4px hsla(0,0%,0%,.2),
inset 0 0 2px 6px hsla(0,0%,0%,.2),
inset 0 0 1px 7px hsla(0,0%,0%,.5),
inset 0 5px 15px 7px hsla(0,0%,0%,.15),
inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
inset 0 1px 1px 7px hsla(0,0%,100%,.25),
inset 0 -30px 30px hsla(0,0%,0%,.1),
inset 0 30px 30px hsla(0,0%,0%,.2),
0 -4px 8px 4px hsla(0,0%,0%,.5),
0 5px 10px hsla(0,0%,0%,.25),
0 0 2px 2px hsla(0,0%,0%,.2),
0 0 2px 4px hsla(0,0%,0%,.2),
0 0 2px 6px hsla(0,0%,0%,.2),
0 0 2px 8px hsla(0,0%,0%,.5),
0 1px 2px 8px hsla(0,0%,100%,.25),
0 -1px 2px 8px hsla(0,0%,0%,.5);
line-height: 86px;
}
Также можно посмотреть в рабочей форме.
Демонстрация
| | Страна: (RU) |
| |
