css linear-gradient;心跳animation
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的更多相关文章
- FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
- css text gradient color, css fonts gradient color
css text gradient color, css fonts gradient color css 字体渐变色 demo https://codepen.io/xgqfrms/pen/OJya ...
- CSS 中 transform、animation、transition、translate的区别
在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...
- CSS border gradient color All In One
CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
- css 动画 transform transition animation
1.transform transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- css 动画 transition和animation
本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...
- CSS动画效果之animation
Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...
随机推荐
- python 数值系列-进制转换
进制转换 前语: 如果您不通二进制,八进制,十六进制,请移步:http://www.360doc.com/content/17/0211/21/40101294_628326994.shtml 问题 ...
- 云计算openstack核心组件——keystone身份认证服务
一.Keystone介绍: keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户 ...
- PHP调试环境之:Eclipse for PHP
Eclipse IDE for PHP Developers + Zend Debugger Feature . 在网上搜过一些朋友配置 eclipse --> php --> pdt , ...
- java注解编程@since 1.8
一.基本元注解: @Retention: 说明这个注解的生命周期 RetentionPolicy.SOURCE -> 保留在原码阶段,编译时忽略 RetentionPolicy.CLASS -& ...
- word中迅速将表格一分为二 拆分表格快捷键ctrl+shift+enter 重复上一个命令快捷键f4
这里说的是将一个表格拆分为两个表格 选择要拆分的行,快捷键ctrl+shift+enter,就拆分为两个表格了,是不是很快! 在多个表格需要拆分的时候,做一次这样的操作,然后不停的移动.F4,就可以了 ...
- Netty内存管理器ByteBufAllocator及内存分配
ByteBufAllocator 内存管理器: Netty 中内存分配有一个最顶层的抽象就是ByteBufAllocator,负责分配所有ByteBuf 类型的内存.功能其实不是很多,主要有以下几个重 ...
- no suitable HttpMessageConverter found for response type
在使用 RestTemplate 或者 Spring Cloud 的时候,经常会出现这个错误. 基本上出现的场景都是,我们要json,结果来了个 text/html. 两个原因: 第一个就是:服务器返 ...
- spring-第四篇之让bean获取所在的spring容器
1.如上一篇文章所述,有时候bean想发布一些容器事件,就需要先获取spring容器,然后将Event交由spring容器将事件发布出去. 为了让bean获取它所在的spring容器,可以让该bean ...
- 10: Django + Uwsgi + Nginx 的生产环境部署
1.1 一些重要概念 1.Web协议介绍 Web协议出现顺序: CGI -> FCGI -> WSGI -> uwsgi 1. CGI: 最早的协议 2. FCGI: 比CGI快 ...
- 【学习总结】GirlsInAI ML-diary day-20-初识 Kaggle
[学习总结]GirlsInAI ML-diary 总 原博github链接-day20 初识kaggle 1-注册一个账号(由于被谷歌收购,因此可能需要梯子) 2-Competition - 学会看一 ...