几款炫酷的CSS代码样式

1.Neumorphism.io

css

2.透明玻璃态生成器

3.盒子阴影

4.CSS 发光

5.渐变颜色按钮

6.3D旋转木马

7.CSS 发光图标

8、动画标签栏

1.Neumorphism.io

css

border-radius: 50px;
background: #e0e0e0;
box-shadow:  20px 20px 60px #bebebe,-20px -20px 60px #ffffff;

2.透明玻璃态生成器

css

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

3.盒子阴影

代码连接

4.CSS 发光

网站链接下载源码

5.渐变颜色按钮

下载

6.3D旋转木马

html

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

css

html, body{ background-color:#1a948d; } body
{ background-image: url('../images/background.jpg');background-repeat: no-repeat;background-position: top center;width:100%;background-size:cover;height:100%;min-height:1000px;overflow:hidden;font-family: 'quicksandlight', Helvetica, Arial;color:#FFFFFF;text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);filter: dropshadow(color=#000000, offx=1, offy=1);
}header
{margin-top:30px;position:absolute;z-index:5;width:420px;padding-top:10px;padding-bottom:10px;}h1{font-size:36px;letter-spacing:-2.5px;margin-left:30px;
}h3{font-size:16px;letter-spacing:-1.5px;margin-top:5px;margin-left:35px;
}#fps
{margin-top:5px;margin-left:35px;
}a
{color:rgba( 255, 255, 255, .65 );text-decoration: none;
}a:hover
{color:rgba( 255, 255, 255, 1 );
}/* hardware accelatator class */   .trans3d{-webkit-transform-style: preserve-3d;-webkit-transform: translate3d(0, 0, 0);-moz-transform-style: preserve-3d;-moz-transform: translate3d(0, 0, 0);-ms-transform-style:preserve-3d;-ms-transform: translate3d(0, 0, 0);transform-style:preserve-3d;transform: translate3d(0, 0, 0);/*-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;*/}#contentContainer{position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%;width:1000px;height:1000px;}#carouselContainer{position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%;width:1000px;height:1000px;}.carouselItem{width:320px;height:130px;position:absolute;left:50%;top:50%;margin-left:-160px;margin-top:-90px;visibility:hidden;}.carouselItemInner{width:320px;height:130px;position:absolute;background-color:rgba(255, 255, 255, .75);border:10px solid rgba(255, 255, 255, .5);color:aqua;font-size:72px;left:50%;top:50%;margin-left:-160px;margin-top:-90px;text-align:center;padding-top:50px;}

// set and cache variablesvar w, container, carousel, item, radius, itemLength, rY, ticker, fps; var mouseX = 0;var mouseY = 0;var mouseZ = 0;var addX = 0;// fps counter created by: https://gist.github.com/sharkbrainguy/1156092,// no need to create my own :)var fps_counter = {tick: function () {// this has to clone the array every tick so that// separate instances won't share state this.times = this.times.concat(+new Date());var seconds, times = this.times;if (times.length > this.span + 1) {times.shift(); // ditch the oldest timeseconds = (times[times.length - 1] - times[0]) / 1000;return Math.round(this.span / seconds);} else return null;},times: [],span: 20};var counter = Object.create(fps_counter);$(document).ready( init )function init(){w = $(window);container = $( '#contentContainer' );carousel = $( '#carouselContainer' );item = $( '.carouselItem' );itemLength = $( '.carouselItem' ).length;fps = $('#fps');rY = 360 / itemLength;radius = Math.round( (250) / Math.tan( Math.PI / itemLength ) );// set container 3d propsTweenMax.set(container, {perspective:600})TweenMax.set(carousel, {z:-(radius)})// create carousel item propsfor ( var i = 0; i < itemLength; i++ ){var $item = item.eq(i);var $block = $item.find('.carouselItemInner');//thanks @chrisgannon!        TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});animateIn( $item, $block )                     }// set mouse x and y props and looper tickerwindow.addEventListener( "mousemove", onMouseMove, false );ticker = setInterval( looper, 1000/60 );         }function animateIn( $item, $block ){var $nrX = 360 * getRandomInt(2);var $nrY = 360 * getRandomInt(2);var $nx = -(2000) + getRandomInt( 4000 )var $ny = -(2000) + getRandomInt( 4000 )var $nz = -4000 +  getRandomInt( 4000 )var $s = 1.5 + (getRandomInt( 10 ) * .1)var $d = 1 - (getRandomInt( 8 ) * .1)TweenMax.set( $item, { autoAlpha:1, delay:$d } )  TweenMax.set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny, autoAlpha:0} )TweenMax.to( $block, $s, { delay:$d, rotationY:0, rotationX:0, z:0,  ease:Expo.easeInOut} )TweenMax.to( $block, $s-.5, { delay:$d, x:0, y:0, autoAlpha:1, ease:Expo.easeInOut} )}function onMouseMove(event){mouseX = -(-(window.innerWidth * .5) + event.pageX) * .0025;mouseY = -(-(window.innerHeight * .5) + event.pageY ) * .01;mouseZ = -(radius) - (Math.abs(-(window.innerHeight * .5) + event.pageY ) - 200);}// loops and sets the carousel 3d propertiesfunction looper(){addX += mouseXTweenMax.to( carousel, 1, { rotationY:addX, rotationX:mouseY, ease:Quint.easeOut } )TweenMax.set( carousel, {z:mouseZ } )fps.text( 'Framerate: ' + counter.tick() + '/60 FPS' ) }function getRandomInt( $n ){return Math.floor((Math.random()*$n)+1);  }

7.CSS 发光图标

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS glowing icons</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head><body><div class="container"><i class="fa fa-apple" id="apple"></i><i class="fa fa-twitter" id="twitter"></i><i class="fa fa-github-square github" id="github"></i><i class="fa fa-facebook-square" id="facebook"></i></div>
</body></html>

* {margin: 0;padding: 0;
}
body {height: 100vh;width: 100vw;background: #18191f;
}
.container {display: flex;justify-content: center;align-items: center;height: 100vh;width: 100vw;
}
#apple,
#twitter,
#github,
#facebook {font-size: 8em;background-color: #18191f;color: #fff;box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,inset 2px 2px 10px #00000080;border-radius: 29px;padding: 11px 19px;margin: 0 40px;animation: animate 3s linear infinite;text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,0 0 200px #0072ff;
}
#twitter {animation-delay: 0.3s;
}
#facebook {animation-delay: 0.7s;
}
#github {animation-delay: 0.1s;
}@keyframes animate {from {filter: hue-rotate(0deg);}to {filter: hue-rotate(360deg);}
}

8、动画标签栏

html
<menu class="menu"><button class="menu__item active"><div class="menu__icon" ><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" ><g id="home-anm"><path stroke-linejoin="round"  stroke-linecap="round" d="M70.5,80.1h40.7"/><path d="M35,64v80"/><path d="M145.1,143V63"/><path stroke-linecap="round" stroke-linejoin="round" d="M24.9,70l65.7-50.7L156.3,70"/></g><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,0c-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"/></svg></div><strong class="menu__text active">home</strong></button><button class="menu__item"><div class="menu__icon" ><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145"><g id="strategy-anm" ><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.1h81.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.2C93.8,46.3,87.6,46.3,84.1,50.4z"/></g><path stroke-linecap="round" d="M38.8,153.5h105.5"/><path stroke-linecap="round" d="M66.8,112.5h49.5"/><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"/><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"/><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"/></svg></div><strong class="menu__text">strategy</strong></button><button class="menu__item"><div class="menu__icon" ><svg class="icon"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" ><g id="period-cir"><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"/><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"/><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"/></g><g id="period-anm"><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"/><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"/><g id="period-line"><path stroke-linecap="round" d="M50,62.5l40,44.2"/><path stroke-linecap="round" d="M128.1,111.7L95.2,73.4"/></g></g></svg></div><strong class="menu__text">period</strong></button><button class="menu__item"><div class="menu__icon" ><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" ><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.6c0,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.7c0.7,0.2,1.1,0.8,1.1,1.5v29.7"/><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"/><g id="security-strok"><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"/><path stroke-linecap="round" d="M82.6,43L23.1,62.3"/><path stroke-linecap="round" d="M82.6,68.4L23.1,87.6"/></g></svg></div><strong class="menu__text">security</strong></button><button class="menu__item"><div class="menu__icon" ><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.1 145" ><circle cx="90.5" cy="90.2" r="19.7"/><g id="settings-anm" ><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.4c-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.1c-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.4c-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.1c0.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,136c1.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.6c1.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-1c5.4-0.9,9.3-5.5,9.3-10.9V84.8C153.9,79.3,150.1,74.7,144.7,73.8z"/></g></svg></div><strong class="menu__text">settings</strong></button></menu>
css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');html {box-sizing: border-box ;--duration: .45s ;--cubic: cubic-bezier(0.4, 0, 0.2, 1) ;--color-1: #d5dadd ;--color-2: #51d5c2 ;}html *,
html *::before,
html *::after {box-sizing: inherit ;}body {margin: 0 ;height: 100vh ;display: flex ;overflow: hidden ;align-items: center ;justify-content: center ; background-color: #f0f1f1 ;font-family: 'Nunito', sans-serif ;}.menu {margin: 0 ;width: 42em ;display: flex ;height: 10.4em ;user-select: none ;position: relative ;align-items: center ;padding: 0 1.9em 2.5em ;justify-content: center ;background-color: #fefefe ;border-radius: 1em 1em 4.5em 4.5em ;-webkit-tap-highlight-color: transparent ;}@media (max-width: 42.625em) {.menu {font-size: .55em ;}}.menu::after {height: 5% ;width: 35% ;bottom: 10% ;content: " " ;position: absolute ;border-radius: 1em ;background-color: #f2f3f4 ;}.menu__item {all: unset ;flex-grow: 1 ;display: flex ;cursor: pointer ;overflow: hidden ;padding-top: 0.5em ;position: relative ;align-items: center ;color: var(--color-1) ;justify-content: center ;transition: flex-grow var(--duration) var(--cubic) ;}.menu__icon {font-size: 1.05em ;stroke: currentColor ;transition: transform var(--duration) var(--cubic) ;}.menu__item::before {top: 9% ;left: 18.4% ;width: 1.5em ;height: 1.5em ;content: " ";position: absolute ;border-radius: 50% ;transform: scale(0) ;transform-origin: center ;background-color: #fdecef ;transition: transform var(--duration) var(--cubic) ;}.menu__item::after {left: 0;bottom: 0 ;content: " " ;height: 0.25em ;position: absolute ;border-radius: 2em ;transform-origin: left center ;background-color: currentColor ;width: calc( var(--lineWidth) + 5px ) ;transform: translate3d(3em , 0, 0) scaleX(0) ;transition: transform calc( var(--duration) + .2s) var(--cubic) ;}.menu__text {left: 4.15em ;font-size: 1.5em ;position: absolute ;text-transform: capitalize ;letter-spacing: .01em ;transform: translate3d(0, 109%, 0) ;transition: transform calc( var(--duration) / 3.7 ) ;}.menu__item.active {flex-grow: 2.7 ;color: var(--color-2) ;}.menu__item.active .menu__icon {transform: translate3d(-95% , 0, 0) ;}.menu__item.active::before {transform: scale(1) ;}.menu__item.active::after {transform: translate3d(6.3em , 0, 0) scaleX(1) ;transition: transform var(--duration) var(--cubic) ;}.menu__text.active {transform: translate3d(0 , 0, 0) ;transition: transform calc(var(--duration) / 1.5) ;
}.icon {--duration-icon: 1s ;fill: none ; width: 2.5em ;height: 2.5em ;display: block ;stroke-width: 15 ;stroke-miterlimit: 10 ;}.active #home-anm {animation: home var(--duration-icon) ;
}@keyframes home {25% {transform: translate3d(0, -.8em , 0) ;}50% {transform: translate3d(0, .5em , 0) ;}}#strategy-anm {transform: scaleX(.85) ;transform-origin: center ;}.active #strategy-anm {animation: strategy var(--duration-icon) ;}@keyframes strategy {50% {transform: scaleX(1) ;}100%{transform: scaleX(.85) ;}}.active #strategy-cir1 {animation: strategy-cir1 var(--duration-icon);
}.active #strategy-cir2 {animation: strategy-cir2 var(--duration-icon) .1s;
}.active #strategy-cir3 {animation: strategy-cir3 var(--duration-icon) .2s;
}@keyframes strategy-cir1 {50% {transform: translate3d(-.7em,-0.7em,0);}100%{transform: translate3d(0,0,0);}}@keyframes strategy-cir2 {35% {transform: translate3d(0,-0.7em,0);}100%{transform: translate3d(0,0,0);}}@keyframes strategy-cir3 {35% {transform: translate3d(.7em,-0.7em,0);}100%{transform: translate3d(0,0,0);}}.active #period-anm {transform-origin: center 100% ;animation: period var(--duration-icon) ;}.active #period-cir {transform-origin: center ;animation: period-cir var(--duration-icon) ;}.active #period-line {stroke-dasharray: 66 ;animation: period-line calc( var(--duration-icon) / 2.5 ) reverse ;}@keyframes period {35% {transform: scaleY(.85) ;}60% , 70% {transform: scaleY(1.2) ;}100% {transform: scaleY(1) ;}}@keyframes period-cir {0%{opacity: 0 ;}35% {opacity: 1 ;transform: translate3d(15%, -55%, 0) ;}60%{opacity: 0 ;transform: translate3d(-8%, -50%, 0) ;}}@keyframes period-line {100% {stroke-dashoffset: 66 ;}}.active #security-cir {transform-box: fill-box ;transform-origin: center ;animation: security-cir calc( var(--duration-icon) / 1.5 ) ;}@keyframes security-cir {0% {transform: scale(0) ;}100% {transform: scale(1) ;}}.active #security-strok {stroke-dasharray: 96;animation: security-strok calc( var(--duration-icon) / 1.2 ) ;}@keyframes security-strok {0% {stroke-dashoffset: 60 ;}100% {stroke-dashoffset: 230 ;}}.active #settings-anm {transform-box: fill-box ;transform-origin: center ;animation: settings-anm calc( var(--duration-icon) / 1.5 ) ;}@keyframes settings-anm {0% {transform: rotate(-60deg);}50% {transform: rotate(60deg);}}
js
// Designed by: Hoang Nguyen
// Original image: https://dribbble.com/shots/5919154-Tab-Bar-Label-Micro-Interactionconst buttons = document.querySelectorAll(".menu__item");
let activeButton = document.querySelector(".menu__item.active");buttons.forEach(item => {const text = item.querySelector(".menu__text");setLineWidth(text, item);window.addEventListener("resize", () => {setLineWidth(text, item);})item.addEventListener("click", function() {if (this.classList.contains("active")) return;this.classList.add("active");if (activeButton) {activeButton.classList.remove("active");activeButton.querySelector(".menu__text").classList.remove("active");}handleTransition(this, text);activeButton = this;});});function setLineWidth(text, item) {const lineWidth = text.offsetWidth + "px";item.style.setProperty("--lineWidth", lineWidth);
}function handleTransition(item, text) {item.addEventListener("transitionend", (e) => {if (e.propertyName != "flex-grow" || !item.classList.contains("active")) return;text.classList.add("active");});}

内容仅供参考

几款炫酷的CSS代码样式相关推荐

这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码,非常好看,里面充分的利用了对jq+css的使用,希望对于各位程序猿有帮助展示效果项目目录展示 html代码 css部分代码 * { ...
【每日一练】103—纯CSS实现的一款炫酷卡片效果
作者 | 杨小爱写在前面我们经常会在各大平台看到很多产品的卡片效果,以及一些个人单页网站上的个人资料介绍时,也会用到各种卡片效果来展示信息,这种卡片式的设计,可以帮助我们分门别类的归类各种信息,让 ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
【每日一练】109—一款炫酷按钮的鼠标悬停效果
文 | 杨小爱写在前面按钮,几乎是任何一个项目都会用到的一个组件,因此,今天,我们来练习一个好玩的鼠标效果,具体效果,请看下面的GIF截图: 我们看完了最终效果,现在,我们一起来看一下它的源码. ...
【CSS3】多款炫酷鼠标悬停图文动画效果
演示效果: HTML代码如下: <!doctype html> <html lang="zh"> <head><meta charset= ...
Android 炫酷动画APP,21 款炫酷动画开源框架，照亮你的APP
原标题:21 款炫酷动画开源框架,照亮你的APP 2017年安卓巴士全球开发者论坛-上海站前言最近对应用的UI视觉效果突然来了兴致,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对 ...
一款炫酷Loading动画--加载失败
简介上一篇文章一款炫酷Loading动画–加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了. 动画结构分 ...
我用 Python 写了一款炫酷音乐播放器，想听啥随便搜！
作者:Dragon少年版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/hhladminh ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...

几款炫酷的CSS代码样式

1.Neumorphism.io

css

2.透明玻璃态生成器

3.盒子阴影

4.CSS 发光

5.渐变颜色按钮

6.3D旋转木马

7.CSS 发光图标

8、动画标签栏

几款炫酷的CSS代码样式相关推荐

最新文章

热门文章