一些用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之路——24
复习 1.面向对象编程 思想:角色的抽象,创建类,实例化,操作实例2.面向对象的关键字 1.类的静态属性,存储在类的命名空间 2.类名.方法(对象),对象.方法 3.对象可以使用静态变量:类不可以使用 ...
- WPF 引用 ttf文件
1.在 http://www.iconfont.cn/ 下载图标,将图标加入购物车中,统一下载 2.下载到本地,解压后文件夹如下图.打开 demo_unicode.html 可以查看下载的图标信息和引 ...
- 在做MVC和WebApi写返回数据时，可以这样定义
public class Messages { /// <summary> /// 返回包含是否成功以及消息字符结果 /// </summary> /// <param ...
- 给datagridview的下拉框添加valueChange事件
修改datagridview的EditMode属性为EdutOnEnter,否则需要点2次以上才出现下拉框 1.给DataGridView添加EditingControlShowing事件: 2.编辑 ...
- http中的filter拦截servlet之后获取body，字符流关闭，无法继续传入控制器
https://blog.csdn.net/pyxly1314/article/details/51802652
- Python2中生成时间戳（Epoch，或Timestamp）的常见误区
在Python2中datetime对象没有timestamp方法,不能很方便的生成epoch,现有方法没有处理很容易导致错误.关于Epoch可以参见时区与Epoch 0 Python中生成Epoch ...
- win10环境下适应pip安装autobahn提示认证失败的问题
工作需要看一下websocket的东西,然后使用autobahn三方,但是使用pip install安装怎么也安装不上,问了很多网站,都说的升级pip,可是每一个鸡巴管用的,不过还是谢谢他们,现在我只 ...
- Python第4天
主要内容: 数字(int) 字符串(replace/find/join/strip/startswith/split/upper/lower/format) 列表 append/extend/inse ...
- spark单机搭建
说明:单机版的Spark的机器上只需要安装Scala和JDK即可,其他诸如Hadoop.Zookeeper之类的东西可以一概不安装 只需下载如下三个包 1.安装jdk 配置环境变量 vim /etc/ ...
- Shell 批量修改主机 用户密码
问题:132.121.114 和 132.121.118 网段共 48 台主机未添加基础监控,但是 wh 账户不能登录 需进行批量修改密码操作. 目前情况:op1对上述48台机器设备均能免密登录. 操 ...