切片列表项目

下载代码

html

css

分享到微信朋友圈

html

css

.deleteList {
  margin: 0;
  padding: 0;
  list-style: none;background-color: #fff;padding: 20px;border-radius: 5px;
}
.deleteList li {
  white-space: nowrap;
  position: relative;
  line-height: 24px;
  text-transform: uppercase;
  margin: 0 0 12px 0;
  font-weight: bold;
  color: #212533;
  display: flex;
}
.deleteList li span {
  display: block;
  overflow: hidden;
  transition: transform 0.3s ease 0.1s, opacity 0.5s ease 0.3s;
}
.deleteList li span:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 12px;
  transform-origin: left bottom;
}
.deleteList li span:nth-child(2) {
  position: relative;
  transform-origin: left center;
}
.deleteList li span:nth-child(2):before {
  content: "";
  left: 0;
  top: 0;
  right: 0;
  height: 12px;
  background: #fff;
  position: absolute;
  display: block;
}
.deleteList li:last-child {
  margin-bottom: 0;
}
.deleteList li .line {
  border-radius: 2px;
  background: #F26175;
  height: 2px;
  margin: -1px 0 0 0;
  top: 50%;
  right: 6px;
  position: absolute;
  z-index: 1;
}
.deleteList li .delete {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 8px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.5;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  transition: all 0.3s ease;
}
.deleteList li .delete svg {
  display: block;
  width: 20px;
  fill: none;
  height: 20px;
  stroke: #F26175;
  stroke-width: 2;
  transition: all 0.3s ease;
}
.deleteList li .delete svg circle {
  stroke-dasharray: 64;
  transition: all 0.3s ease;
}
.deleteList li .delete:before, .deleteList li .delete:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 2px;
  background: #F26175;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
  transition: all 0.3s ease;
}
.deleteList li .delete:before {
  width: 10px;
  height: 2px;
}
.deleteList li .delete:after {
  height: 10px;
  width: 2px;
}
.deleteList li .delete.active svg circle {
  stroke-dashoffset: 64;
}
.deleteList li .delete.active:before, .deleteList li .delete.active:after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.deleteList li .delete.active:after {
  opacity: 0;
}
.deleteList li .delete:hover, .deleteList li .delete.hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
  opacity: 1;
}
.deleteList li.slice span {
  opacity: 0;
}
.deleteList li.slice span:nth-child(1) {
  transform: rotate(-7deg) translate(0, -3px);
}
.deleteList li.slice span:nth-child(2) {
  transform: rotate(7deg) translate(0, 2px);
}
.deleteList li.beforeSlice .delete:before, .deleteList li.beforeSlice .delete:after {
  display: none;
}

body {
  min-height: 100vh;
  font-family: Lato, Arial;
  color: #ADAFB6;
  display: flex;
  justify-content: center;
  align-items: center;    background-color: #252525;
}

JavaScript

$(document).ready(function() {

$.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    };

$('.deleteList li').each(function() {
        var text = $(this).children('span').text();
        $(this).children('span').after($('<span />').text(text));
    });

$('.deleteList li .delete').on('click', function(e) {
        $(this).addClass('active hover');
        var line = $('<div />').addClass('line');
        var li = $(this).parent();
        var span = $(this).parent().children('span:first-child');
        setTimeout(function() {
            li.append(line);
            line.css('right', li.width() - span.width() - 28 + 6);
            line.animate({
                width: span.width() + 22
            }, 400, function() {
                li.addClass('beforeSlice');
                line.css({
                    left: 0,
                    right: 'auto'
                }).animate({
                    width: 0
                }, 200, function() {
                    li.addClass('slice');
                    setTimeout(function() {
                        li.slideFadeToggle(300, function() {
                            li.remove();
                        });
                    }, 500);
                });
            });
        }, 200);
    });

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg