css3动画

css3 动画

阅读更多关于 css3 动画

.btn-shake-hand{ width: 0.78rem; height: 0.94rem; position: absolute; left: 5.15rem; top: 3.46rem; background: url('https://static.kuaidao.cn/qingteng/wx-images/images/qixi_a_20190731/shou@2x.png') no-repeat; background-size: 100% 100%; -webkit-animation: fingerHandle 1s ease infinite both; animation: fingerHandle 1s ease infinite both; } /* 按钮动画 */ @-webkit-keyframes free_download { 0% { -webkit-transform: scale(0.9); } 100% { -webkit-transform: scale(1); } } @keyframes free_download { 0% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes fingerHandle { 0% { transform: none

CSS3——过渡

阅读更多关于 CSS3——过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。语法格式: transition: 要过渡的属性花费时间运动曲线何时开始; 如果有多组属性变化，还是用逗号隔开。如果想要所有的属性都变化过渡，写一个all 就可以 transition-duration 花费时间单位是秒 s 比如 0.5s 这个s单位必须写 ms 毫秒运动曲线默认是 ease 何时开始默认是 0s 立马开始运动曲线示意图： div { width: 200px; height: 100px; background-color: pink; /* transition: 要过渡的属性花费时间运动曲线何时开始; */ transition: width 0.6s ease 0s, height 0.3s ease-in 1s; /* transtion

使用css3和js在手机上实现简单的跑马灯效果

阅读更多关于使用css3和js在手机上实现简单的跑马灯效果

情况描述客户想在手机顶部的nav显示单行文字时,在字数较多,一屏显示不下的情况下,文字可以滚动起来.一开始,我是用的php做了一下字数的判断,如果字数比10个多就添加一个 <marquee> 标签,来制作这个滚动效果。选取 <marquee> 标签这样的方法,主要是考虑到这样是能兼容所有的平台的绝大部分机型的。这里首先做一个反省,这个问题是要考虑响应问题的,不是随意规定字数;这个问题应该交给js处理而不是php. 接下来,当我以为这样就大功告成的时候,设计部的同事告诉我说,客户要求,在文字可以滚动的情况,滚动文字的开头要从左端开始向右滚动。但是我在查阅资料后发现, <marquee> 标签只能从一端滚动到另一端,不能设定开始滚动的位置。好吧,那我只能先踏上寻找解决方案的征程了~~~(偶也) 解决问题的过程一开始我能想到的首先就是用js来模拟 <marquee> 标签,但是我我试了几个插件之后都不满意,因为我要实现的仅仅是一个简单的轮播文字的功能,只不过轮播开始的位置的是可以适当调整的.我想到了可以借助 css3 中的 transform 、 transition 外加js就应该可以实现类似的效果。但是在做的过程中发现有的手机不支持 transform 使用百分比,而且 transform 属性也会出现在手机上模糊的情况,于是就想到了使用 position 成果

CSS3之animation属性

阅读更多关于 CSS3之animation属性

CSS中的animation属性可用于为许多其他CSS属性设置动画，例如颜色，背景色，高度或宽度。每个动画都需要使用@keyframes这种at-rule语句定义，然后使用animation属性来调用它，如下所示： .element { animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } } 　　 <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title></title> <style> .element { width: 100%; height: 100%; animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } }

css3

阅读更多关于 css3

css3 1.圆角边框与阴影文本阴影：鼠标悬停动态效果：图片上停留出现说明文字文字排版分列：文字分为两列，类似报刊盒子：圆角边框，阴影，倾斜，旋转效果。浏览器前缀表:(w3school) 浏览器内核浏览器 css3前缀 Webkit Safari -webkit- Webkit Chrome -webkit- Gecko Firefox -moz- Presto Opera -o- Trident IE -ms- 1.1圆角边框border-radius属性： border-top-left-radius左上角的形状 border-top-right-radius 右上角的形状 border-bottom-left-radius 左下角的形状 border-bottom-right-radius 右下角的形状 border-radius：水平值垂直值 //方型，对角椭圆<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>D</title> <style type="text/css" media="screen"> div{ height: 100px; width: 150px; border:1px solid blue; border-top-left-radius: 40px 20px;

CSS3 动画学习笔记

阅读更多关于 CSS3 动画学习笔记

CSS3综合部分 2D转换(transform) 转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放位移(改变元素位置) translate( x , y ) 定义 2D 转换，沿着 X 和 Y 轴移动元素。例如: .box { transform: translate(100px, 200px); } 使用方式介绍: 基本写法: transform: translate(length, length); 总结: 1. 最多能设置两个值, 一个值用来改变水平,另外一个一个值用来改变垂直方向 2. 如果设置两个值,第一个值代表水平,第二值代表垂直 3. 如果希望让元素逆方向移动,可以设置负数 4. 通过位移方式改变元素位置,设置的值就是相对元素本身宽度和高度(可以设置百分比) 5. 如果设置一个值,那么元素只能在水平方向移动 2D位移方式实现定位元素居中 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 旋转 rotate( angle ) 定义 2D 旋转，在参数中规定角度。基本使用: transform: rotate(angle) 总结: 1. 设置的值代表旋转的角度(单位deg) 2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转

阅读更多关于 css3动画

动画：{ 关键帧：@keyframe, 动画：animation(必填动画名动画时长) } animation:name duration timing-funtion delay iteration-count(播放次数 n|infinite) direction(逆向播放 alternate) play-state(running or paused) fill-mode(动画外状态) @keyframe { from {} （百分比规定发生动画的时间）to{} } <style> .box{ width: 200px; height: 400px; position: relative; } .box > div{ position: absolute; width: 100px; height: 100px; animation: move 5s linear infinite alternate; } @keyframes move { 0% { background-color: red; top: 0px; left: 0px; } 25% { background-color: yellow; top: 0px; left: 200px; } 50% { background-color: blue; top: 400px; left: 200px; } 75%

css3两个汤圆亲吻动效

阅读更多关于 css3两个汤圆亲吻动效

1、transform:translate(-50%,-50%)实现水平垂直居中 translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。当使用：top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。示例： 2、css3 @keyframes 规则学习链接：https://www.runoob.com/cssref/css3-pr-animation-keyframes.html 笔记 3、CSS3 animation（动画）属性学习链接： CSS3 animation（动画）属性笔记语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state; 4、发现关于display:inline-block的一个有趣现象：

环状进度条progress bar circle

阅读更多关于环状进度条progress bar circle

2014-08-05 https://ag3.sap.corp:44354/sap(bD1lbiZjPTAwMQ==)/bc/bsp/sap/zprod_ui5/progress.htm 实现原理: index.js里以100毫秒为时间间隔定期执行一个匿名函数. 在这个函数里，动态设置当前progress circle的class。可以在chrome console里观察到该函数周期性的执行: 在html file里，每个1%的进度都有一组对应的class。每个class通过transform 实现动画效果。可以在chrome 里观察到degree的变化: 该例子来自: http://www.html5tricks.com/css3-3d-circle-progress.html 要获取更多Jerry的原创文章，请关注公众号"汪子熙": 来源： https://blog.csdn.net/i042416/article/details/101001336

前端知识学习总结篇（一）

阅读更多关于前端知识学习总结篇（一）

前言前端学习有一段时间了，对前端的一些知识点也了解的差不多了。Html5新增了许多的标签定义需要进行学习，Css3也有许多的属性包括标签的动画都是可以使用Css3的属性来进行定义的，这样就可以很方便的实现动画效果，以上就是Html5和Css3的学习重点。 JavaScript脚本语言可以获取Html的标签进行内容、样式的改变、设置点击事件进行页面跳转等。然后就是Dom文档有自己默认的布局方式是从左上角开始依次往下，标签也分为行标签和块标签。行标签可以占满一行。来源： https://blog.csdn.net/u013823101/article/details/100975615

订阅 css3动画