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. [CSP-S模拟测试]:旋转子段（数学）

    题目描述 $ZYL$有$N$张牌编号分别为$1,2,...,N$.他把这$N$张牌打乱排成一排,然后他要做一次旋转使得旋转后固定点尽可能多.如果第$i$个位置的牌的编号为$i$,我们就称之为固定点.旋 ...

  2. 夯实Java基础系列7：Java 代码块和执行顺序

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  3. js+html实现玫瑰花绽放

    玫瑰花示例demo: <!DOCTYPE html> <html> <head> <title>玫瑰花</title> <meta c ...

  4. Only variables should be passed by reference

    报错位置代码: $status->type = array_pop(explode('\\',$status->type))   (此处$status->type值原本是  APP\ ...

  5. mybatis有结果返回null

    解决:application.yml 中mybatis此项(解决驼峰及数据库字段有下划线问题) map-underscore-to-camel-case: true 问题: mybatis debug ...

  6. php json_encode的问题

    问题:跨域调用信息,返回json格式数据,返回的json数据中会多出空格,导致再用json_decode()编码的时候,页面显示空白,编码失败.解决方法:在页面中加入ob_end_clean();解决 ...

  7. XML scriptlet 连接数据库

    <%@ page language="java" contentType="text/html" pageEncoding="GBK" ...

  8. final、以及public、protected、（default）、private权限修饰符总结

    package cn.learn.Final; /* 当final用来修饰类 1.该类不能有任何子类,成员方法均无法覆盖重写,但可以重写父类的方法 当final用来修饰方法 1.该方法不能被覆盖重写 ...

  9. [Codeforces 555E]Case of Computer Network(Tarjan求边-双连通分量+树上差分)

    [Codeforces 555E]Case of Computer Network(Tarjan求边-双连通分量+树上差分) 题面 给出一个无向图,以及q条有向路径.问是否存在一种给边定向的方案,使得 ...

  10. #python# error:http.client.RemoteDisconnected: Remote end closed connection without response

    添加headers user-agent 网络情况不好的状态下也能出现