css实现一个翻页翻书效果代码
代码语言:html
所属分类:悬停
代码描述:css实现一个翻页翻书效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /*Hover to reveal a description of the book */ @import url('https://fonts.googleapis.com/css2?family=Pontano+Sans&family=Stint+Ultra+Expanded&display=swap'); :root{ --perspective: 1000px; --link-color:#010790; } * { box-sizing: border-box; } body{ font-family: 'Pontano Sans', sans-serif; font-size: calc(0.75em + .05vw); } a{ color:var(--link-color); font-weight:bold; } h1{ font-family: 'Stint Ultra Expanded', cursive; font-size: 1.5em; text-align: center; } .book { display: block; position: relative; width: 320px; height:453px; margin:20px auto; } .gloss{ position: absolute; top:0; z-index:200; overflow: hidden; width:20%; height:100%; opacity:0.5; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0)); transition:all .5s; transform: translateX(-50%) rotateY(0deg); transform-origin: left center; } .cover { position: absolute; width:100%; z-index:100; transition:transform .5s; transform: translateX(0); transform-origin: left center; backface-visibility: hidden; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1))); } .description{ position: absolute; left:0; top:0; width:inherit; height:inherit; border: solid 1px grey; background:white; transition: all 1s; padding: 10% 10%; padding-top:5%; z-index:1; } .description h1{ font-family: 'Pontano Sans', sans-serif; font-size: calc(0.75em + .1vw); text-align: center; line-height: 1.25em; } .book:hover{ cursor: pointer; } .book:hover .cover { transform: perspective(var(--perspective)) rotateY(-80deg); } .book:hover .gloss { transform: perspective(var(--perspective)) rotateY(-80deg) translateX(100%) scaleX(5); } ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0