一些用Css实现的效果
今天写一个笔试题，其中有一个是用css实现直角梯形的效果，我给出的答案是：
<style>
.wrap{
width: 100px;
height: 50px;
border-top:90px solid transparent;
border-left:90px solid #ffff00;
} </style>
</head>
<body>
<div class="wrap">
</div>
然后顺带回顾一下设置三角形的原理
1.首先设置宽和高为0
2.然后给边框加上宽高和相应颜色
<style>
.wrap{
width: 0px;
height: 0px;
border-right:100px solid transparent;
border-left:100px solid transparent;
border-bottom:100px solid #ffff00;
} </style>
</head>
<body>
<div class="wrap">
</div>
拼多多二面让我写一个菊花的loading，我写不来，估计是凉了（心累了），先从一个css3的选择效果做起
<div></div>
@keyframes rotating{
from{transform:rotate()}
to{transform:rotate(360deg)}
}
div{
width: 100px;
height: 100px;
border: 1px solid;
animation: rotating .2s linear infinite;
}
一些用Css实现的效果的更多相关文章
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- CSS 边框 阴影 效果
CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...
- Css实现透明效果，兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
- HTML与CSS简单页面效果实例
本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...
- css 实现评分效果
css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由 background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- React 系列教程 1：实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- IE7,8纯css实现圆角效果
众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...
随机推荐
- python爬虫学习笔记（二）——基础篇之爬虫基本原理
1.什么是爬虫? 请求网站并提取数据的自动化程序 2.爬虫基本流程 2.1发起请求 通过HTTP库向目标站点发起请求,即发起一个Request,请求可以包含额外的headers等信息,等待服务器响应: ...
- Linux系统编程——Daemon进程
目录 Daemon进程介绍 前提知识 Daemon进程的编程规则 Daemon进程介绍 Daemon运行在后台也称作"后台服务进程". 它是没有控制终端与之相连的进程.它独立与控制 ...
- crf++实现中文分词简单例子 （Windows crf++0.58 python3）
学习自然语言处理的同学都知道,条件随机场(crf)是个好东西.虽然它的原理确实理解起来有点困难,但是对于我们今天用到的这个crf工具crf++,用起来却是挺简单方便的. 今天只是简单试个水,参考别人的 ...
- electron+antd详细教程
第一步: 要做一个electron项目,理论上我们应该从electron-quick-start开始,就是说我们需要如下3个文件: package.json,node工程最基本的要求,类似于Java的 ...
- [STM32F103]RTC日历
使能PWR和BKP时钟: a) RCC_APB1PeriphClockCmd(); 使能后备寄存器访问: a) PWR_BackupAccessCmd(); 配置RTC时钟源,使能RTC时钟: a) ...
- Avalon MM 总线
对于Avalon Master来讲,Address信号代表一个字节(8-bit)的地址.Address的值必须与字节的宽度对齐,如果要对某个word的byte写,需要首先使用byteenable信号: ...
- Python 递归的练习
递归的练习 递归的了解实例 # 定义一个类(num是需要给出的参数) # 一定要有临界值 # 要有递推的关系 def digui(num): # 打印num print('$'+str(num)) # ...
- spring静态注入
与其说是静态注入(IOC),不如讲是对JavaBean 的静态成员变量进行赋值. 一般我们在使用依赖注入的时候,如果当前对象(javaBean )创建(实例化)一次,那么非静态的成员变量也会实例化一次 ...
- mongo 高级操作
聚合 aggregate 聚合(aggregate)主要用于计算数据,类似sql中的sum().avg() 语法 db.集合名称.aggregate([{管道:{表达式}}]) 管道 管道在Unix和 ...
- 编译pcre 报错 error: Invalid C++ compiler or C++ compiler flags
安装c++ 编译器:yum -y install gcc-c++ ,再次编译通过.