CSS动效集锦,视觉魔法的碰撞与融合(三)
- 扇形DIV的使用——实现雷达扫描图
- DIV环形布局—实现loading圈
- 动画的向量合成—实现抛物线动画
- 无限滚动动画—实现跑马灯效果
- perspective和transform的运用——实现卡片翻转
扇形DIV的使用——实现雷达扫描图
- 锐角扇形:deg<0,向右边倾斜,即可得到锐角扇形
- 钝角扇形:deg>0, 向左边倾斜,即可得到钝角扇形
// CSS代码
@keyframes rotateAnimate {
from {
transform: rotate(0deg) skew(-30deg)
} to {
transform: rotate(360deg) skew(-30deg)
}
} .fan-wrapper {
overflow: hidden;
position: relative;
margin: 100px;
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
} .fan {
position: absolute;
right:;
animation: rotateAnimate 2s linear infinite;
/* 这一行很重要,设置左下角为旋转点 */
transform-origin: 0% 100%;
width: 100px;
height: 100px;
background: blue;
}
// HTML代码
<div class="fan-wrapper">
<div class="fan"></div>
</div>
DIV环形布局—实现loading圈
// CSS代码
.circles {
position: relative;
margin: 50px;
width: 200px;
height: 200px;
} .circle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
}
// HTML
<div class="circles">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
<div class="circle circle5"></div>
<div class="circle circle6"></div>
<div class="circle circle7"></div>
<div class="circle circle8"></div>
</div>
/**
* R:大圆半径,2*R = 外部正方形的边长
* r:在大圆边上等距排列的小圆的半径
* counts: 圆的数量
* 返回值:
* [
* [x1,y1],
* [x2,y2],
* ...
* ]
*/
function calcXYs(R, r, counts) {
// 当前度数
let deg = 0;
// 单位度数,两小圆和圆心的夹角
const pDeg = 360 / counts;
// 存放返回结果
const arr = [];
for (let i = 0; i < counts; i++) {
// 度数以单位度数递增
deg = pDeg * i;
// Math.sin接收的参数以 π 为单位,需要根据360度 = 2π进行转化
const proportion = Math.PI / 180;
// 以外部DIV左下角为原点,计算小圆圆心的横纵坐标
let Y = R + R * Math.sin(proportion * deg);
let X = R + R * Math.cos(proportion * deg);
// 存放结果
arr.push([X, Y, deg]);
}
return arr;
}
/**
* R,r,counts:含义同上
* selector: 获取所有小圆的标志符
* 作用:根据上一步的坐标计算结果,调整绝对定位的小圆的位置
*/
function resizeCircles(selector, R, r, counts) {
// 获取所有小圆NodeList的选择器
let list = document.querySelectorAll(selector);
//调用calcXYs方法
const XYs = calcXYs(R, r, counts);
// 遍历每个小圆的XY坐标
for (let i = 0; i < list.length; i++) {
const [X, Y] = XYs[i];
const e = list[i];
// 修改小圆距离外部DIV底部和左边的距离
e.style.left = X + "px";
e.style.bottom = Y + "px";
}
}
resizeCircles(".circle", 60, 20, 8);
- 给每个圆设置animation实现明暗变化,例如可以设置黑色的背景色然后动态变化opacity
- animation属性可以设置delay实现动画延迟播放,我们依次给圆设置等距的delay,例如1s,2s,3s...
- 给animation属性设置alternate,表示往复播放,设置infinite,表示无限循环播放
@keyframes k {
from {
opacity: 1;
} to {
opacity: 0;
}
}
.circle1 {
animation: k 1s ease 0s alternate infinite;
} .circle2 {
animation: k 1s ease 0.2s alternate infinite;
} .circle3 {
animation: k 1s ease 0.4s alternate infinite;
}
// circle4 ~ circle8同理,delay以0.2s递增
动画的向量合成—实现抛物线动画
- 水平方向: 匀速直线运动
- 垂直方向:初速度为0的匀加速直线运动
- 设置两个div:外层div和内层div
- 外层div设置横向匀速运动的动画
- 内层div设置纵向的匀加速直线运动的动画,加速过程可以用cubic-bezier设置
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
// HTML
<div id="outer">
<div id="inner"></div>
</div>
<button id='btn'>抛物线效果</button>
// CSS
#outer {
transition: all 1.5s linear;
} #inner {
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
transition: all 1.5s cubic-bezier(.54, .11, .95, .68);
} .outer-active {
transform: translateX(300px);
} .inner-active {
transform: translateY(300px) scale(0.3);
}
JS
document.getElementById("btn").onclick = function() {
document.getElementById("outer").classList.add("outer-active");
document.getElementById("inner").classList.add("inner-active");
};
无限滚动动画—实现跑马灯效果
// HTML
<div class="marquee">
<p>ABCDEFGHIJKLMN</p>
</div>
// CSS
@keyframes marquee {
from {
transform: translateX(-200px)
} to {
transform: translateX(200px)
}
} .marquee {
overflow: hidden;
margin: 100px;
width: 200px;
} .marquee p {
animation: marquee 3s linear infinite;
}
perspective和transform的运用——实现卡片翻转
- transform: rotateY(x deg) 翻转卡片
- backface-visibility:hidden 翻转后隐藏背面,重要!必须要加
- perspective:增加透视和立体效果
// HTML
<div id="img-wrapper">
<img src='./timg.jpg' id='img1' class="img disable-img1" />
<img src='./timg2.jpg' id='img2' class="img" />
</div> // CSS
#img-wrapper {
perspective: 1200px;
position: relative;
height: 479px;
} #img1,
#img2 {
position: absolute;
transition: all 1s linear;
backface-visibility: hidden;
} #img1 {
transform: rotateY(-180deg);
} #img-wrapper:hover #img1 {
transform: rotateY(-360deg);
} #img-wrapper:hover #img2 {
transform: rotateY(-180deg);
}
CSS动效集锦,视觉魔法的碰撞与融合(三)的更多相关文章
- CSS动效集锦,视觉魔法的碰撞与融合(二)
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- CSS特效集锦:视觉魔法的碰撞与融合(二)
引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...
- CSS动效集锦,视觉魔法的碰撞与融合(一)
前言 在本文中我讲述了7种CSS的动效,它们也许看起来并不惊艳,但是我认为却足够传达本文的理念:编写一些特殊的CSS样式的时候需要不拘于常理,要用特殊的认识角度看待标签和样式属性,从而用「绕个弯」的方 ...
- js+css 动效+1的效果
点击数值 +1 的动效 vue data:{ timer: null,plus:''// 次数 } method:{ animate(plus) { var _this = this; clearIn ...
- css动效库animate.css和swiper.js
animate.css https://daneden.github.io/animate.css/ 学习的文档:http://www.jq22.com/jquery-info819 腾讯团队的JXa ...
- 前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 【总结】前端必须收藏的CSS3动效库!!!
现在的网站和App的设计中越来越重视用户体验,而优秀的动效则能使你的应用更具交互性,从而吸引更多用户的使用. 如果你对CSS3中定义动效还不熟练,或希望采用更加简单直接的方式在你的应用中引入动效的话, ...
- 前端读者 | 前端用户体验-UI动效设计
本文来自互联网 @羯瑞 整理 UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的. 动效呈现出状态切换的过程,展现了元素之间的逻辑关系, ...
- CSS揭秘—打字动效(四)
前言: 所有实例均来自<CSS揭秘>,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知 该书只提供了关键CSS代码,虽然有在线示例代码链接,但 ...
随机推荐
- 【codeforces 764A】Taymyr is calling you
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- Java 学习笔记(14)—— 文件操作
java文件操作主要封装在Java.io.File中,而文件读写一般采用的是流的方式,Java流封装在 java.io 包中.Java中流可以理解为一个有序的字符序列,从一端导向到另一端.建立了一个流 ...
- HDU1166 敌兵布阵 BZOJ1012 最大数[树状数组]
一.前置知识-树状数组 树状数组(binary indexed tree)是一种简洁的代码量很小的数据结构,能够高效的处理前缀区间上的问题.在很多情况下能写树状数组解决的就不用码半天线段树了. 树状数 ...
- springboot 动态修改定时任务
1.静态定时 1)启动类加上注解@EnableScheduling @EnableAsync @EnableScheduling @SpringBootApplication @MapperScan( ...
- IDEA到期了?不用怕,最新的永久激活送给你
今天发现好多人的IDEA激活码都到期了,IDEA社区版又不能满足开发需求,因此写这篇IDEA的激活文章,希望对大家有用. 以下方法的破解文件的是永久破解的,不存在过期时间. 当然,有条件还是买正版授权 ...
- 编译GLib C程序
编译GLib C程序 GLib是GTK +所需的实用程序库,但也可以在非GUI应用程序中独立使用.本文介绍如何在Linux中编译使用GLib的C程序.它还显示了如何为系统上安装的GLib版本安装正确的 ...
- delphi7 如何描述窗体上的全部控件
在delphi开发中,经常需要用到窗体中控件的name名来进行对象方法或属性的调用,所以如何对delphi窗体进行简洁,清楚,完整的描述就很重要.最好能不看界面也能进行界面编码,具体如下表所示: xx ...
- DNS自述:我是如何为域名找到家的
对于互联网一代的我们,一出生就学会使用电脑.当我们对着浏览器地址栏输入www.baidu.com的时候,百度的首页就出现在面前.但你可曾想过,为什么我们输入www.baidu.com就可以弹出百度首页 ...
- 低功耗蓝牙(BLE)——概述
1. 概述 蓝牙协议是由SIG制定并维护的无线通信协议,蓝牙协议栈是蓝牙协议的具体实现.各厂商都根据蓝牙协议实现了自己的一套函数库--蓝牙协议栈,所以不同厂商的蓝牙协议栈之间虽然存在差别,但是都遵 ...
- 2019版Idea如何激活
1.下载jar包 链接: https://pan.baidu.com/s/1w4B4_hmiiueNDJMjYKaFyQ 提取码: fkpx 2.修改·vmoptions 1.Help" - ...