css3新属性运用

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鼠标滑过，出现呢下滑线，移开消失

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新属性运用的更多相关文章

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
基于css3新属性transform,实现3d立方体的旋转通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示实现原理:通过获取鼠 ...
两点补充——CSS3新属性以及弹性布局
CSS3 新属性一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋二 .[CSS 长度单位 ...
css3新属性position: sticky 一分钟实现导航栏悬停功能
css3新属性position: sticky 一分钟实现导航栏悬停功能前言正文前言想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn ...
使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
css3新属性@ text-shadow
text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...
css3新属性的总结
今天继续总结css3的一些css3新样式,先列一个简单的提纲,重要的还是圆角.阴影.渐变.文字缩略,最最重要的是过度transition,变换transform和animation圆角阴影渐变圆形渐 ...
CSS3新属性注释及实例
这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...
css3新属性的学习使用
display 可选值:none隐藏元素: block显示为块级元素: inline显示为行级元素 inlineblock显示为内联块级元素,本身将是一个行级元素,但是拥有块级元素的所有属性,比如宽 ...
css3新属性
CSS calc()函数来制作响应式网格: calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border.margin.pading.fo ...

随机推荐

Spring项目集成ShiroFilter简单配置
Shiros是我们开发中常用的用来实现权限控制的一种工具包,它主要有认证.授权.加密.会话管理.与Web集成.缓存等功能.我是从事javaweb工作的,我就经常遇到需要实现权限控制的项目,之前我们都是 ...
scrapy_splash模块解析动态js
一般遇到动态加载的网页就比较棘手,一般采用scrapy_splash和selenium这两种方式来解决.貌似scrapy_splash更强大,因为就从爬取美团这个网站而言,scrapy_splash可 ...
python Bootstarp框架和inconfont、font-awesome使用
http://www.bootcss.com/ http://www.runoob.com/bootstrap/bootstrap-panels.html 查找基本的没问题 https://www. ...
vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined
TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...
Markdown Cheatsheet
This is intended as a quick reference and showcase. For more complete info, see John Gruber's origin ...
Docker 从入门到放弃（一）安装
前言 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任 ...
[Android] Android 使用 Greendao 操作 db sqlite(2)-- 封装DaoUtils类
继续接上文: Android 使用 Greendao 操作 db sqlite(1)-- 直接在MainActivity中调用布局文件同上文一致,这里就不贴了. 一.封装DaoUtils类 User ...
jsp查询修改
也是只帖代码....不讲解. 1.search.jsp <%@ page language="java" import="java.util.*" pag ...
mac怎么快速回到桌面隐藏所有窗口
当你同时按下Option+Command+h键,就能把所有已打开的程序窗口(不包括当前正在运行的应用程序窗口)最小化到Dock栏上.注意不是关闭哦,是最小化哦.如果需要把程序窗口恢复到屏幕上,直接点击 ...
微信小程序开发(2) 计算器
在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分一.小程序主体部分一个小程序主体部分由三个文件组成,必须放在项目的 ...

css3新属性运用

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

随机推荐

热门专题