CSS_跳动的心
详细教程CSS3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: #ffa5a5;
}
.cen{
width: 200px;
height:200px;
background-color: #d5093c;
/*阴影效果： 水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
box-shadow: 10px -10px 70px #D5093C;
animation: 1s aj infinite;
}
/*倒圆角指令*/
.lef{
border-radius: 100px;
position: absolute;
top: 200px;
left: 180px;
}
.rig{
border-radius: 100px;
position: absolute;
top: 200px;
left: 320px;
}
/*旋转角度*/
.c{
transform: rotate(45deg);
position: absolute;
top: 270px;
left: 250px;
}
/*div:hover{*/
/*放大原有图形*/
/*transform: scale(1.3);*/
/*2d旋转 如果只有一个数据，那么x和y相同角度，给俩个数据就是先x 后y*/
/*transform: skew(45deg);*/
/*移动 显示水平位移，然后是垂直位移 （负数就是向上）*/
/*transform: translate(0px,-5px);*/
/*}*/
/*动画标签*/
@-webkit-keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.2) rotate(45deg);}
100%{transform: scale(1.) rotate(45deg);}
}
</style>
</head>
<body>
<div class="cen lef"></div>
<div class="cen c"></div>
<div class="cen rig"></div>
</body>
</html>
用到CSS3的标签 :
/*阴影效果： 水平方向的偏移，垂直方向的偏移，模糊度，颜色*/
box-shadow: 10px -10px 70px #D5093C;/*倒圆角指令*/
border-radius: 100px;/*旋转角度 deg就是角度的意思*/
transform: rotate(45deg);/*放大原有图形*/
transform: scale(1.3);/*动画标签*/
@-webkit-keyframes aj{
0%{transform: scale(1) rotate(45deg);}
50%{transform: scale(1.2) rotate(45deg);}
100%{transform: scale(1.) rotate(45deg);}
}/*调用动画的方法*/
animation: 1s aj infinite;针对不同的浏览器CSS3有不同的方法：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}CSS_跳动的心的更多相关文章
- [WPF,XAML] 跳动的心
原文:[WPF,XAML] 跳动的心 没什么艺术细胞,原谅,原谅! <Canvas Width="0" Height="0"> <Canvas ...
- 使用transform属性和animation属性制作跳动的心
transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...
- TurnipBit-MicroPython开发板：跟孩子一起DIY跳动的心
天是越来越热了,小心脏也是越跳越快啊,为了表达现在激动的心情,必须做个激动的心开始跳动.紧接着就开始带领大家做个激动的心. 首先说说要借助的平台,这次仅仅需要借助一块TurnipBit开发板. Tur ...
- 【ShaderToy】跳动的心❤️
写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效 ...
- 纯CSS制作“跳动的心”demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- html跳动的心实现代码
<style> .box{ width: 200px; height: 400px; positio ...
- CSS3学习笔记（2）—左右跳动的红心
还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...
- 用C++画心（转）
原地址https://www.zhihu.com/topic/19613730/top-answers 首先上一个动态的心 代码如下: #include <stdio.h> #includ ...
- Android开发权威指南（第2版）新书发布
<Android 开发权威指南(第二版)>是畅销书<Android开发权威指南>的升级版,内容更新超过80%,是一本全面介绍Android应用开发的专著,拥有45 章精彩内容供 ...
随机推荐
- 易初大数据 2019年11月2日 计算机英语 wangqingchao
一.Match the explantions in Column B with words and expressions in Column A.(搭配每组中同意以的词或短语) 1.交换机(pos ...
- PHP常用的header头部定义
<?php header('HTTP/1.1 200 OK'); // ok 正常访问 header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 heade ...
- 软件 ---- idea启动
1.将配置转移到别的盘符,避免重做系统后,之前的配置就没了 找到安装的位置,默认安装的话地址一般是 C:\Program Files\JetBrains\IntelliJ IDEA 2017.2 ID ...
- Jsp自学2
Jsp简单来说就是java代码与Html代码的组合,类,方法,属性跟网页展示夹杂在一起.Jsp就是Servlet,但比Servle简单,不需要配置web.xml(当然也可以配置).Jsp由模板数据与元 ...
- vue项目iframe的传值问题
前言 项目需要,我需要引入一个已经封装好的浏览器插件.插件只能以html的方式调用, 所以.我把插件的使用封装了一个html页面.vue项目则利用iframe的方式引入. 到这里我就遇到了一个问题,那 ...
- Jquery才可以使用 this 指定当前DOM
Jquery才可以使用 this 指定当前DOM jquery获取并设置它的元素 <div class="shop-item" style="line-height ...
- 附010.Kubernetes永久存储之GlusterFS超融合部署
一 前期准备 1.1 基础知识 在Kubernetes中,使用GlusterFS文件系统,操作步骤通常是: 创建brick-->创建volume-->创建PV-->创建PVC--&g ...
- shell命令管道未读完阻塞了子进程，与等待其结束的父进程死"锁"。
在exec执行一个子进程,我们希望使用管道取得子进程在重定向后的标准输出上的结果,同时等待子进程的结束.那么是等待子进程结束后才取管道数据,还是边取数据边等待子进程结束呢? 这里有一个调试的例子.u0 ...
- 十、CSR8670的DFU功能[补充]
前一篇转载的博文很清楚,全面的介绍了DFU功能的实现步骤.关于DFU功能,你还需要知道以下信息: 一.image.fs,firmware,loader,psr之间的关系 图1-1 image.fs示意 ...
- 使用class关键字创建类组件、props参数
import React,{Component} from 'react' import {render} from 'react-dom' // 使用class创建组件 class Movie ex ...