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. Flask学习 1创建第一个页面

    #!/usr/bin/env python # encoding: utf-8 """ @version: v1.0 @author: cxa @file: hello. ...

  2. 洛谷P2661 信息传递（最小环，并查集）

    洛谷P2661 信息传递 最小环求解采用并查集求最小环. 只适用于本题的情况.对于新加可以使得两个子树合并的边,总有其中一点为其中一棵子树的根. 复杂度 \(O(n)\) . #include< ...

  3. Unity 带骨骼的人体模型换装

    直入主题: 1.实验材料 两个模型,虽然缺胳膊少腿的,但是能用!!! 2.条件 两个模型在制作时是基于同一套骨骼,导出模型部位时连着该部位的骨骼一起导出,这样导入到Unity的模型就带有Skinned ...

  4. 经常用到的meta标签的整理

    1.设置页面关键词<meta name="keywords" content="输入具体的关键词">2.设置页面的描述<meta name=& ...

  5. STM32 HAL库关于串口中断烧录程序后可以正常运行，断电重启后无法进入中断的问题分析以及解决方法

    1.情景描述: 最近在做一个项目,X86的上位机通过串口控制MCU,使用串口中断接收上位机数据时,MCU在上电的情况下烧录程序,可以正常接收上位机的数据,在断电重启后,一直进入不了中断回调函数,上电的 ...

  6. Vagrant 构建 LNMP 一致环境

    GitHub 地址 <--- 所有文件都在这里 前提条件 安装 Vagrant,VirtualBox. 设置 下载软件并放入 soft 目录 MySQL:mysql-5.7.22-1.el7.x ...

  7. ELK+Filebeat (2)

    ELK+Filebeat收集多台机器不同日志 采坑:在使用了6.0版本的ELK以后,使用如上配置,if [type]匹配不到在filebeat里面使用document_type定义的字符串.在多次调试 ...

  8. JavaScript List

    function List() {    this.listSize = 0;    this.pos = 0;    this.dataSource = [];    this.clear = fu ...

  9. GNU MAKE 笔记

    最近在调试OJ, 忙了4天多, 最后的问题是judge模块不能正常工作. judge 模块就是两个C++源文件, 它的工作是 从数据库获取用户提交的源码 测评 将测评结果写到数据库 测评部分是与数据库 ...

  10. 浏览器调起摄像头(jquery+layui)

    /* 实例化camvas配置参数 config = { video:{width:Number(scale*4),height:Number(scale*3)},//视频比例4:3 canvasId: ...