高大上的网站欣赏,惠州网站建设电话,网页游戏网站在线玩,房屋3d设计软件这段代码创建了一个具有 3D 效果和动画的按钮#xff0c;按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画#xff0c;图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效果和背景渐变增加了页面的美观性。
演示效果 HT…这段代码创建了一个具有 3D 效果和动画的按钮按钮上有 SVG 图标和文本。按钮在鼠标悬停时会显示一个漂浮点动画图标会消失并显示一个线条动画。这种效果适用于吸引用户注意并提供视觉反馈。按钮的折叠效果和背景渐变增加了页面的美观性。
演示效果 HTMLCSS
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title公众号关注前端Hardy/titlestylebody {margin: 0;padding: 0;background: #212121;display: flex;align-items: center;justify-content: center;height: 100vh;}.button {--h-button: 48px;--w-button: 102px;--round: 0.75rem;cursor: pointer;position: relative;display: inline-flex;align-items: center;justify-content: center;overflow: hidden;transition: all 0.25s ease;background: radial-gradient(65.28% 65.28% at 50% 100%,rgba(223, 113, 255, 0.8) 0%,rgba(223, 113, 255, 0) 100%),linear-gradient(0deg, #7a5af8, #7a5af8);border-radius: var(--round);border: none;outline: none;padding: 12px 18px;}.button::before,.button::after {content: ;position: absolute;inset: var(--space);transition: all 0.5s ease-in-out;border-radius: calc(var(--round) - var(--space));z-index: 0;}.button::before {--space: 1px;background: linear-gradient(177.95deg,rgba(255, 255, 255, 0.19) 0%,rgba(255, 255, 255, 0) 100%);}.button::after {--space: 2px;background: radial-gradient(65.28% 65.28% at 50% 100%,rgba(223, 113, 255, 0.8) 0%,rgba(223, 113, 255, 0) 100%),linear-gradient(0deg, #7a5af8, #7a5af8);}.button:active {transform: scale(0.95);}.fold {z-index: 1;position: absolute;top: 0;right: 0;height: 1rem;width: 1rem;display: inline-block;transition: all 0.5s ease-in-out;background: radial-gradient(100% 75% at 55%,rgba(223, 113, 255, 0.8) 0%,rgba(223, 113, 255, 0) 100%);box-shadow: 0 0 3px black;border-bottom-left-radius: 0.5rem;border-top-right-radius: var(--round);}.fold::after {content: ;position: absolute;top: 0;right: 0;width: 150%;height: 150%;transform: rotate(45deg) translateX(0%) translateY(-18px);background-color: #e8e8e8;pointer-events: none;}.button:hover .fold {margin-top: -1rem;margin-right: -1rem;}.points_wrapper {overflow: hidden;width: 100%;height: 100%;pointer-events: none;position: absolute;z-index: 1;}.points_wrapper .point {bottom: -10px;position: absolute;animation: floating-points infinite ease-in-out;pointer-events: none;width: 2px;height: 2px;background-color: #fff;border-radius: 9999px;}keyframes floating-points {0% {transform: translateY(0);}85% {opacity: 0;}100% {transform: translateY(-55px);opacity: 0;}}.points_wrapper .point:nth-child(1) {left: 10%;opacity: 1;animation-duration: 2.35s;animation-delay: 0.2s;}.points_wrapper .point:nth-child(2) {left: 30%;opacity: 0.7;animation-duration: 2.5s;animation-delay: 0.5s;}.points_wrapper .point:nth-child(3) {left: 25%;opacity: 0.8;animation-duration: 2.2s;animation-delay: 0.1s;}.points_wrapper .point:nth-child(4) {left: 44%;opacity: 0.6;animation-duration: 2.05s;}.points_wrapper .point:nth-child(5) {left: 50%;opacity: 1;animation-duration: 1.9s;}.points_wrapper .point:nth-child(6) {left: 75%;opacity: 0.5;animation-duration: 1.5s;animation-delay: 1.5s;}.points_wrapper .point:nth-child(7) {left: 88%;opacity: 0.9;animation-duration: 2.2s;animation-delay: 0.2s;}.points_wrapper .point:nth-child(8) {left: 58%;opacity: 0.8;animation-duration: 2.25s;animation-delay: 0.2s;}.points_wrapper .point:nth-child(9) {left: 98%;opacity: 0.6;animation-duration: 2.6s;animation-delay: 0.1s;}.points_wrapper .point:nth-child(10) {left: 65%;opacity: 1;animation-duration: 2.5s;animation-delay: 0.2s;}.inner {z-index: 2;gap: 6px;position: relative;width: 100%;color: white;display: inline-flex;align-items: center;justify-content: center;font-size: 16px;font-weight: 500;line-height: 1.5;transition: color 0.2s ease-in-out;}.inner svg.icon {width: 18px;height: 18px;transition: fill 0.1s linear;}.button:focus svg.icon {fill: white;}.button:hover svg.icon {fill: transparent;animation:dasharray 1s linear forwards,filled 0.1s linear forwards 0.95s;}keyframes dasharray {from {stroke-dasharray: 0 0 0 0;}to {stroke-dasharray: 68 68 0 0;}}keyframes filled {to {fill: white;}}/style
/headbodybutton typebutton classbuttonspan classfold/spandiv classpoints_wrapperi classpoint/ii classpoint/ii classpoint/ii classpoint/ii classpoint/ii classpoint/ii classpoint/ii classpoint/ii classpoint/ii classpoint/i/divspan classinnersvg classicon fillnone strokecurrentColor viewBox0 0 24 24xmlnshttp://www.w3.org/2000/svg stroke-linecapround stroke-linejoinround stroke-width2.5polyline points13.18 1.37 13.18 9.64 21.45 9.64 10.82 22.63 10.82 14.36 2.55 14.36 13.18 1.37/polyline/svg点击开奖/span/button/body/htmlHTML 结构
button定义了一个按钮元素用于触发点击事件并应用了类名button来应用CSS样式。fold一个用于创建按钮折叠效果的span元素。points_wrapper包含多个point元素的容器用于创建漂浮点效果。point多个point元素用于创建漂浮点效果。inner包含按钮文本和图标的span元素。icon一个SVG图标用于显示按钮内的图标。
CSS 样式
body设置页面的外边距、内边距、背景色、显示方式、对齐方式和高度。.button定义了按钮的基本样式包括光标样式、位置、显示方式、对齐方式、溢出、过渡效果、背景渐变和圆角。.button::before, .button::after使用伪元素为按钮添加额外的视觉效果。.button:active定义了按钮被按下时的样式包括缩放效果。.fold定义了按钮折叠效果的样式包括位置、尺寸、过渡效果和背景渐变。.fold::after使用伪元素为折叠效果添加额外的视觉效果。.points_wrapper定义了漂浮点容器的样式包括溢出、尺寸、位置和指针事件。.points_wrapper .point定义了漂浮点的样式包括位置、动画和背景色。keyframes floating-points定义了一个关键帧动画用于控制漂浮点的浮动效果。.inner定义了按钮内部文本和图标的样式包括位置、尺寸、颜色、字体和过渡效果。.inner svg.icon定义了SVG图标的样式包括尺寸和过渡效果。.button:focus svg.icon和.button:hover svg.icon定义了SVG图标在获得焦点和鼠标悬停时的样式包括填充色和动画。
