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. HBuilder打包app(vue项目)

    一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的 ...

  2. videojs实践--兼容ie7,8

    1,还是先上图 ie9+,ff,chrome,,,

  3. c++内存布局与c程序的内存布局

    c/c++的内存布局:堆,栈,自由存储区(与堆的区别),全局/静态存储区,常量存储区(字符串常量,const常量) http://www.cnblogs.com/QG-whz/p/5060894.ht ...

  4. Maximum Subarray（最大连续子序列和）

    https://leetcode.com/problems/maximum-subarray/ 思路: 如果全为负值,那么取最大值 如果有非负值,那么我们依次计算到当前位置为止的最大值.假设有n个元素 ...

  5. Linux下查看日志文件

    问题一:日志文件打开,卡死 在公司开发的时候,开发的程序在本地测试正常,但是在测试环境却有问题.这个时候第一反应就是查看日志文件,看看日志文件里面有什么错误信息.我潇洒的执行了一下 vim log.t ...

  6. Linux固定ip配置

    第一步:查看网络信息 [root@localhost ~]# ifconfig ens33: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu ...

  7. seaborn教程3——数据集的分布可视化

    原文转载:https://segmentfault.com/a/1190000015006667 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理 绘图风格设置 颜色风 ...

  8. seaborn教程1——风格选择

    原文链接:https://segmentfault.com/a/1190000014915873 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理 绘图风格设置 颜色风 ...

  9. centos7中mysql不能输入中文问题的解决

    首先在数据库里面输入 mysql> show variables like'%char%' -> ; +--------------------------------------+--- ...

  10. Java实现ArrayList

    说明都在注释: package adt.array; import java.util.Iterator; import java.util.NoSuchElementException; /** * ...