一些用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= ...
随机推荐
- kibi - join and filter data from multiple Elasticsearch indexes
Kibi extends Kibana 4.6.4 with data intelligence features. The core feature of Kibi is the capabilit ...
- 关于shiro安全框架实现同一用户同一时刻仅可在一个地址登录的技术实现
首先,我们要说明一下,本技术点的开发背景是shiro与springMvc结合环境下的开发方式. 由于shiro把用户登录后的信息都存在了自己封装的session中,所以要实现单一地址登录,我们需要关注 ...
- Java解析XML之Dom4j
Java解析XML文件的方法有多种,个人感觉最常用的是使用Dom4j来解析XML文件.下面就简单介绍下Dom4j的基础使用. Dom4j需要jar包的支持,大家可以从网络上下载,如dom4j-1.6. ...
- 去掉点击a标签时产生的虚线框
1．直接给a 标签添加属性:onfocus="this.blur()" 即可 For Example: <a onfocus="this.blur()" ...
- MYSQL数据库中中文乱码问题
show variables like 'character%'; set character_set_database=gbk; 把记事本中的代码引入到mysql数据库中:source +addre ...
- JAVA REENTRANTLOCK、SEMAPHORE 的实现与 AQS 框架
引言 ReentrantLock是JDK提供的一个可重入互斥锁,所谓可重入就是同一个锁允许被已经获得该锁的线程重新获得.可重入锁的好处可以在递归算法中使用锁,不可重入锁则导致无法在递归算法中使用锁.因 ...
- Why the Anaconda command prompt is the first choice in windows?
为什么在windows里,首选的conda命令行工具是Anaconda command prompt? In windows, what's the difference between comman ...
- 使用ScheduledThreadPoolExecutor执行定时任务
ScheduledThreadPoolExecutor scheduled = new ScheduledThreadPoolExecutor(2); scheduled.scheduleAtFixe ...
- 重写 final关键字 多态调用子类特有的属性及行为(向上向下转型)
1.override 重写:在继承中,子类与父类方法名相同,参数列表相同,的方法叫重写,与返回值有关; 主要应用于系统升级. 2.final 关键字: 可修饰:1.类-->被修饰后该类不能被继 ...
- 对抗生成网络-图像卷积-mnist数据生成(代码) 1.tf.layers.conv2d(卷积操作) 2.tf.layers.conv2d_transpose(反卷积操作) 3.tf.layers.batch_normalize(归一化操作) 4.tf.maximum(用于lrelu) 5.tf.train_variable(训练中所有参数) 6.np.random.uniform(生成正态数据
1. tf.layers.conv2d(input, filter, kernel_size, stride, padding) # 进行卷积操作 参数说明:input输入数据, filter特征图的 ...