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. 相同name,取最小的id的值，mysql根据相同字段　更新其它字段

    id name info1 a 1232 a 2353 a 1244 b 125 b 987相同name,取最小的id的值id name info1 a 1232 a 1233 a 1234 b 12 ...

  2. PHP之导出CSV文件

    序言 Q1:什么是csv文件? A1:csv即 comma-separated values ,逗号分隔值.是一种通用的相对简单地文件格式,目前被较为广泛的使用.其最广泛的应用就是用来转移表数据. “ ...

  3. 122、TensorFlow多设备运行

    # 如果你想使你的程序运行在不同的设备上 # tf.device函数提供了一个方便的方法来实现 # 所有在特定上下文中的操作都放置在相同的设备上面 # A device specification h ...

  4. WEB安全----XSS和CSRF

    随着Web2.0.社交网络.微博等等一系列新型的互联网产品的诞生,基于Web环境的互联网应用越来越广泛,企业信息化的过程中各种应用都架设在Web平台上,Web业务的迅速发展也引起黑客们的强烈关注,接踵 ...

  5. 应用安全-Web安全-漏洞修复方案整理

    通过HTTP头部字段防御措施整理 X-Frame-Options #反劫持 X-XSS-Protection #开启浏览器防XSS功能 Set X-Frame-Options  CSP X-Conte ...

  6. Linux——文件打包与压缩

    Linux 下常见常用的压缩包文件格式有*.zip,*.rar,*.7z*.gz,*.xz,*.bz2,*.tar,*.tar.gz,*.tar.xz,*tar.bz2等后缀的压缩文件 文件后缀名 说 ...

  7. inclusion_tag 基本使用

    inclusion_tag的用途 inclusion_tag可以实现从后台往前端传递绑定数据的样式,一般用来动态显示模板页面中显示固定格式的数据. inclusion_tag的用法 step1: 编写 ...

  8. C#=>递归反转栈

    原理,递归反转栈 using System; using System.Collections.Generic; using System.Linq; using System.Threading.T ...

  9. sql片段的定义

    <!-- sql片段 id 表示唯一标示 这里不加where是因为 sql片段只对单表查询才抽取出来 这样的重用性更高 --> <sql id="query_user_wh ...

  10. dp（过河问题）

    http://codeforces.com/gym/101492/problem/E Teamwork is highly valued in the ACM ICPC. Since the begi ...