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的更多相关文章

  1. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  2. css text gradient color, css fonts gradient color

    css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...

  3. CSS 中 transform、animation、transition、translate的区别

    在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...

  4. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  5. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

  6. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

  7. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  8. css 动画 transition和animation

    本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...

  9. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

随机推荐

  1. Spring Boot学习第一部分（Spring 4.x）第一章（Spring 基础）

    1.spring概述 1.1.spring的简史 第一阶段:XML配置spring 1.x时代, 第二阶段:注解配置spring 2.x时代, @Controller @Service @Compon ...

  2. 牛客提高D2t2 幸运数字考试

    分析 预处理出所有合法数字 然后直接lower_bound查询即可 代码 #include<iostream> #include<cstdio> #include<cst ...

  3. 关于Vue+iview的前端简单的导入数据（excel）

    前一段时间项目经历了纯前端处理导入excel文件并处理等问题,数据量大的时候时间上长的一比,三千条数据需要三四秒甚至更长,不管产品咋想的,具体做法为: 首先下载一个这玩意: 进行简单封装一下: < ...

  4. Kubernetes 对象管理的三种方式

    Kubernetes 中文文档 1. Kubernetes 对象管理的三种方式对比 Kubernetes 中的对象管理方式,根据对象配置信息的位置不同可以分为两大类: 命令式:对象的参数通过命令指定 ...

  5. 基于K-means Clustering聚类算法对电商商户进行级别划分(含Octave仿真)

    在从事电商做频道运营时,每到关键时间节点,大促前,季度末等等,我们要做的一件事情就是品牌池打分,更新所有店铺的等级.例如,所以的商户分入SKA,KA,普通店铺,新店铺这4个级别,对于不同级别的商户,会 ...

  6. 深信达加密下禁用IME

    1.控制面板 2.管理工具 3.计算机管理 4.系统工具 5.任务计划程序 6.任务计划程序库 7.Microsoft 8.Windows 9.TextServicesFramework 10.MsC ...

  7. javaScript Map

                  }                   } }                          vertices.push(v);         adjList.set ...

  8. hdu 6301 Distinct Values （思维+set）

    hdu 6301 Distinct Values 题目传送门 题意: 给你m个区间,让你求出一个长度为n的区间且满足在这些区间的数不重复, 并且要求字典序最小 思路: 如果我们已经求出这个序列了,你会 ...

  9. hdu 6298 Maximum Multiple（规律）

    hdu6298 Maximum Multiple 题目传送门 题意: 给你一个整数n,从中找出可以被n整除的三个数x,y,z: 要求x+y+z=n,且x*y*z最大. 思路: 开始一看T到1e6,n也 ...

  10. Q480S-I7 D1 笔记本使用 VS2015 运行性能探查器会导致电脑自动重启？

    漏洞导致 https://www.freebuf.com/vuls/159642.html 使用以下两句 无法修复该问题,建议升级 win10 系统,使用 vs2017 reg add "H ...