纯css实现文件夹悬浮散开折叠动画效果
代码语言:html
所属分类:悬停
代码描述:纯css实现文件夹悬浮散开折叠动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color: #1e1f26; } body .folder { cursor: pointer; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); background-color: #FFD485; width: 200px; height: 150px; border-radius: 10px; } body .folder:before { width: 55px; height: 25px; border-radius: 5px; content: ''; background-color: #FFD485; position: absolute; top: -10px; left: 0px; } body .folder:after { display: block; width: 200px; height: 150px; border-radius: 10px; content: ''; transform: skew(0deg); background-color: #ffe1a8; transition: all .2s; } body .folder .paper { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); background-color: whitesmoke; width: 190px; height: 140px; transition: all .2s; } body .folder .paper.one {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0