devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

几款炫酷的CSS代码样式_好看的css样式模板

作者：知新_RL | 2024-02-16 21:47:59

赞

踩

好看的css样式模板

目录

1.Neumorphism.io

css

2.透明玻璃态生成器

3.盒子阴影

4.CSS 发光

5.渐变颜色按钮

 6.3D旋转木马

7.CSS 发光图标

8、动画标签栏

1.Neumorphism.io

css

  1. border-radius: 50px;
  2. background: #e0e0e0;
  3. box-shadow:  20px 20px 60px #bebebe,
  4.              -20px -20px 60px #ffffff;

2.透明玻璃态生成器

css

  1. background: rgba( 255, 255, 255, 0.25 );
  2. box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  3. backdrop-filter: blur( 1px );
  4. -webkit-backdrop-filter: blur( 1px );
  5. border-radius: 10px;
  6. border: 1px solid rgba( 255, 255, 255, 0.18 );

3.盒子阴影

代码连接

4.CSS 发光

网站链接下载源码 

5.渐变颜色按钮

下载

 6.3D旋转木马

 html

  1. <header>
  2. 		<h1>3D Carousel Using TweenMax.js & jQuery</h1>
  3. 		<h3>A pen by <a href="https://www.twitter.com/johnblazek" target="_blank">@johnblazek</a></h3>
  4. 		<div id="fps">Framerate: 0/60 FPS</div>
  5. 	</header>
  6. 	
  7. 	<div id="contentContainer" class="trans3d"> 
  8. 	<section id="carouselContainer" class="trans3d">
  9. 		<figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure>
  10. 		<figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure>
  11. 		<figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d">3</div></figure>
  12. 		<figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure>
  13. 		<figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure>
  14. 		<figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure>
  15. 		<figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure>
  16. 		<figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure>
  17. 		<figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure>
  18. 		<figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure>
  19. 		<figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure>
  20. 		<figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure>	
  21. 	</section>
  22. 	</div>
  23.   
  24.   
  25.

css

  1. html, body{ background-color:#1a948d; }	
  2.  
  3. body
  4. { 
  5. 	background-image: url('../images/background.jpg');
  6. 	background-repeat: no-repeat;
  7. 	background-position: top center;
  8. 	width:100%;
  9. 	background-size:cover;
  10. 	height:100%;
  11. 	min-height:1000px;
  12. 	overflow:hidden;
  13. 	font-family: 'quicksandlight', Helvetica, Arial;
  14. 	color:#FFFFFF;
  15. 	text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
  16.     filter: dropshadow(color=#000000, offx=1, offy=1);
  17. }
  18.  
  19. header
  20. {
  21. 	
  22. 	margin-top:30px;
  23. 	position:absolute;
  24. 	z-index:5;
  25. 	width:420px;
  26. 	padding-top:10px;
  27. 	padding-bottom:10px;
  28.  
  29. }
  30.  
  31. h1{
  32. 	
  33. 	font-size:36px;
  34. 	letter-spacing:-2.5px;
  35. 	margin-left:30px;
  36. }
  37.  
  38. h3{
  39. 	
  40. 	font-size:16px;
  41. 	letter-spacing:-1.5px;
  42. 	margin-top:5px;
  43. 	margin-left:35px;
  44. }
  45.  
  46. #fps
  47. {
  48. 	margin-top:5px;
  49. 	margin-left:35px;
  50. }
  51.  
  52. a
  53. {
  54. 	color:rgba( 255, 255, 255, .65 );
  55. 	text-decoration: none;
  56. }
  57.  
  58. a:hover
  59. {
  60. 	color:rgba( 255, 255, 255, 1 );
  61. }
  62.  
  63. /* hardware accelatator class */	
  64. 	.trans3d
  65. 	{
  66. 		-webkit-transform-style: preserve-3d;
  67. 		-webkit-transform: translate3d(0, 0, 0);
  68. 		-moz-transform-style: preserve-3d;
  69. 		-moz-transform: translate3d(0, 0, 0);
  70. 		-ms-transform-style:preserve-3d;
  71. 		-ms-transform: translate3d(0, 0, 0);
  72. 		transform-style:preserve-3d;
  73. 		transform: translate3d(0, 0, 0);
  74.  
  75. 		/*-webkit-backface-visibility: hidden;
  76. 		-moz-backface-visibility: hidden;
  77. 		-ms-backface-visibility:hidden;
  78. 		backface-visibility:hidden;*/
  79. 	}
  80. 	
  81. 	#contentContainer
  82. 	{
  83. 		position:absolute;
  84. 		margin-left:-500px;
  85. 		margin-top:-500px;
  86. 		left:50%;
  87. 		top:50%;
  88. 		width:1000px;
  89. 		height:1000px;
  90. 	}
  91. 	
  92. 	#carouselContainer
  93. 	{
  94. 		position:absolute;
  95. 		margin-left:-500px;
  96. 		margin-top:-500px;
  97. 		left:50%;
  98. 		top:50%;
  99. 		width:1000px;
  100. 		height:1000px;
  101. 	}
  102. 	
  103. 	.carouselItem
  104. 	{
  105. 		width:320px;
  106. 		height:130px;
  107. 		position:absolute;
  108. 		left:50%;
  109. 		top:50%;
  110. 		margin-left:-160px;
  111. 		margin-top:-90px;
  112. 		visibility:hidden;
  113. 	}
  114. 	
  115. 	.carouselItemInner
  116. 	{
  117. 		width:320px;
  118. 		height:130px;
  119. 		position:absolute;
  120. 		background-color:rgba(255, 255, 255, .75);
  121. 		border:10px solid rgba(255, 255, 255, .5);
  122. 		color:aqua;
  123. 		font-size:72px;
  124. 		left:50%;
  125. 		top:50%;
  126. 		margin-left:-160px;
  127. 		margin-top:-90px;
  128. 		text-align:center;
  129. 		padding-top:50px;
  130. 		
  131. 	}

js

  1. // set and cache variables
  2. 		var w, container, carousel, item, radius, itemLength, rY, ticker, fps; 
  3. 		var mouseX = 0;
  4. 		var mouseY = 0;
  5. 		var mouseZ = 0;
  6. 		var addX = 0;
  7. 		
  8. 		
  9. 		// fps counter created by: https://gist.github.com/sharkbrainguy/1156092,
  10. 		// no need to create my own :)
  11. 		var fps_counter = {
  12. 			
  13. 			tick: function () 
  14. 			{
  15. 				// this has to clone the array every tick so that
  16. 				// separate instances won't share state 
  17. 				this.times = this.times.concat(+new Date());
  18. 				var seconds, times = this.times;
  19.         
  20. 				if (times.length > this.span + 1) 
  21. 				{
  22. 					times.shift(); // ditch the oldest time
  23. 					seconds = (times[times.length - 1] - times[0]) / 1000;
  24. 					return Math.round(this.span / seconds);
  25. 				} 
  26. 				else return null;
  27. 			},
  28.  
  29. 			times: [],
  30. 			span: 20
  31. 		};
  32. 		var counter = Object.create(fps_counter);
  33. 		
  34. 		
  35. 		
  36. 		$(document).ready( init )
  37. 		
  38. 		function init()
  39. 		{
  40. 			w = $(window);
  41. 			container = $( '#contentContainer' );
  42. 			carousel = $( '#carouselContainer' );
  43. 			item = $( '.carouselItem' );
  44. 			itemLength = $( '.carouselItem' ).length;
  45. 			fps = $('#fps');
  46. 			rY = 360 / itemLength;
  47. 			radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );
  48. 			
  49. 			// set container 3d props
  50. 			TweenMax.set(container, {perspective:600})
  51. 			TweenMax.set(carousel, {z:-(radius)})
  52. 			
  53. 			// create carousel item props
  54. 			
  55. 			for ( var i = 0; i < itemLength; i++ )
  56. 			{
  57. 				var $item = item.eq(i);
  58. 				var $block = $item.find('.carouselItemInner');
  59. 				
  60.         //thanks @chrisgannon!        
  61.         TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});
  62. 				
  63. 				animateIn( $item, $block )						
  64. 			}
  65. 			
  66. 			// set mouse x and y props and looper ticker
  67. 			window.addEventListener( "mousemove", onMouseMove, false );
  68. 			ticker = setInterval( looper, 1000/60 );			
  69. 		}
  70. 		
  71. 		function animateIn( $item, $block )
  72. 		{
  73. 			var $nrX = 360 * getRandomInt(2);
  74. 			var $nrY = 360 * getRandomInt(2);
  75. 				
  76. 			var $nx = -(2000) + getRandomInt( 4000 )
  77. 			var $ny = -(2000) + getRandomInt( 4000 )
  78. 			var $nz = -4000 +  getRandomInt( 4000 )
  79. 				
  80. 			var $s = 1.5 + (getRandomInt( 10 ) * .1)
  81. 			var $d = 1 - (getRandomInt( 8 ) * .1)
  82. 			
  83. 			TweenMax.set( $item, { autoAlpha:1, delay:$d } )	
  84. 			TweenMax.set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny, autoAlpha:0} )
  85. 			TweenMax.to( $block, $s, { delay:$d, rotationY:0, rotationX:0, z:0,  ease:Expo.easeInOut} )
  86. 			TweenMax.to( $block, $s-.5, { delay:$d, x:0, y:0, autoAlpha:1, ease:Expo.easeInOut} )
  87. 		}
  88. 		
  89. 		function onMouseMove(event)
  90. 		{
  91. 			mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;
  92. 			mouseY = -(-(window.innerHeight * .5) + event.pageY ) * .01;
  93. 			mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY ) - 200);
  94. 		}
  95. 		
  96. 		// loops and sets the carousel 3d properties
  97. 		function looper()
  98. 		{
  99. 			addX += mouseX
  100. 			TweenMax.to( carousel, 1, { rotationY:addX, rotationX:mouseY, ease:Quint.easeOut } )
  101. 			TweenMax.set( carousel, {z:mouseZ } )
  102. 			fps.text( 'Framerate: ' + counter.tick() + '/60 FPS' )	
  103. 		}
  104. 		
  105. 		function getRandomInt( $n )
  106. 		{
  107. 			return Math.floor((Math.random()*$n)+1);	
  108. 		}

7.CSS 发光图标

  1. <html lang="en">
  2.  
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>CSS glowing icons</title>
  7.   <link rel="stylesheet" href="style.css">
  8.   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  9. </head>
  10.  
  11. <body>
  12.   <div class="container">
  13.     <i class="fa fa-apple" id="apple"></i>
  14.     <i class="fa fa-twitter" id="twitter"></i>
  15.     <i class="fa fa-github-square github" id="github"></i>
  16.     <i class="fa fa-facebook-square" id="facebook"></i>
  17.   </div>
  18. </body>
  19.  
  20. </html>
  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. body {
  6.   height: 100vh;
  7.   width: 100vw;
  8.   background: #18191f;
  9. }
  10. .container {
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  14.   height: 100vh;
  15.   width: 100vw;
  16. }
  17. #apple,
  18. #twitter,
  19. #github,
  20. #facebook {
  21.   font-size: 8em;
  22.   background-color: #18191f;
  23.   color: #fff;
  24.   box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
  25.     2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
  26.     inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
  27.     inset 2px 2px 10px #00000080;
  28.   border-radius: 29px;
  29.   padding: 11px 19px;
  30.   margin: 0 40px;
  31.   animation: animate 3s linear infinite;
  32.   text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
  33.     0 0 200px #0072ff;
  34. }
  35. #twitter {
  36.   animation-delay: 0.3s;
  37. }
  38. #facebook {
  39.   animation-delay: 0.7s;
  40. }
  41. #github {
  42.   animation-delay: 0.1s;
  43. }
  44.  
  45. @keyframes animate {
  46.   from {
  47.     filter: hue-rotate(0deg);
  48.   }
  49.   to {
  50.     filter: hue-rotate(360deg);
  51.   }
  52. }

8、动画标签栏

  1. html
  2. <menu class="menu">
  3.         
  4.         <button class="menu__item active">
  5.             <div class="menu__icon" >
  6.  
  7.                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >
  8. 			
  9.                     <g id="home-anm">
  10.                         <path stroke-linejoin="round"  stroke-linecap="round" d="M70.5,80.1h40.7"/>
  11.                         <path d="M35,64v80"/>
  12.                         <path d="M145.1,143V63"/>
  13.                         <path stroke-linecap="round" stroke-linejoin="round" d="M24.9,70l65.7-50.7L156.3,70"/>
  14.                     </g>
  15.         
  16.                     <path stroke-linejoin="round" d="M145.1,117.6v33.1c0,1.5-1.2,2.8-2.8,2.8h-28.4c-1.5,0-2.8-1.2-2.8-2.8V126c0-11.3-9.2-20.5-20.5-20.5l0,0
  17.                     c-11.3,0-20.5,9.2-20.5,20.5v27.5h16H37.8c-1.5,0-2.8-1.2-2.8-2.8v-34.2"/>
  18.         
  19.                 </svg>
  20.  
  21.             </div>
  22.             <strong class="menu__text active">home</strong>
  23.         </button>
  24.  
  25.         <button class="menu__item">
  26.             <div class="menu__icon" >
  27.  
  28.                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145">
  29.  
  30.                     <g id="strategy-anm" >
  31.                         <path d="M84.1,50.4L72,64.7c-2,2.4-5.2,3.5-8.3,3l-40.1-6.8c-3.2-0.6-5.8,2.4-4.8,5.5L42,127.9c1.2,3.6,4.6,6.1,8.4,6.1
  32.                         h81.6c3.9,0,7.3-2.6,8.5-6.3l21.5-61.4c0.9-3-1.7-6-4.9-5.4l-38.3,6.7c-3,0.6-6.2-0.5-8.2-2.8L97.4,50.2
  33.                         C93.8,46.3,87.6,46.3,84.1,50.4z"/>
  34.                     </g>
  35.                     <path stroke-linecap="round" d="M38.8,153.5h105.5"/>
  36.                     <path stroke-linecap="round" d="M66.8,112.5h49.5"/>
  37.                     <path id="strategy-cir1" stroke-width="0" fill="currentColor" d="M32.4,37.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S16.1,27,21.9,27S32.4,31.7,32.4,37.5z"/>
  38.                     <path id="strategy-cir2" stroke-width="0" fill="currentColor" d="M102.3,23.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S86,13,91.8,13S102.3,17.7,102.3,23.5z"/>
  39.                     <path id="strategy-cir3" stroke-width="0" fill="currentColor" d="M169.6,37.5c0,5.8-4.7,10.5-10.5,10.5s-10.5-4.7-10.5-10.5S153.3,27,159.1,27S169.6,31.7,169.6,37.5z"/>
  40.                 
  41.                 </svg>
  42.  
  43.             </div>
  44.             <strong class="menu__text">strategy</strong>
  45.         </button>
  46.  
  47.         <button class="menu__item">
  48.             <div class="menu__icon" >
  49.  
  50.                 <svg class="icon"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >
  51.  
  52.                     <g id="period-cir">
  53.                         <path fill="currentColor" stroke-width="0" d="M96.5,141.7c0,3.9-3.1,7-7,7s-7-3.1-7-7s3.1-7,7-7C93.4,134.6,96.5,137.8,96.5,141.7z"/>
  54.                         <path fill="currentColor" stroke-width="0" d="M78.2,126.7c0,3.9-3.1,7-7,7s-7-3.1-7-7c0-3.9,3.1-7,7-7S78.2,122.8,78.2,126.7z"/>
  55.                         <path fill="currentColor" stroke-width="0" d="M110.6,120.5c0,3.9-3.1,7-7,7s-7-3.1-7-7s3.1-7,7-7S110.6,116.6,110.6,120.5z"/>
  56.                     
  57.                     </g>
  58.                     <g id="period-anm">
  59.                         <path stroke-linecap="round" d="M30.8,24.7h118.3 M117.3,71.2l9.7-6.7c0.7-0.4,1.1-1.1,1.1-1.9V24.7H50v37.8"/>
  60.                         <path stroke-linecap="round" d="M149.4,153.3H30.6 M75.5,90.7l-23.1,21.2c-1.6,1.4-2.4,3.4-2.4,5.6v35.9h78.1V113"/>
  61.                         <g id="period-line">
  62.                             <path stroke-linecap="round" d="M50,62.5l40,44.2"/>
  63.                             <path stroke-linecap="round" d="M128.1,111.7L95.2,73.4"/>
  64.                         </g>
  65.                     </g>
  66.         
  67.                 </svg>
  68.  
  69.             </div>
  70.             <strong class="menu__text">period</strong>
  71.         </button>
  72.  
  73.         <button class="menu__item">
  74.             <div class="menu__icon" >
  75.  
  76.                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >
  77.  
  78.                     <path stroke-linecap="round" d="M94,139c-4.8,1.3-8.8,1.7-11.4,1.8c0,0-18.3,1.1-36.9-11.6c-1.9-1.3-4.7-3.2-7.8-6.2c-1.7-1.6-2.9-2.9-3.4-3.6
  79.                     c0,0-3.6-4.2-6.1-8.6c-4.6-8.4-5.4-18.9-5.5-21l0,0V75.5v-39c0-0.7,0.5-1.3,1.2-1.5l58-14.2c0.2-0.1,0.5-0.1,0.7,0l57.9,14.7
  80.                     c0.7,0.2,1.1,0.8,1.1,1.5v29.7"/>
  81.                     <path id="security-cir" stroke-linecap="round" d="M158.3,120.7c0,18.3-14.8,33.1-33.1,33.1s-33-14.8-33-33.1s14.8-33.1,33.1-33.1S158.3,102.4,158.3,120.7z"/>
  82.                     <g id="security-strok">
  83.                         <path stroke-linecap="round" d="M151.1,104.5l-25,25c-1.3,1.3-3.5,1.3-4.9,0l-9.1-9.1"/>
  84.                         <path stroke-linecap="round" d="M82.6,43L23.1,62.3"/>
  85.                         <path stroke-linecap="round" d="M82.6,68.4L23.1,87.6"/>
  86.                     </g>
  87.         
  88.                 </svg>
  89.  
  90.             </div>
  91.             <strong class="menu__text">security</strong>
  92.         </button>
  93.  
  94.         <button class="menu__item">
  95.             <div class="menu__icon" >
  96.  
  97.                 <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" >
  98.  
  99.                     <circle cx="90.5" cy="90.2" r="19.7"/>
  100.                     <g id="settings-anm" >
  101.                         <path stroke-linejoin="round" d="M144.7,73.8l-6.2-1c-0.6-1.5-1.2-3-1.9-4.5l3.6-5.1c3.2-4.4,2.7-10.5-1.2-14.3l-7.4-7.4
  102.                         c-2.1-2.1-4.9-3.3-7.8-3.3c-2.3,0-4.5,0.7-6.4,2.1l-5.1,3.6c-1.6-0.7-3.2-1.4-4.8-2l-1-6.1c-0.9-5.4-5.5-9.3-10.9-9.3H85.1
  103.                         c-5.4,0-10,3.9-10.9,9.2L73.1,42c-1.5,0.6-3,1.2-4.5,1.9l-5-3.6c-1.9-1.4-4.1-2.1-6.5-2.1c-3,0-5.8,1.2-7.8,3.3l-7.4,7.4
  104.                         c-3.8,3.8-4.3,9.8-1.2,14.3l3.7,5.2c-0.7,1.5-1.3,3-1.8,4.5l-6.1,1c-5.4,0.9-9.3,5.5-9.3,10.9v10.5c0,5.4,3.9,10,9.2,10.9l6.3,1.1
  105.                         c0.6,1.5,1.2,3,1.9,4.5l-3.6,5c-3.2,4.4-2.7,10.5,1.2,14.3l7.4,7.4c2.1,2.1,4.9,3.3,7.8,3.3c2.3,0,4.5-0.7,6.4-2.1L69,136
  106.                         c1.4,0.6,2.8,1.2,4.2,1.7l1,6.2c0.9,5.4,5.5,9.3,10.9,9.3h10.5c5.4,0,10-3.9,10.9-9.2l1-6.2c1.5-0.6,3-1.2,4.5-1.9l5.1,3.6
  107.                         c1.9,1.4,4.1,2.1,6.5,2.1c3,0,5.7-1.2,7.8-3.3l7.4-7.4c3.8-3.8,4.3-9.8,1.2-14.3l-3.6-5.1c0.7-1.5,1.3-3,1.9-4.5l6.2-1
  108.                         c5.4-0.9,9.3-5.5,9.3-10.9V84.8C153.9,79.3,150.1,74.7,144.7,73.8z"/>
  109.                     </g>
  110.         
  111.                 </svg>
  112.  
  113.             </div>
  114.             <strong class="menu__text">settings</strong>
  115.         </button>
  116.  
  117.     </menu>
  118. css
  119. @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');
  120.  
  121. html {
  122.  
  123.     box-sizing: border-box ;
  124.     --duration: .45s ;
  125.     --cubic: cubic-bezier(0.4, 0, 0.2, 1) ;
  126.     --color-1: #d5dadd ;
  127.     --color-2: #51d5c2 ;
  128.  
  129. }
  130.  
  131. html *,
  132. html *::before,
  133. html *::after {
  134.  
  135.     box-sizing: inherit ;
  136.  
  137. }
  138.  
  139. body {
  140.  
  141.     margin: 0 ;
  142.     height: 100vh ;
  143.     display: flex ;
  144.     overflow: hidden ;
  145.     align-items: center ;
  146.     justify-content: center ; 
  147.     background-color: #f0f1f1 ;
  148.     font-family: 'Nunito', sans-serif ;
  149.  
  150. }
  151.  
  152. .menu {
  153.  
  154.     margin: 0 ;
  155.     width: 42em ;
  156.     display: flex ;
  157.     height: 10.4em ;
  158.     user-select: none ;
  159.     position: relative ;
  160.     align-items: center ;
  161.     padding: 0 1.9em 2.5em ;
  162.     justify-content: center ;
  163.     background-color: #fefefe ;
  164.     border-radius: 1em 1em 4.5em 4.5em ;
  165.     -webkit-tap-highlight-color: transparent ;
  166.  
  167. }
  168.  
  169. @media (max-width: 42.625em) {
  170.   
  171.   .menu {
  172.     
  173.     font-size: .55em ;
  174.     
  175.   }
  176.   
  177. }
  178.  
  179. .menu::after {
  180.  
  181.     height: 5% ;
  182.     width: 35% ;
  183.     bottom: 10% ;
  184.     content: " " ;
  185.     position: absolute ;
  186.     border-radius: 1em ;
  187.     background-color: #f2f3f4 ;
  188.  
  189.  
  190. }
  191.  
  192. .menu__item {
  193.  
  194.     all: unset ;
  195.     flex-grow: 1 ;
  196.     display: flex ;
  197.     cursor: pointer ;
  198.     overflow: hidden ;
  199.     padding-top: 0.5em ;
  200.     position: relative ;
  201.     align-items: center ;
  202.     color: var(--color-1) ;
  203.     justify-content: center ;
  204.     transition: flex-grow var(--duration) var(--cubic) ;
  205.     
  206. }
  207.  
  208. .menu__icon {
  209.     
  210.     font-size: 1.05em ;
  211.     stroke: currentColor ;
  212.     transition: transform var(--duration) var(--cubic) ;
  213.     
  214. }
  215.  
  216. .menu__item::before {
  217.  
  218.     top: 9% ;
  219.     left: 18.4% ;
  220.     width: 1.5em ;
  221.     height: 1.5em ;
  222.     content: " ";
  223.     position: absolute ;
  224.     border-radius: 50% ;
  225.     transform: scale(0) ;
  226.     transform-origin: center ;
  227.     background-color: #fdecef ;
  228.     transition: transform var(--duration) var(--cubic) ;
  229.  
  230. }
  231.  
  232. .menu__item::after {
  233.  
  234.     left: 0;
  235.     bottom: 0 ;
  236.     content: " " ;
  237.     height: 0.25em ;
  238.     position: absolute ;
  239.     border-radius: 2em ;
  240.     transform-origin: left center ;
  241.     background-color: currentColor ;
  242.     width: calc( var(--lineWidth) + 5px ) ;
  243.     transform: translate3d(3em , 0, 0) scaleX(0) ;
  244.     transition: transform calc( var(--duration) + .2s) var(--cubic) ;
  245.  
  246. }
  247.  
  248.  
  249. .menu__text {
  250.  
  251.     left: 4.15em ;
  252.     font-size: 1.5em ;
  253.     position: absolute ;
  254.     text-transform: capitalize ;
  255.     letter-spacing: .01em ;
  256.     transform: translate3d(0, 109%, 0) ;
  257.     transition: transform calc( var(--duration) / 3.7 ) ;
  258.  
  259. }
  260.  
  261. .menu__item.active {
  262.     
  263.     flex-grow: 2.7 ;
  264.     color: var(--color-2) ;
  265.     
  266. }
  267.  
  268. .menu__item.active .menu__icon {
  269.     
  270.     transform: translate3d(-95% , 0, 0) ;
  271.  
  272.     
  273. }
  274.  
  275. .menu__item.active::before {
  276.  
  277.     transform: scale(1) ;
  278.  
  279. }
  280.  
  281. .menu__item.active::after {
  282.  
  283.     transform: translate3d(6.3em , 0, 0) scaleX(1) ;
  284.     transition: transform var(--duration) var(--cubic) ;
  285.  
  286. }
  287.  
  288. .menu__text.active {
  289.  
  290.     transform: translate3d(0 , 0, 0) ;
  291.     transition: transform calc(var(--duration) / 1.5) ;
  292. }
  293.  
  294. .icon {
  295.  
  296.     --duration-icon: 1s ;
  297.     
  298.     fill: none ; 
  299.     width: 2.5em ;
  300.     height: 2.5em ;
  301.     display: block ;
  302.     stroke-width: 15 ;
  303.     stroke-miterlimit: 10 ;
  304.     
  305. }
  306.  
  307.  
  308. .active #home-anm {
  309.  
  310.     animation: home var(--duration-icon) ;
  311. }
  312.  
  313. @keyframes home {
  314.  
  315.     25% {
  316.  
  317.         transform: translate3d(0, -.8em , 0) ;
  318.  
  319.     }
  320.  
  321.     50% {
  322.  
  323.         transform: translate3d(0, .5em , 0) ;
  324.  
  325.     }
  326.  
  327.  
  328. }
  329.  
  330. #strategy-anm {
  331.     
  332.     transform: scaleX(.85) ;
  333.     transform-origin: center ;
  334.  
  335. }
  336.  
  337. .active #strategy-anm {
  338.     
  339.     animation: strategy var(--duration-icon) ;
  340.  
  341. }
  342.  
  343. @keyframes strategy {
  344.     
  345.     50% {
  346.  
  347.         transform: scaleX(1) ;
  348.         
  349.     }
  350.     
  351.     100%{
  352.         
  353.         transform: scaleX(.85) ;
  354.  
  355.     }
  356.  
  357. }
  358.  
  359. .active #strategy-cir1 {
  360.  
  361.     animation: strategy-cir1 var(--duration-icon);
  362. }
  363.  
  364. .active #strategy-cir2 {
  365.  
  366.     animation: strategy-cir2 var(--duration-icon) .1s;
  367. }
  368.  
  369. .active #strategy-cir3 {
  370.  
  371.     animation: strategy-cir3 var(--duration-icon) .2s;
  372. }
  373.  
  374. @keyframes strategy-cir1 {
  375.     
  376.     50% {
  377.  
  378.         transform: translate3d(-.7em,-0.7em,0);
  379.         
  380.     }
  381.     
  382.     100%{
  383.         
  384.         transform: translate3d(0,0,0);
  385.  
  386.  
  387.     }
  388.  
  389. }
  390.  
  391. @keyframes strategy-cir2 {
  392.     
  393.     35% {
  394.  
  395.         transform: translate3d(0,-0.7em,0);
  396.         
  397.     }
  398.     
  399.     100%{
  400.         
  401.         transform: translate3d(0,0,0);
  402.  
  403.  
  404.     }
  405.  
  406. }
  407.  
  408. @keyframes strategy-cir3 {
  409.     
  410.     35% {
  411.  
  412.         transform: translate3d(.7em,-0.7em,0);
  413.         
  414.     }
  415.     
  416.     100%{
  417.         
  418.         transform: translate3d(0,0,0);
  419.  
  420.  
  421.     }
  422.  
  423. }
  424.  
  425.  
  426. .active #period-anm {
  427.  
  428.     transform-origin: center 100% ;
  429.     animation: period var(--duration-icon) ;
  430.  
  431. }
  432.  
  433. .active #period-cir {
  434.  
  435.     transform-origin: center ;
  436.     animation: period-cir var(--duration-icon) ;
  437.  
  438. }
  439.  
  440. .active #period-line {
  441.  
  442.     stroke-dasharray: 66 ;
  443.     animation: period-line calc( var(--duration-icon) / 2.5 ) reverse ;
  444.  
  445. }
  446.  
  447.  
  448. @keyframes period {
  449.  
  450.     35% {
  451.  
  452.         transform: scaleY(.85) ;
  453.  
  454.     }
  455.  
  456.     60% , 70% {
  457.  
  458.         transform: scaleY(1.2) ;
  459.  
  460.     }
  461.  
  462.     100% {
  463.         
  464.         transform: scaleY(1) ;
  465.  
  466.     }
  467.  
  468. }
  469.  
  470. @keyframes period-cir {
  471.  
  472.     0%{
  473.  
  474.        opacity: 0 ;
  475.  
  476.     }
  477.  
  478.     35% {
  479.  
  480.         opacity: 1 ;
  481.         transform: translate3d(15%, -55%, 0) ;
  482.  
  483.     }
  484.  
  485.     60%{
  486.  
  487.         opacity: 0 ;
  488.         transform: translate3d(-8%, -50%, 0) ;
  489.  
  490.     }
  491.  
  492. }
  493.  
  494. @keyframes period-line {
  495.  
  496.  
  497.     100% {
  498.  
  499.         stroke-dashoffset: 66 ;
  500.  
  501.     }
  502.  
  503. }
  504.  
  505.  
  506. .active #security-cir {
  507.  
  508.     transform-box: fill-box ;
  509.     transform-origin: center ;
  510.     animation: security-cir calc( var(--duration-icon) / 1.5 ) ;
  511.  
  512. }
  513.  
  514. @keyframes security-cir {
  515.  
  516.  
  517.     0% {
  518.  
  519.         transform: scale(0) ;
  520.         
  521.     }
  522.     
  523.     100% {
  524.         
  525.         transform: scale(1) ;
  526.         
  527.     }
  528.  
  529. }
  530.  
  531. .active #security-strok {
  532.  
  533.     stroke-dasharray: 96;
  534.     animation: security-strok calc( var(--duration-icon) / 1.2 ) ;
  535.  
  536. }
  537.  
  538. @keyframes security-strok {
  539.  
  540.  
  541.     0% {
  542.  
  543.         stroke-dashoffset: 60 ;
  544.         
  545.     }
  546.     
  547.     100% {
  548.         
  549.         stroke-dashoffset: 230 ;
  550.         
  551.     }
  552.  
  553. }
  554.  
  555. .active #settings-anm {
  556.  
  557.     transform-box: fill-box ;
  558.     transform-origin: center ;
  559.     animation: settings-anm calc( var(--duration-icon) / 1.5 ) ;
  560.  
  561. }
  562.  
  563. @keyframes settings-anm {
  564.  
  565.  
  566.     0% {
  567.  
  568.         transform: rotate(-60deg);
  569.         
  570.     }
  571.     
  572.     50% {
  573.         
  574.         transform: rotate(60deg);
  575.         
  576.     }
  577.  
  578. }
  579. js
  580. // Designed by: Hoang Nguyen
  581. // Original image: https://dribbble.com/shots/5919154-Tab-Bar-Label-Micro-Interaction
  582.  
  583. const buttons = document.querySelectorAll(".menu__item");
  584. let activeButton = document.querySelector(".menu__item.active");
  585.  
  586. buttons.forEach(item => {
  587.  
  588.     const text = item.querySelector(".menu__text");
  589.     setLineWidth(text, item);
  590.  
  591.     window.addEventListener("resize", () => {
  592.         setLineWidth(text, item);
  593.     })
  594.  
  595.     item.addEventListener("click", function() {
  596.         if (this.classList.contains("active")) return;
  597.  
  598.         this.classList.add("active");
  599.         
  600.         if (activeButton) {
  601.             activeButton.classList.remove("active");
  602.             activeButton.querySelector(".menu__text").classList.remove("active");
  603.         }
  604.         
  605.         handleTransition(this, text);
  606.         activeButton = this;
  607.  
  608.     });
  609.  
  610.     
  611. });
  612.  
  613.  
  614. function setLineWidth(text, item) {
  615.     const lineWidth = text.offsetWidth + "px";
  616.     item.style.setProperty("--lineWidth", lineWidth);
  617. }
  618.  
  619. function handleTransition(item, text) {
  620.  
  621.     item.addEventListener("transitionend", (e) => {
  622.  
  623.         if (e.propertyName != "flex-grow" || 
  624.         !item.classList.contains("active")) return;
  625.  
  626.         text.classList.add("active");
  627.         
  628.     });
  629.  
  630. }

内容仅供参考

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/96987
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号