div+css实现鼠标悬浮折叠地图展开动画效果代码

代码语言:html

所属分类:悬停

代码描述:div+css实现鼠标悬浮折叠地图展开动画效果代码

代码标签: div css 鼠标 悬浮 折叠 地图 展开 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">
 

 
 
 
<style>
@property --fold {
  syntax: "
<number>";
  inherits: true;
  initial-value: 0;
}
.folded-map {
  --fold: .6; /* between 0 and 1; */
  width: 75vmin;
  display: grid;
 
  perspective: 800px;
  transition: --fold 1s linear;
  &:hover{ --fold: 0deg }
 
  :is(*) { transform-style: preserve-3d }
  :is(img, .fold) { grid-area: 1/1 }
  :is(img) { width: 100%; visibility: hidden }
  :is(.fold, .fold > *) { display: grid; grid-auto-flow: column }
  :is(.fold) { --angle: calc(90deg * var(--fold)); rotate: 1 0 0 var(--angle) }
  :is(.left) { transform-origin: right; rotate: 0 1 0 calc(var(--angl.........完整代码请登录后点击上方下载按钮下载查看

网友评论0