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. MHA环境搭建

    准备工作 数据库架构 角色 ip地址 主机名 server_id Master Slave1 Slave2 配置三台服务器ssh免秘钥认证 ssh-keygen -t rsa ssh-copy-id ...

  2. 基于Asp.net C#实现HTML转图片(网页快照)

    一.实现方法 //WebSiteThumbnail.cs文件,在BS项目中需要添加对System.Windows.Forms的引用 using System; using System.Data; u ...

  3. lnk快捷方式变记事本打开还原,桌面图标变lnk还原方法

    今天天碰到一坑爹问题,打开一个.ini文件自动设置用记事本打开,所有快捷方式都变成记事本打开了,如下图,网上找了一些方法. windows中LNK文件打开方式恢复 相信有些用户曾试过错误地把LNK文件 ...

  4. 29. SpringBoot Redis 非注解

    1. 引入依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spr ...

  5. 分享12款 JavaScript 表格控件(DataGrid)

    JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...

  6. MySQL Out-of-Band 攻击

    概述 当涉及到MSSQL与Oracle时,Out-of-Band 注入是非常好的方式.但我注意到MySQL注入的情况并非如此,于是我准备以自己在SQL注入方面的经验做相关的研究.我们可以利用诸如loa ...

  7. leetcode 90. subsets

    解题思路: 要生成子集,对于vector 中的每个数,对于每个子集有两种情况,加入或不加入. 因此代码: class Solution { public: void subsetG(vector< ...

  8. (13)UniquePathIII

    一.问题描述 给定一个二维数组. 数组只有一个元素是1,是起点 数组只有一个元素是2,是终点 数组中的0是必须经过的地方 数组中的-1是障碍不可通过 从起始点到终点一共有多少路径? 二.思路 DFS ...

  9. vscode隐藏运行ts生成的js文件和map文件

    在code-首选项-用户设置中放入以下代码,覆盖原有的 { "files.exclude": { "node_modules": true, "**/ ...

  10. luogu P4899 [IOI2018] werewolf 狼火

    传送门 首先很显然,从人形起点出发能到的点和狼形能到终点的点都是一个联通块,如果能从起点到终点则说明这两个联通块有交 这个时候可以请出我们的克鲁斯卡尔重构树,即对原图分别建两棵重构树,一棵边权为两端点 ...