一些用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= ...
随机推荐
- 树莓派中学TensorFlow
树莓派中默认的虚拟环境为python 2.x,需要用下面的-p参数修改为python3环境.电信wifi和公司网络直接用pip3 install TensorFlow都不好使,用联通手机热点可以安装. ...
- 微信小程序中的组件使用2
需求 上面两个页面是同一个小程序的不同页面,两个页面中都是用到了label,有相似的地方,但是也有不同之处,这个时候,如果我们想要将这些label做出组件,然后复用,有该怎么做呢? 基础组件 首 ...
- RESTful levels、HATEOAS
概述: REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fiel ...
- Java中static、final、static final的区别（转）
说明:不一定准确,但是最快理解. final: final可以修饰:属性,方法,类,局部变量(方法中的变量) final修饰的属性的初始化可以在编译期,也可以在运行期,初始化后不能被改变. final ...
- unix scp命令(两个unix系统传输文件)
1.安装openssh-server模块 sudo apt-get install ssh openssh-server 2.使用命令 将本地文件拷贝到远程 scp 文件名 –用户名@计算机IP或者计 ...
- Visual Studio中定义OVERFLOW不能用
在Visual Studio中对OK.ERROR.OVERFLOW进行宏定义,但只有OVERFLOW不能正常使用为什么呢? #define OK 1: #define ERROR 0: #define ...
- IntelliJ IDEA 工程Java文件上红色的无效符
IntelliJ IDEA 工程Java文件上红色的无效符(红色表示该类是不可编译文件) 1.查看Java.resources文件夹 如图所示,是因为没有配置 2.在Java文件夹点击右键找到Mark ...
- eclipse安装中文语言包
打开eclipse官网 https://www.eclipse.org/ 选择Projects 搜索框输入:Babel 点击搜索 选择Downloads 根据eclipse启动图画里的版本选择要下载的 ...
- Monggodb基础
MongoDB 查询文档使用 find() 方法. find() 方法以非结构化的方式来显示所有文档. 语法 MongoDB 查询数据的语法格式如下: db.collection.find(query ...
- SpringMVC参数注解解释
在Controller的开发中,经常会用到很多注解,下面解释一下关于形参常用注解的一些解释,他们主要是用来接收参数的. @ModelAttribute("vo", ObjectVo ...