css linear-gradient;心跳animation

2021-05-07 20:28

阅读:379

标签:背景   form   png   near   cal   opacity   ima   ati   infinite   

css线性背景

background:linear-gradient(20deg,#ccffff,#ffcccc);

transform

transform:scale(1.5);
transform:skewX(10deg);
transform:rotate(10deg);

animation

div:hover{animation:move 2s infinite;}

桃心

技术图片

div{width:50px;height:50px;background:pink;transform:rotate(-45deg);margin:auto;position:absolute;top:111px;left:111px;}
div::before{content:‘‘;width:50px;height:50px;position:absolute;background:pink;border-radius:50%;left:0;top:-25px;}
div::after{content:‘‘;width:50px;height:50px;position:absolute;background:pink;border-radius:50%;left:25px;top:0;}

桃心跳动

div:hover{animation:move 0.5s cubic-bezier(0.7,0.1,1,0.1) infinite;}
@keyframes move{50% {transform:rotate(-45deg) scale(1.1);opacity:0.7;}}

css linear-gradient;心跳animation

标签:背景   form   png   near   cal   opacity   ima   ati   infinite   

原文地址:https://www.cnblogs.com/menghu1994/p/12083626.html


评论


亲,登录后才可以留言!