3d折叠弹出效果
代码语言:html
所属分类:画廊相册
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 3D Fold out reveal</title> <style> @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 200; src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i94_wlxdr.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ik4zwlxdr.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7g.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwlxdr.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdr.ttf) format('truetype'); } @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 900; src: local('Source Sans Pro Black'), local('SourceSansPro-Black'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xKydSBYKcSV-LCoeQqfX1RYOo3iu4nwlxdr.ttf) format('truetype'); } body { background: #dce1df; color: #4f585e; font-family: 'Source Sans Pro', sans-serif; text-rendering: optimizeLegibility; } a.btn { background: #0096a0; border-radius: 4px; box-shadow: 0 2px 0px 0 rgba(0, 0, 0, 0.25); color: #ffffff; display: inline-block; padding: 6px 30px 8px; position: relative; text-decoration: none; transition: all 0.1s 0s ease-out; } .no-touch a.btn:hover { background: #00a2ad; box-shadow: 0px 8px 2px 0 rgba(0, 0, 0, 0.075); -webkit-transform: translateY(-2px); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0