SVG svg个人信息卡片折叠式3D打开动画特效(个人强烈推荐)

最新推荐文章于 2022-11-02 09:40:34 发布
最新推荐文章于 2022-11-02 09:40:34 发布
阅读量498 收藏
点赞数
分类专栏： HTML+CSS+SVG+VUE 文章标签： svg
原文链接：https://demo.demohuo.top/jquery/46/4688/demo/
版权

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>svg个人信息卡片折叠式3D打开动画特效</title>
		<style>
			/* cyrillic-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xFIzIFKw.woff2) format('woff2');
			  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
			}
			/* cyrillic */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xMIzIFKw.woff2) format('woff2');
			  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
			}
			/* greek-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xEIzIFKw.woff2) format('woff2');
			  unicode-range: U+1F00-1FFF;
			}
			/* greek */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xLIzIFKw.woff2) format('woff2');
			  unicode-range: U+0370-03FF;
			}
			/* vietnamese */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xHIzIFKw.woff2) format('woff2');
			  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
			}
			/* latin-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xGIzIFKw.woff2) format('woff2');
			  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
			  font-family: 'Roboto';
			  font-style: italic;
			  font-weight: 400;
			  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
			  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* cyrillic-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
			  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
			}
			/* cyrillic */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
			  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
			}
			/* greek-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
			  unicode-range: U+1F00-1FFF;
			}
			/* greek */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
			  unicode-range: U+0370-03FF;
			}
			/* vietnamese */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
			  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
			}
			/* latin-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
			  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 400;
			  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
			  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}
			/* cyrillic-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');
			  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
			}
			/* cyrillic */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');
			  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
			}
			/* greek-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');
			  unicode-range: U+1F00-1FFF;
			}
			/* greek */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');
			  unicode-range: U+0370-03FF;
			}
			/* vietnamese */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');
			  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
			}
			/* latin-ext */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');
			  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
			}
			/* latin */
			@font-face {
			  font-family: 'Roboto';
			  font-style: normal;
			  font-weight: 700;
			  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
			  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
			}

			:root {
			  --color-primary: #43a047;
			  --color-primary-darken: #388e3c;
			  --color-secondary: #F6D8D1;
			  --color-white: white;
			  --color-accent: #FCF5F3;
			  --spacer: 1.25rem;
			  --d: 2000ms;
			  --d2: 600ms;
			  --e: cubic-bezier(0.445, 0.05, 0.55, 0.95);
			  --e2: cubic-bezier(0.23, 1, 0.32, 1);
			}
			* {
			  box-sizing: border-box;
			}
			body {
			  background-color: var(--color-secondary);
			  display: grid;
			  font-family: 'Roboto', sans-serif;
			  height: 100vh;
			  margin: 0;
			  overflow: hidden;
			  padding: var(--spacer);
			  place-items: center;
			}
			.card {
			  display: flex;
			  flex-direction: column;
			  max-width: 350px;
			  overflow: hidden;
			  padding: 0 var(--spacer);
			  perspective: 1200px;
			  position: relative;
			  transform: translateY(30%);
			  transition: transform var(--d2) var(--e2);
			}
			.card.is-active {
			  animation: throw var(--d2) var(--e2) forwards;
			}
			.card.is-closing {
			  transform: translateY(0);
			}
			.card__illustration {
			  cursor: pointer;
			  display: flex;
			  justify-content: center;
			  width: 100%;
			  background-color: var(--color-accent);
			  z-index: 2;
			}
			.card__illustration svg {
			  width: 100%;
			  max-width: 150px;
			  transform: translate(calc(var(--x) / 100 * 1px), calc(var(--y) / 100 * 1px));
			}
			.card__illustration .face-group {
			  transform: translate(calc(var(--x) / 120 * 1px), calc(var(--y) / 120 * 1px));
			}
			.is-active .card__illustration, .is-closing .card__illustration {
			  pointer-events: none;
			}
			.is-active .card__illustration svg,
			.is-active .card__illustration .face-group, .is-closing .card__illustration svg,
			.is-closing .card__illustration .face-group {
			  transform: translate(0, 0);
			}
			.card__content {
			  position: relative;
			  transform: scaleY(0);
			  transform-origin: 0 0;
			  z-index: 1;
			}
			.is-closing .card__content {
			  animation: slide-up var(--d2) var(--e2) forwards;
			  transform: scaleY(1);
			}
			.is-active .card__content {
			  animation: swing var(--d) calc(var(--d2) / 2) var(--e) forwards;
			}
			.card__info {
			  background-color: var(--color-white);
			  padding: var(--spacer);
			}
			.card__info > * + * {
			  margin-top: var(--spacer);
			}
			.card__name {
			  font-size: 1.75rem;
			  font-weight: bold;
			}
			.card__title {
			  display: inline-block;
			  background-color: var(--color-primary);
			  border-radius: 360px;
			  color: var(--color-white);
			  font-size: 0.75rem;
			  letter-spacing: 0.025rem;
			  padding: 0.5rem 1rem;
			}
			.card__desc {
			  font-size: 1rem;
			  line-height: 1.4;
			}
			.card__actions {
			  display: flex;
			  width: 100%;
			}
			.btn {
			  background-color: var(--color-primary);
			  border: none;
			  color: white;
			  cursor: pointer;
			  font-family: inherit;
			  font-size: 0.75rem;
			  letter-spacing: 0.05rem;
			  margin: 0;
			  outline: none;
			  padding: var(--spacer);
			  position: relative;
			  text-transform: uppercase;
			  transition: background-color var(--d2) var(--e2);
			  transform-origin: 0 0;
			}
			.btn--action {
			  flex: 1;
			}
			.btn--action:nth-child(2) {
			  background-color: var(--color-primary-darken);
			}
			.is-active .btn--action {
			  transform: scaleX(0);
			}
			.is-active .btn--action:nth-child(1) {
			  animation: swing calc(var(--d) * 1.25) calc(var(--d) / 4) var(--e) forwards;
			}
			.is-active .btn--action:nth-child(2) {
			  animation: swing calc(var(--d) * 1.5) calc(var(--d) / 3) var(--e) forwards;
			}
			.btn--close {
			  align-items: center;
			  background-color: transparent;
			  display: flex;
			  justify-content: center;
			  opacity: 0;
			  position: absolute;
			  padding: calc(var(--spacer) / 2);
			  right: var(--spacer);
			  top: 0.25rem;
			  transition: opacity var(--d2) var(--d) var(--e2);
			  visibility: hidden;
			  z-index: 2;
			}
			.is-active .btn--close {
			  visibility: visible;
			  opacity: 1;
			}
			.btn--close > svg {
			  width: 1.5rem;
			  height: 1.5rem;
			}
			@keyframes throw {
			  40% {
			    transform: translateY(-10%) rotate(-2deg);
			  }
			  50% {
			    transform: translateY(30%) rotate(10deg);
			  }
			  100% {
			    transform: translateY(0);
			  }
			}
			@keyframes swing {
			  0% {
			    transform: rotateX(90deg);
			  }
			  15% {
			    transform: rotateX(-70deg);
			  }
			  30% {
			    transform: rotateX(50deg);
			  }
			  45% {
			    transform: rotateX(-30deg);
			  }
			  60% {
			    transform: rotateX(15deg);
			  }
			  75% {
			    transform: rotateX(-10deg);
			  }
			  90% {
			    transform: rotateX(5deg);
			  }
			  100% {
			    transform: rotateX(0);
			  }
			}
			@keyframes slide-up {
			  to {
			    transform: translateY(-100%);
			  }
			}
		</style>
	</head>
	<body>
		<div class="card">
		  	<div class="card__illustration">
		    	<svg viewBox="0 0 100 100">
		      		<g class="face-group">
		        		<path class="face" d="m38.977 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"></path>
		        		<path class="face" d="m60.477 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"></path>
	        			<path class="face" d="m48.203 69.309c1.7344 0 3.1484-1.4141 3.1484-3.1484 0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.1836-0.96484 2.1484-2.1484 2.1484s-2.1484-0.96484-2.1484-2.1484c0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.7344 1.4141 3.1484 3.1484 3.1484z"></path>
		      		</g>
		      		<path d="m35.492 24.371c0.42187-0.35156 0.48047-0.98438 0.125-1.4062-0.35156-0.42188-0.98438-0.48438-1.4062-0.125-5.1602 4.3047-16.422 17.078-9.5312 42.562 0.21484 0.79688 0.85547 1.4062 1.6641 1.582 0.15625 0.035156 0.31641 0.050781 0.47266 0.050781 0.62891 0 1.2344-0.27344 1.6445-0.76562 0.82812-0.98828 2.0039-1.5391 2.793-1.8203 0.56641 1.6055 1.4766 3.3594 2.9727 4.9414 2.2852 2.4219 5.4336 3.9453 9.3867 4.5547-3.6055 4.5-3.8047 10.219-3.8086 10.484-0.011719 0.55078 0.42187 1.0078 0.97656 1.0234h0.023438c0.53906 0 0.98437-0.42969 1-0.97266 0-0.054688 0.17187-4.8711 2.9805-8.7773 0.63281 1.2852 1.7266 2.5 3.4141 2.5 1.7109 0 2.7578-1.2695 3.3398-2.6172 2.8867 3.9258 3.0586 8.8359 3.0586 8.8906 0.015625 0.54297 0.46094 0.97266 1 0.97266h0.023438c0.55078-0.015625 0.98828-0.47266 0.97656-1.0234-0.007812-0.26953-0.20703-6.0938-3.9141-10.613 7.0781-1.3086 10.406-5.4219 11.969-8.9766 1.0508 0.98828 2.75 2.1992 4.793 2.1992 0.078126 0 0.15625 0 0.23828-0.003906 0.47266-0.023438 1.5781-0.074219 3.4219-4.4219 1.1172-2.6406 2.1406-6.0117 2.8711-9.4922 4.8281-22.945-4.7852-30.457-9.1445-32.621-12.316-6.1172-22.195-3.6055-28.312-0.42188-0.48828 0.25391-0.67969 0.85938-0.42578 1.3477s0.85938 0.67969 1.3477 0.42578c5.7031-2.9688 14.934-5.3047 26.5 0.4375 7.1875 3.5703 9 11.586 9.2539 17.684 0.49609 11.93-4.2617 23.91-5.7344 25.062h-0.015626c-1.832 0-3.4102-1.5742-4.0352-2.2852 0.28906-0.99609 0.44531-1.8672 0.52734-2.5117 0.62891 0.16797 1.2812 0.27344 1.9727 0.27344 0.55469 0 1-0.44922 1-1 0-0.55078-0.44531-1-1-1-7.3203 0-10.703-13.941-10.734-14.082-0.097656-0.40625-0.4375-0.71094-0.85156-0.76172-0.43359-0.050781-0.82031 0.16406-1.0117 0.53906-1.8984 3.7188-1.4297 6.7539-0.67969 8.668-6.2383-2.2852-8.9766-8.6914-9.0078-8.7617-0.17969-0.43359-0.62891-0.68359-1.1016-0.60156-0.46094 0.082032-0.80469 0.47266-0.82422 0.94141-0.14062 3.3359 0.67188 5.75 1.5 7.3164-8.3125-2.4297-10.105-11.457-10.184-11.875-0.097656-0.51562-0.57422-0.86328-1.0898-0.8125-0.51953 0.054687-0.90625 0.50391-0.89062 1.0234 0.41406 13.465-1.8516 17.766-3.2383 19.133-0.66406 0.65625-1.1992 0.67188-1.2383 0.67188-0.53906-0.050781-1.0156 0.31641-1.0938 0.85156-0.078125 0.54688 0.29688 1.0547 0.84375 1.1328 0.03125 0.003906 0.11328 0.015625 0.23828 0.015625 0.36719 0 1.1016-0.09375 1.9414-0.66406 0.050781 0.38672 0.125 0.81641 0.21875 1.2656-1.0273 0.35156-2.6211 1.0781-3.7812 2.4648-0.015625 0.019532-0.054687 0.066406-0.15625 0.046875-0.039062-0.007812-0.13281-0.039062-0.16406-0.15234-2.1875-8.1094-5.7148-28.309 8.8867-40.496zm12.711 51.828c-1.0039 0-1.5898-1.207-1.8672-2.0117 0.48047 0.023438 0.95703 0.050781 1.4531 0.050781 0.74219 0 1.4453-0.035156 2.1289-0.082031-0.24219 0.83594-0.76172 2.043-1.7148 2.043zm-13.148-30.664c1.9531 3.6211 5.6367 7.9102 12.305 8.6992 0.43359 0.046875 0.83984-0.18359 1.0234-0.57422 0.18359-0.39062 0.089844-0.85938-0.22656-1.1523-0.074219-0.070312-1.2734-1.2227-1.9688-3.6367 2 2.6094 5.3359 5.6836 10.305 6.5664 0.42187 0.070312 0.83594-0.125 1.0469-0.49219 0.21094-0.36719 0.16406-0.82812-0.11719-1.1484-0.023437-0.027344-1.9414-2.2969-1.2891-5.8906 1.2227 3.5508 3.7461 9.2227 7.8945 11.551-0.03125 0.55859-0.14844 1.668-0.55078 3.0156-0.085937 0.13672-0.125 0.28516-0.13672 0.44531-1.3008 3.8906-5.0039 9.3281-15.547 9.3281-5.375 0-9.4414-1.418-12.086-4.2109-3.5664-3.7656-3.332-8.8477-3.332-8.8984v-0.011719c1.5898-2.7227 2.5-7.3203 2.6797-13.59z"></path>
		    	</svg>
		  	</div>
		  	<div class="card__content">
		    	<div class="card__info">
		      		<h2 class="card__name">摩根</h2>
		      		<h3 class="card__title">蚂蚁收集器</h3>
		      		<p class="card__desc">摩根从六岁起就开始收集蚂蚁，现在有十几只蚂蚁，但裤子里一只也没有。</p>
		    	</div>
		    	<div class="card__actions">
		      		<button class="btn btn--action">点赞</button>
		      		<button class="btn btn--action">收藏</button>
		    	</div>
		  	</div>
		  	<button class="btn btn--close">
	    		<svg viewBox="0 0 24 24">
		      		<path fill="var(--color-primary)" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
		    	</svg>
		  	</button>
		</div>
	</body>
	<script>
		const card = document.querySelector('.card');
		const open = card.querySelector('.card__illustration');
		const close = card.querySelector('.btn--close');
		const content = card.querySelector('.card__content');
		const illustration = card.querySelector('.card__illustration')
		const cls = {
		  active: 'is-active',
		  closing: 'is-closing'
		};
		open.addEventListener('click', () => {
		  card.classList.add(cls.active);
		});
		close.addEventListener('click', () => {
		  card.classList.add(cls.closing);
		  card.classList.remove(cls.active);
		});
		content.addEventListener('animationend', () => {
		  card.classList.remove(cls.closing)
		});
		illustration.addEventListener('mousemove', function(e) {
		  const r = this.getBoundingClientRect()
		  this.style.setProperty('--x', e.clientX - (r.left + Math.floor(r.width / 2)))
		  this.style.setProperty('--y', e.clientY - (r.top + Math.floor(r.height / 2))) 
		});
		illustration.addEventListener('mouseout', function() {
		  this.style.setProperty('--x', 0)
		  this.style.setProperty('--y', 0)
		});
	</script>
</html>

效果：

豆皮没有豆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效
weixin_36250086的博客
06-03 1849
1.SVG玫瑰花盛开动画SVG还是很强大的，我们之前也分享过很多利用SVG绘制出来的各种动画特效。比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画。今天我们要分享另外一款基于SVG的玫瑰花盛开动画，当鼠标滑过玫瑰花时，玫瑰花就会缓缓盛开，情景非常浪漫。2.jQuery/CSS3动感实用的进度条插件 10种漂亮外观最近这两天一直在为大家分享一些HTML5、CS...
css3 svg卡片点击折叠打开动画特效
06-11
在这个“css3 svg卡片点击折叠打开动画特效”中，我们主要探讨如何利用这两者来创建一个吸引人的用户界面。 首先，CSS3（Cascading Style Sheets Level 3）是样式表语言，用于描述HTML或XML（包括如SVG、MathML等...
html5 svg插件,基于HTML5 SVG可互动的3D标签云jQuery插件
weixin_39716703的博客
06-10 361
svg3dtagcloud.js是一款基于HTML5 SVG的3D标签云jQuery插件。该3D标签云插件不需要额外的CSS样式，可使用鼠标与标签进行互动，并提供很多参数来控制标签云的外观。使用方法使用该3D标签云插件需要引入jQuery和jquery.svg3dtagcloud.min.js文件。HTML结构可以使用一个容器来作为该3D标签云的包裹容器。初始化插件首先你需要设置一个对象数组遍历，...
svg 3d多边体破碎重组动画js特效
ICode联盟
11-02 167
svg实现的旋转的3d多边体，破碎重组动画特效。
SVG的3D实现
04-17
针对SVG在3D图形的描述与绘制上存在局限性的问题,提出了一种SVG的3D实现方法;详细介绍了SVG的2D坐标系到3D坐标系的转换原理,给出了转换到3D坐标系后的SVG-3D图形的绘制与操控流程,并以在3D场景中绘制一个正立方体和圆球体为例,介绍了在HTML页面中采用JavaScript创建3D场景和绘制与操控这2个图形的实现。
通过svg实现动画效果
weixin_39150852的博客
04-30 1628
1.拿到psd格式文件，选中相应图层，右键复制svg或者导出为svg 2. 使用svg标签渲染，复制的svg中width和height单位是cm <div class="svg-streamline"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="203" height="110.5"> &l
html5 svg 3D同心圆旋转动画特效
06-11
在本案例中，"html5 svg 3D同心圆旋转动画特效"是利用HTML5的SVG元素和JavaScript实现的一种创新视觉效果。这种效果通过多个不同大小的彩色圆圈组合，呈现出3D旋转的动态画面，增加了网站的互动性和吸引力。 SVG是...
HTML5加SVG流体3D自行车骑行动画特效.zip
07-11
总结来说，"HTML5加SVG流体3D自行车骑行动画特效"是一个展示HTML5和SVG结合使用来创建动态、交互式3D动画的实例。它涉及到HTML5的Canvas和SVG的结合使用，JavaScript编程以驱动动画，以及CSS3的3D转换技术。这个项目...
HTML5+SVG流体3D自行车骑行动画特效
06-10
在这个“HTML5+SVG流体3D自行车骑行动画特效”项目中，开发者利用这两种技术的特性，创造了一个逼真的3D自行车动画，尽管它可能在实际应用中并不常见，但其独特的视觉效果无疑能吸引用户的眼球。 首先，HTML5作为新...
js svg全屏打开菜单动画特效.zip
07-11
JavaScript SVG全屏打开菜单动画特效是一种利用JavaScript和SVG（可缩放矢量图形）技术实现的交互式用户体验设计。在现代网页开发中，这种特效能够为用户带来生动、直观且富有创意的导航体验，尤其适用于响应式布局...
158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能.doc
07-10
158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能.doc
svg设计的business card
04-08
svg设计的business card, 用svg实现
html5 svg点击图片全屏动画展开图片文字特效
11-07
html5 svg点击图片全屏动画展开图片文字特效 html5 svg点击图片全屏动画展开图片文字特效
jquery实现叠层3D文字特效代码分享
01-19
jquery实现叠层3D文字特效是一款效果非常酷，实现代码也很简单，没有用HTML5和CSS3元素，纯粹用Jquery代码实现的。 运行效果图：——————————效果演示—————————– 为大家分享的jquery实现叠层3D文字特效代码如下 <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /> <title>jquery实现叠层3D文字特效</title> <style type=text/css> *{margin:0px; padding:0px;} body{backgrou
测试test日志前端test
最新发布
06-14
测试test日志前端test
02- CSS3 2D转换、 动画 、3D转换、透视perspective的原理 、3D旋转、3D导航案例、旋转木马综合案例、浏览器私有前缀
weixin_51353891的博客
06-12 298
十四、2D 转换之 translate 2D 转换 2D 转换是改变标签在二维平面上的位置和形状 移动： translate 旋转： rotate 缩放： scale translate 语法 x 就是 x 轴上水平移动 y 就是 y 轴上水平移动 transform: translate(x, y) transform: translateX(n) transfrom: translateY(n) 重点知识点 2D 的移动主要是指 水平、垂直方向上的移动 trans
使用Snap.svg创建动画情人节贺卡
02-15 214
去年我向您展示如何创建Snap.svg分辨率独立的信息图表库。 快照是一个JavaScript库设计，可以很容易地与SVG工作。 虽然我们取得了良好的效果，我们的创作大多是静态的，没有任何真正的花里胡哨的绘图。 今天，我要告诉你如何实现一些很酷的效果和动画，而我们创建一个动画SVG情人节爱心卡。 您还将学习如何将谷歌的Web字体，以及你的SVG图纸和一些先进的文本操作。 虽然这是比较简单的...
运用jQuery框架实现信息折叠卡片的效果
qq_40523659的博客
11-19 863
1.效果分析 首先展示新闻第一项，其余新闻内容隐藏；给每个标题绑定单击事件；单机某标题后对其进行完整显示，同时其余新闻内容隐藏。 2.代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> *{ margi
SVG绘制线条箭头稳步上升动画特效
03-22
可以使用CSS3的动画效果来实现SVG绘制线条箭头稳步上升的特效。具体实现方法可以参考以下代码： ```html <svg width="200" height="200"> <path d="M 50 100 L 150 100" stroke="black" stroke-width="2" marker-end="url(#arrow)" /> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto"> <path d="M0,0 L0,6 L9,3 z" fill="#000" /> </marker> </defs> </svg> <style> path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 2s linear forwards; } @keyframes dash { to { stroke-dashoffset: 0; } } </style> ``` 这段代码中，我们首先定义了一个SVG路径，用于绘制线条和箭头。箭头使用了SVG的marker元素来实现，具体可以参考SVG文档。然后，我们使用CSS3的动画效果来实现线条的稳步上升特效。具体来说，我们使用stroke-dasharray和stroke-dashoffset属性来控制线条的虚线样式，然后使用animation属性来定义动画效果，最后使用@keyframes规则来定义动画的关键帧。这样，就可以实现SVG绘制线条箭头稳步上升的特效了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值