【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比
CSS效果
1.使用div绘制图形（三角形）？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.triangle-top {
width: 0;
height: 0;
border-width: 0 40px 40px;
border-style: solid;
border-color: transparent transparent red;
}
.triangle-bottom {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 40px 0 40px;
border-color: blueviolet transparent transparent transparent;
}
.triangle-left {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 0 40px 40px;
border-color: transparent transparent transparent #89ff56;
}
.triangle-right {
width: 0;
height: 0;
border-style: solid;
border-width: 40px 40px 40px 0;
border-color: transparent yellowgreen transparent;
}
/*缺口的三角形*/
.box{
position: absolute;
left: 0;
top: 0;
width: 0;
height:0;
border: 6px solid transparent;
}
.b1{
/*底层的盒子三角形相当于全部是黑色的*/
border-bottom-color:#000 ;
}
.b2{
/*上层的为白色覆盖*/
border-bottom-color:#fff ;
}
</style>
</head>
<body>
<div class="triangle-top"></div>
<div class="triangle-bottom"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
<div class="box b1"></div>
<div class="box b2"></div>
</body>
</html>
2.如何产生一个不占空间的边框?( box-sizing属性)?
[!NOTE]
知识点：IE和标准盒子模型的异同点
- 标准盒子模型：元素的width或height=content的width或height；
- IE盒子模型：元素的width或height=content的width或height+padding2+border2；
/*IE盒子模型：width_sum = margin + width*/
.border-box-use {
box-sizing : border-box;
/*通过IE的盒子模型设置出来之后，这个盒子内容区域的宽度实际只有180px
这里指定的width 实际上是包含了border的宽度的
*/
width: 200px;
height: 200px;
border: 10px solid #89ff56;
}
/*标准盒子模型：width_sum = margin + width + padding + width*/
.border-content-box-use {
/*设置为标准的盒子模型，默认值*/
box-sizing: content-box;
width: 200px;
height: 200px;
padding: 1px;
border: 10px solid #ff255f;
}
.parent-box-inhrit {
/*设置当前的盒子模型是从父级盒子中继承，这里相当于是继承了IE的盒子模型*/
box-sizing: inherit;
width: 50px;
height: 50px;
background-color: #48adff;
border: 1px solid #000;
/*对一个元素自身设置padding，相当于是把盒子撑大了*/
padding: 5px;
}
2.1 使用box-shadow实现
/*box-shadow 制作边框*/
.box-shadow-border {
width: 200px;
height: 200px;
/*设置外阴影：x y 模糊区域 扩展区域*/
box-shadow: 0 0 0 10px red , 0 0 0 10px blue;
}
2.2 使用outline实现
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。即不会增加额外的width或者height。
.borner-no-space {
width: 200px;
height: 200px;
outline: 10px solid red;
}
3.如何实现IOS图标的圆角？
/*clip-path的使用
1. 对容器进行裁剪
2. 常见集合图形
3. 自定义路径
*/
.container-clippath {
width: 400px;
height: 300px;
border: 1px solid #000;
background-image: url("bg.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
/*开始进行区域裁剪*/
/*clip-path: circle(50px at 100px 100px);*/
/*clip-path: inset(100px 50px);*/
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/*同时，也是支持svg矢量图的裁剪*/
}
.container-clippath:hover {
clip-path: circle(80px at 100px 100px);
}
5.说下背景图的居中显示/重复/改变大小?
background-position： 背景图片相对容器原点的起始位置
background-repeat
background-size : cover/contain(设置大小)
/* 一个值: 这个值指定图片的宽度，那么第二个值为auto */
background-size: auto
background-size: 50%
background-size: 3em
background-size: 12px
/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/*多重背景，请用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但是必须用逗号隔开。 */
background-size: auto, auto /* 不要跟background-size: auto auto混淆了 */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain
background-size: inherit
6.如何平移/放大一个元素？如何实现0.5px的边框？
[!NOTE]
知识点:transform的灵活使用
<style>
.custom-border{
width:200px;
margin:10px auto;
height:100px;
border:1px solid #333;
background-color:#eee;
padding:10px;
}
.scale-border{
margin:10px auto;
height:100px;
position:relative;
padding:10px;
width: 200px;
}
.border{
-webkit-transform:scale(0.5);
transform:scale(0.5);
position:absolute;
border:1px solid #333;
top:-50%;
right:-50%;
bottom:-50%;
left:-50%;
background-color:#eee;
}
.content{
position:relative;
z-index:2;
}
</style>
<body>
<div class="custom-border border-color">边框宽度1px</div>
<div class="scale-border">
<div class="content">边框宽度0.5px</div>
<div class="border border-color"></div>
</div>
</body>
</html>
7.如何实现3D效果（旋转的硬币）？
/* 1. 设置一个透视变换，相机距离图像的距离 */
/* perspective : 500px */
/* 2. 设置视觉查看的样式 */
/* transform-style : perspective-3d */
/* 3. 变换图像 */
/* transform : translate rotate */
/*旋转的硬币效果*/
.money {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #48adff;
border: 2px solid #000;
/*开启3D效果*/
perspective: 500px;
transform-style: preserve-3d;
/*transform : rotateY(180deg);*/
animation : rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform : rotateY(0deg);
}
to {
transform : rotateY(360deg);
}
}
【前端知识体系-CSS相关】CSS特效实现之Transition和Transform对比的更多相关文章
- 【前端知识体系-JS相关】对移动端和Hybrid开发的理解？
1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...
- 【前端知识体系-JS相关】组件化和React
1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...
- 【前端知识体系-HTML相关】HTML基础知识强化总结
1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...
- 【前端知识体系-JS相关】JS基础知识总结
1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...
- 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点
1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...
- 前端知识体系-NodeJS相关】NodeJS基础知识全面总结
NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...
- 【前端知识体系-NodeJS相关】对NodeJS模块机制的理解
1. CommonJS模块规范 1.1 模块引用 var math = require('math'); 1.2 模块定义 [!NOTE] 上下文提供exports对象用于导出当前模块的方法和变量,并 ...
- 【前端知识体系-JS相关】深入理解JavaScript异步和单线程
1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
随机推荐
- Eureka错误解决方法
# Eureka错误解决方法 ## security.basic.enabled 配置过时或不可用默认情况下:用户名:user密码:启动应用在控制台会输出,如下图: 也可以通过如下属性配置:sprin ...
- 浅谈微服务架构与.Net Core
微服务(microservice)这个概念是2012年出现的,2014年3月Martin Fowler在他的个人网站(https://martinfowler.com/articles/microse ...
- 题解 CF600E 【Lomsat gelral】
没有多少人用莫队做吗? 蒟蒻水一波莫队 这是一道树上莫队好题. 时间复杂度(\(n\sqrt{n}logn\)) 蒟蒻过菜,不会去掉logn的做法qaq 思路很简单: 1.dfs跑一下树上点的dfs序 ...
- 如何利用Fiddler4进行Android APP / IOS APP抓包
Fiddler抓包 1.Fiddler介绍 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据. F ...
- 前后端hosts配置访问问题解决思路
问题背景:前后端分离情况下后端开发测试需要配置hosts,有此问题的人员有RD,QA,PM,User 测试环境由于用户使用这种配置导致无法使用线上系统发起单据影响用户使用,同时让用户误以为系统出问题而 ...
- 设计模式（十九）State模式
在面向对象编程中,是用类表示对象的.也就是说,程序的设计者需要考虑用类来表示什么东西.类对应的东西可能存在于真实世界中,也可能不存在于真实世界中.对于后者,可能有人看到代码后会感到吃惊:这些东西居然也 ...
- PCES - alpha阶段测试报告
测试计划 测试目的 本测试目的在于测试项目完成情况,以及分析测试结果,为下一轮开发提供解决方案 测试项目 学生用户登录测试 课程信息检索测试 服务器测试 在测试过程中出现的Bug 用户界面间的跳转逻辑 ...
- UNIX环境高级编程 使用方法
1.解压文件到apue.2e目录2.修改相应平台的文件,我使用的是linux,所以修改Make.defines.linux你修改的只需要这一行WKDIR=/home/your_dir/apue2e_s ...
- 设计模式C++描述----16.状态(State)模式
一. 举例 一般汽车发动机工作时有四种状态,吸气.压缩.做功和排气. 在运行时,不同的状态会有不同的行为,当前的状态机在适当的时候会过渡到下一状态. 其实用户在使用时根本不知道当前的状态,也无需知道当 ...
- mysql笔记一
普通操作, 查看数据库的大小,SELECT sum(DATA_LENGTH)+sum(INDEX_LENGTH) FROM information_schema.TABLES where TABLE_ ...