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. python list,dic,json型字符串转为list，dict，json

    import ast strr='{"1":"A","3":"B"}' dicts= ast.literal_eval( ...

  2. loj#137 最小瓶颈路 加强版

    分析 我们知道答案一定再最小生成树上 于是我们按边权从小到大建立kruskal重构树 然后每次查询lca的值即可 由于询问较多采用st表维护lca 代码 格式化代码 #include<bits/ ...

  3. 16/7/14-MySQL-关键字

    Mysql 关键字-保留字 转载:http://linux.it.net.cn/e/data/mysql/2014/1202/9460.html 时间:2014-12-02 13:09来源:linux ...

  4. pandas基础（第一章（一））

    摘要:通过简单例子,了解功能.以此作为基点,在工作中不断深入 1.设置需要显示的行列宽度(显示的最大列数和最大行数,其余部分用.....表示) 设置显示多少行多少列 import pandas as ...

  5. mysql中列转行

    通过group_concat()函数来实现 select group_concat(name) from table group by type select group_concat(name se ...

  6. HDU Stealing Harry Potter's Precious（状压BFS）

    状压BFS 注意在用二维字符数组时,要把空格.换行处理好. #include<stdio.h> #include<algorithm> #include<string.h ...

  7. C# form 传参数的几个方法

    方法一:传值最先想到的,Form2构造函数中接收一个string类型参数,即Form1中选中行的文本,将Form2的TextBox控件的Text设置为该string,即完成了Form1向Form2的传 ...

  8. Android生命周期例子小解

    Activity 从创建到进入运行态所触发的事件 onCreate()-->onStart-->onResume() 从运行态到停止态所触发的事件                 onPa ...

  9. CHEVP算法（Canny/Hough Estimation of Vanishing Points)

    这个算法是汪悦在 Lane detection and tracking using B-spline中提出来的.他在这篇论文中主要用的是B-spline模型,这个模型的主要优点是鲁棒性好,可以针对不 ...

  10. mod_jk是Apache服务器的一个可插入模块

    mod_jk简称JK,是Apache服务器的一个可插入模块,用以为Apache或IIS服务器提供处理JSP/Servlet的能力. Apache作为一款强大的Web服务器,本身缺乏处理JSP/Serv ...