日度归档:2021年2月25日

CSS3 中如何实现鼠标经过图片时-出现光弧效果呢?


摘要:
下文讲述使用css代码 鼠标经过时-出现光弧效果的示例分享,如下所示:

实现思路:
    1.绘制一个渐变的光弧 linear-gradient
	2.绘制一个动画css属性(动画一直运动)
	3.当鼠标经过时元素透明度

例:
CSS3 实现鼠标经过图片时-出现光弧效果的示例分析

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫小屋</title>
<style type="text/css">
.overimg {
  position: relative;
  display: block;
  box-shadow: 0 0 10px #fff;
}
.light {
  cursor: pointer;
  position: absolute;
  left: -180px;
  top: 0;
  width: 580px;
  height: 200px;
  background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  transform: skewX(-25deg);
  -o-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
}
.overimg:hover .light {
  left: 180px;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
</style>
</head>
<body>
<P>
maomao365.com <br />
鼠标经过图片时候,
出现光狐
</p>
<hr />
<p class="overimg">
  <a><img src="http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png"></a>
  <i class="light"></i>
</p>
</body>
</html>
css3实现光弧效果的示例分享

css3实现光弧效果的示例分享

CSS3 中如何将字符串多余部分使用省略号代替呢?


摘要:
下文讲述使用css代码实现多余部分使用省略号替代的示例分享,如下所示:

实现思路:
    使用text-overflow: ellipsis;
	 属性即可将超出元素宽度部分
	 使用省略号代替

例:
CSS3 字符串多余部分使用省略号的示例分析

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫小屋</title>
<style type="text/css">
.testDiv  {
  max-width:180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
</head>
<body>
<p>
maomao365.com <br />
css实现字符串省略的示例
</p>
<hr />
<div class="testDiv">
  我是一个字符串-多余部分被省略
</div>
</body>
</html>
css实现字符串省略的示例

css实现字符串省略的示例

CSS3 中如何绘制一个”Chrome浏览器的logo”呢?


摘要:
下文讲述使用css代码绘制”Chrome浏览器的logo”的示例分享,如下所示:

实现思路:
    1.绘制圆形
	2.设置元素的渐变背景色
	3.在元素中央附加一个圆形

例:
CSS3 绘制Chrome logo的示例分析

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程</title>
<style>
body {
  position: relative;
}
.chrome {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: linear-gradient(180deg, #ee6150 0%, #ee6150 40px, transparent 40px, transparent 100%), 
              linear-gradient(295deg, #fdd800 0%, #fdd800 55px, transparent 55px, transparent 100%), 
              linear-gradient(50deg, #58be5b 0%, #58be5b 70px, transparent 70px, transparent 100%);
  transform: translate(50%, 50%);
  overflow: hidden;
}
.chrome:before, .chrome:after {
  content: '';
  position: absolute;
}
.chrome:before {
  width: 0;
  height: 0;
  border-bottom: 70px solid #58be5b;
  border-bottom-width: 80px;
  border-bottom-style: solid;
  border-bottom-color: #58BE5B;
  border-right: 13px solid transparent;
  border-right-width: 35px;
  border-right-style: solid;
  border-right-color: transparent;
  border-left: 22px solid transparent;
  border-left-width: 18px;
  border-left-style: solid;
  border-left-color: transparent;
  left: -4px;
  top: 12px;
  -webkit-transform: rotate(113deg);
  transform: rotate(113deg);
}
.chrome:after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #3c8fc8;
  border: 5px solid #dbdbdb;
}
</style>
</head>
<body>
  <div class="chrome"></div>
</body>
</html>
css3绘制chrome_logo的示例分享

css3绘制chrome_logo的示例分享