jquery+css自定义参数切割图片代码

代码语言:html

所属分类:其他

代码描述:jquery+css自定义参数切割图片代码

代码标签: jquery css 自定义 参数 切割 图片 代码

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

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

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

  
  
<style>
.container {
  padding: 4rem;
  display: flex;
  align-items: flex-start;
}

.controlls {
  display: flex;
  flex-direction: column;
  background-color: #333;
  padding: 1.2rem 2rem 2rem;
  width: 150px;
  border-radius: 1rem;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2);
}
.controlls__item {
  width: 100%;
  margin-top: 0.8rem;
}
.controlls__item > * {
  width: 100%;
}
.controlls__item label {
  display: block;
  color: #fff;
  font-family: sans-serif;
  font-weight: 800;
  margin-bottom: 0.5ex;
  font-size: 14px;
}

.frame {
  position: relative;
  width: var(--frame-size);
  aspect-ratio: 1;
  display: flex;
  justify-content: flex-start;
  margin: auto;
  background-color: #fff;
}
.frame--perfect-fourth .frame__slice--size-1 {
  width: 16%;
}
.frame--perfect-fourth .frame__slice--size-2 {
  width: 28%;
}
.frame--perfect-fourth .frame__slice--size-3 {
  widt.........完整代码请登录后点击上方下载按钮下载查看

网友评论0