1、css3新单位vh、vw，这个单位是相对显示窗口的宽度或高度

vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

2、动画效果(圈圈从小到大放大)

===》===》》》

<style>

.star {

    position: absolute;

    width: 80px;

    height: 80px;

}

.point {

    position: absolute;

    left: ;

    top: ;

    bottom: ;

    right: ;

    margin: auto;

    width: 10px;

    height: 10px;

    background: transparent;

    background-clip: padding-box;

    border-radius: %;

    -webkit-border-radius: %;

    -moz-border-radius: %;

    border-radius: %;

}

.star .point-dot {

    z-index: ;

    background-color: #74E0F1;

    border: 1px solid #74E0F1;

}

.pa- {

    width: %;

    height: %;

}

.star .pa-:after {

    position: absolute;

    content: '';

    display: block;

    left: ;

    bottom: ;

    top: ;

    right: ;

    margin: auto;

    border-radius: %;

    -webkit-border-radius: %;

    -moz-border-radius: %;

    border-radius: %;

    opacity: ;

    border: 2px solid #74E0F1;

    -webkit-animation: ripple 3s linear 0ms infinite;

    -moz-animation: ripple 3s linear 0ms infinite;

    -o-animation: ripple 3s linear 0ms infinite;

    animation: ripple 3s linear 0ms infinite;

}

.star .pa-:after {

    position: absolute;

    content: '';

    display: block;

    left: ;

    bottom: ;

    top: ;

    right: ;

    margin: auto;

    border-radius: %;

    -webkit-border-radius: %;

    -moz-border-radius: %;

    border-radius: %;

    opacity: ;

    border: 2px solid #74E0F1;

    -webkit-animation: ripple 3s linear .5s infinite;

    -moz-animation: ripple 3s linear .5s infinite;

    -o-animation: ripple 3s linear .5s infinite;

    animation: ripple 3s linear .5s infinite;

}

@keyframes ripple {

    % {transform: scale();opacity:;}

    % {transform: scale(0.7);opacity:;}

    % {transform: scale();opacity:;}

}}

}

</style>

</head>

<body>

    <span class="star">

          <i class="point point-dot"></i>

          <i class="pa-10 point"></i>

          <i class="pa-20 point"></i>

    </span>

</body>

 3.常见的PC鼠标滑过，出现呢下滑线，移开消失

<li><a>首页</a></li>

a:after {

transition: 0.3s all;
content: '';
display: block;
position: relative;
width: 0;
height: 3px;
background: #fff;

}

a:hover a:after {

background: #4d72e2;

}

====》》===》》

元素初始加载的时候，动画开始执行变动

/* 动画移动效果 */

.run .moveToTop {

    -webkit-animation: moveToTop .5s;

    -moz-animation: moveToTop .5s;

    -o-animation: moveToTop .5s;

    animation: moveToTop .5s;

}

.run .moveToBottom {

    -webkit-animation: moveToBottom .5s;

    -moz-animation: moveToBottom .5s;

    -o-animation: moveToBottom .5s;

    animation: moveToBottom .5s;

}

.run .moveToLeft {

    -webkit-animation: moveToLeft .5s;

    -moz-animation: moveToLeft .5s;

    -o-animation: moveToLeft .5s;

    animation: moveToLeft .5s;

}

.run .moveToRight {

    -webkit-animation: moveToRight .5s;

    -moz-animation: moveToRight .5s;

    -o-animation: moveToRight .5s;

    animation: moveToRight .5s;

}

@keyframes moveToLeft {

    % {transform: translateX(50px) translateZ(-50px)}

    % {transform: translateX(0px) translateZ(0px)}

}

@keyframes moveToRight {

    % {transform: translateX(-50px) translateZ(-50px)}

    % {transform: translateX(0px) translateZ(0px)}

}

@keyframes moveToTop {

    % {transform: translateY(50px) translateZ(-50px)}

    % {transform: translateY(0px) translateZ(0px)}

}

@keyframes moveToBottom {

    % {transform: translateY(-50px) translateZ(-50px)}

    % {transform: translateY(0px) translateZ(0px)}

}

css3新属性运用的更多相关文章

  1. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  2. 两点补充——CSS3新属性以及弹性布局

    CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...

  3. css3新属性position: sticky 一分钟实现 导航栏悬停功能

    css3新属性position: sticky 一分钟实现 导航栏悬停功能 前言 正文 前言 想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...

  4. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  5. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  6. css3新属性的总结

    今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变 圆形渐 ...

  7. CSS3新属性注释及实例

    这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

  8. css3新属性的学习使用

    display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有 块级元素的所有属性,比如宽 ...

  9. css3新属性

    CSS calc()函数来制作响应式网格: calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.fo ...

随机推荐

  1. 建立Heapster Influxdb Grafana集群性能监控平台

    依赖于kubenets dns服务 图形化展示度量指标的实现需要集成k8s的另外一个Addons组件: Heapster .Heapster原生支持K8s(v1.0.6及以后版本)和 CoreOS , ...

  2. Helm简介及安装

    前提条件 一个kubernetes集群 安装和配置集群端服务Helm和Tiller 确定要应用于安装的安全配置(如果有) 1.安装HELM 每一个版本HELM提供多种操作系统的二进制版本.可以手动下载 ...

  3. Java 读取propertoes文件

    我一直不懂,Java里面的路径是咋样的,怎么找到我的资源文件? 直到我看到了这篇文件,写的是真棒.这篇文章  看完之后,豁然开朗的感觉 下面做些笔记,首先,Java有一个targer文件,下面有一个c ...

  4. HDFS 读写数据流程

    一.上传数据 二.下载数据 三.读写时的节点位置选择 1.网络节点距离(机架感知) 下图中: client 到 DN1 的距离为 4 client 到 NN 的距离为 3 DN1 到 DN2 的距离为 ...

  5. VS2015快捷键大全

    Ctrl+E,D —-格式化全部代码 Ctrl+E,F —-格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL + SH ...

  6. Maccms8.x 命令执行漏洞分析

    下载链接https://share.weiyun.com/23802397ed25681ad45c112bf34cc6db 首先打开Index.php $m = be('get','m'); m参数获 ...

  7. HDU 1026(迷宫 BFS+打印)

    题意是要穿过一个迷宫并且将每一步打印出来. 用宽搜的方法找到路径,在 vis 中存一下方向,只是这题被看到的一种不太对的运算符重载坑了很久...... 代码如下: #include <bits/ ...

  8. 微信小程序，错误{"errMsg":"request:fail 小程序要求的 TLS 版本必须大于等于 1.2"}

    解决方法一: 开发环境,项目--->勾选不校验即可 解决办法二: 在 PowerShell中运行以下内容, 然后重启服务器 # Enables TLS R2 and Windows # Thes ...

  9. 【杂】指针，*，&

    一个小程序解释指针变量的作用: #include<iostream> #include"cww.h" void cloud(int *); using namespac ...

  10. [C++]线性链表之顺序表<一>

    顺序表中数据元素的存储地址是其序号的线性函数,只要确定了存储顺序表的起始地址(即 基地址),计算任意一个元素的存储地址的时间是相等的,具有这一特点的存储结构称为[随机存储]. 使用的基本数据结构:数组 ...